www.reboot.index.html Maven / Gradle / Ivy
Styleguide
Style Guide
Colours
Color Fundamentals
For tooling within Netflix, we've chosen a simple palette. Using gray for general structure elements
such as nav bars and borders allows you to highlight important elements or warnings with little to no
effort. In addition, a light gray body background allows white elements to pop when used as containers.
-
-
-
-
-
-
-
-
-
-
-
-
-
Typography
Typeface
The default typeface is Source Sans Pro. It is a sans serif typeface intended to work well in user
interfaces.
In order to use this web font you will need to add the following snippet into the header of your
HTML code.
Font Weight
Weight is a strong element when displaying type. Overuse of heavy weights diminishes their
effectiveness. Consider using it for key elements or labels, less for paragraph type.
Use
The weight or boldness of the font can be specified by using the corresponding class.
Please note that the web font Source Sans Pro is not available in all weights
(unlike old traditional fonts where bold is an algorithm to augment a typeface)
For this reason you must choose a font weight within the provided scale: .nf-bold,
.nf-normal(default), .nf-light
The Quick Brown Fox Jumps Over The Lazy Dog | font-weight:600
The Quick Brown Fox Jumps Over The Lazy Dog | font-weight:400
The Quick Brown Fox Jumps Over The Lazy Dog | font-weight:300
Text Alignment
Easily set the correct text alignment declaratively by using one of the following classes: txt-left,
txt-center, txt-right
.txt-left This text is left aligned
.txt-center This text is center aligned
.txt-right This text is right aligned
Headings
Headings are one of the strongest visual elements in this guide. They're best used to visually
describe sections and groups of data. Generally, a page should have a single h1 for the
app name. h2 is generally used for page title. From there, you can use different
headings to create differing visual impact and organize your screen. Given their weight and size,
headings shouldn't be colored.
Use
HTML headings, <h1> through <h6> are styled as appropriate.
Corresponding classnames are also available .h1 through .h6 for when you
want to match the font styling of a heading but still want your text to be displayed inline.
In order to maintain a consistent visual hierarchy using font sizes outside of the provided
font-size scale is discouraged.
Header H1 36px
Header H2 30px
Header H3 24px
Header H4 18px
Header H5 14px
Header H6 12px
Copy
The global default font-size is 14px.
Buttons
Pills
Pills are small labels often used to display status, tags or system health. Their small size allows for
flexible placement while the reversed text creates substantial visual impact. Be careful not to overuse
in a view as they can create a lot of visual noise. Consider using pills as an element within a single
column. In their simple white or gray state, they make excellent tags or category indicators.
Use
In order to create a pill simply use the custom pill element tag, alternatively you can also
use the .nf-pill classname
info
info
Variations
To customize the style of a pill, simply add one of the following classnames to the relevant tag .pill-ok,
.pill-marginal, .pill-failed or if you prefer one of the following attributes:
ok, marginal, failed
ok
marginal
failed
primary
Badge
Default Badge
In order to create a badge simply use the custom badge element tag, alternatively you can
also use the .nf-badge classname
info
info
Badge types
To customize the style of a badge, simply add one of the following classnames to the relevant tag .badge-ok,
.badge-marginal, .badge-failed or if you prefer one of the following
attributes: ok, marginal, failed
ok
marginal
FAIL
33%
Form
There is no need for special classes, or markup. Form elements should match match design out of the
box.
Input
Focused Input
A blue outline will indicate the user when an input element is focused. It's possible to visually
force this state by using the is-focused classname in the (rare) case you need to force
this pragmatically
Invalid Input
HTML5 has native validation when using the following attributes:
required, pattern and maxlength,
type(e.g. email, range, tel, time,
url, etc).
for more information:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation.
Alternatively is also possible to programmatically trigger this state simply by adding the .is-invalid
classname.
Tables
Default Table
There is no need for special classes, or markup. Table elements should match match design out of the
box.
#
Make
Model
Year
1
Honda
Accord
2009
2
Toyota
Camry
2012
3
Hyundai
Elantra
2010
4
Ford
Focus
2008
Striped Table
Large tables can be easier to read if rows are easily distinguishable. Adding the
.is-striped classname can be added to the <table> element and the zebra-styled
striping will be applied automatically.
#
Make
Model
Year
1
Honda
Accord
2009
2
Toyota
Camry
2012
3
Hyundai
Elantra
2010
4
Ford
Focus
2008
Navbar
Header
Basic
The header normally would contain a h1 tag and optionally a subnav (see below).
By default a divider/breaking line will be set underneath the header section.
Please note that the header tag must be a direct descendant of the main tag.
Title
Subnav
Subnav provides a navigation sub-menu. It is usually positioned within the header
as shown in this example. You can mark the active subnav item by adding the .is-selected classname to the appropriate li element.
If you are using web components you should consider the nf-subnav component which
provides some extra functionality.
Example of subnav within a header
Panel
Basic
A panel element represents a section of a page which aims to outline sections of your page.
This aids with page sections and when adding emphasis to a page section
This is a panel section
Panel with Heading
Add a heading container to your panel simply by adding the heading tag.
This is a panel header
This is a panel section
Panel with Footer
Add a footer container to your panel simply by adding the footer tag.
This is a panel section
Panel with Tables
Add a table to your panel simply by adding a table tag into it.
Now with 100% more table
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Given Name
Last Name
Handle
John
Tregoning
@tregoning
Peter
Smith
@Smithy
Lisa
Tabs
@taby
Grid
Introduction
Grid systems are used for creating page layouts through a series of rows and columns that house your content.
- .nf-1
- .nf-2
- .nf-3
- .nf-4
- .nf-5
- .nf-6
- .nf-7
- .nf-8
- .nf-9
- .nf-10
- .nf-11
- .nf-12
- .nf-13
- .nf-14
- .nf-15
- .nf-16
Use
Neflix default grid is a 16th based grid. This means that the maximum total allowed (using .nf-x classes) is 16. Here is an example of how said classes can be combined:
1/4 of available space (16/4 == 4) thus .nf-4
1/8 of available space (16/8 == 2) thus .nf-2
take all the remaining space (16 - (4 + 2)) == 10 thus .nf-10
Note: you can use the text alignment classes (e.g: .txt-center, .txt-left, .txt-right) on nf-grid in order to set the text alignment
Vertically centering content
If you need to vertically center the content, you can do so by switching to .nf-grid-centered.
Note: You will need to add an extra container as shown in the sample code.
1/4 of available space (16/4 == 4) thus .nf-4
1/8 of available space (16/8 == 2) thus .nf-2
take all the remaining space (16 - (4 + 2)) == 10 thus .nf-10
Toolbox
Hiding Elements
Add the hidden attribute to an HTML element to hide it from the screen, alternatively you
can also use the .is-hidden classname
Clearfix
Contain floats without resorting to using presentational markup. Easily clear floats by adding the .clearfix
classname to the container element.
Web Components
Introduction
Web Components is a W3C standard that enables web development based on encapsulated and interoperable
custom elements that extend HTML itself.
If you want to learn how to use it please refer to the getting started section
nf-table
nf-table extends a table by automatically making it sortable (by clicking on the relevant header it toggles the sorting order ascending/descending). in order to upgrade a native table into nf-table simply add the following to the table tag: is="nf-table"
Column content will be sorted alphabetically by default, You can override the column data type (and how it gets sorted) more details here
Header content 1
Header content 2
Numeric content
Date content
Body content 1
Body content 2
1%
1426703449787
Body content 3
Body content 4
55%
2012-08-18T18:30:49.787Z
Body content 2
Body content 3
15%
1379529049787
Events
-
sort
Fired when a column is sorted.
Event Details: e.detail.index contains the index of the column that triggered the sort event.
Methods
-
getData
Returns a JSON object containing the table's data.
-
sortTable
This method allows you to programmatically sort from nf-table.
Note: the first call will sort the relevant column in an ascending order and a subsequent call to the same column will change the sort order to descending.
Parameters:
- index: indicates what column should be sorted by index.
Column Data Types & Formats
-
num
To specify that a given column should be sorted by its numeric value simply add the num attribute to the relevant th. Note that the column content can also include non numeric values (e.g. '100$', '30%', etc).
You can also modify the number of decimal places displayed by giving the num attribute a value (e.g. num=3 will round to 3 decimal places)
-
date
To specify that a given column should be sorted by its date value simply add the date attribute to the relevant th.
You can also modify the how dates in this column are displayed by setting the value of the date attribute (e.g. date='YYYY-MM-DD' ) default is 'MM-DD-YYYY HH:mm'.
The actual values in the table cells can be anything that instanciate a javascript Date object (e.g. "2015-03-18T18:30:49.787Z", 1426703465107, etc).
nf-table is automatically available when importing netflix.html. If you wish to
import nf-table without importing the whole Netflix library, you can do so. Here is a standalone example
nf-table-search
nf-table-search introduces the ability to search/filter a nf-table
Header content 1
Header content 2
Body content 1
Body content 2
Body content 3
Body content 4
If you need to search in multiple tables simultaneously, there is a component for that nf-tables-search you can find more about it here
Attributes
-
placeholder
Sets the placeholder text in the search input box.
default: no placeholder text
-
table
Sets what nf-table the search/filtering should be applied to. This attribute value should be set the the ID of the relevant nf-table
default: fetches the first nf-table available in the page.
Events
-
update
Fired when the filter/search query changes.
nf-table-search is automatically available when importing netflix.html. If you wish to
import nf-table-search without importing the whole Netflix library, you can do so. Here is a standalone example
nf-table-paginate
nf-table-paginate introduces the ability to paginate through a nf-table results.
This pagination is also aware of the table 'filter' state (e.g. the table is being filtered by nf-table-search)
Number
Title
1
a
2
a
3
a
4
a
5
a
6
b
7
b
8
b
9
b
10
c
11
ab
12
cd
There is also a similar pagination component available nf-table-pagination-toggle that toggles between a full table and a truncated one, you can find out more about it here
Attributes
-
table
Sets what nf-table the pagination should be applied to. This attribute value should be set to the the ID of the relevant nf-table
default: fetches the first nf-table available in the page.
-
page
Sets what size of the pagination (i.e. how many rows to show per page)
default: 5
nf-table-pagination is automatically available when importing netflix.html. If you wish to
import nf-table-pagination without importing the whole Netflix library, you can do so. Here is a standalone example
nf-table-live-count
nf-table-live-count is a helper component that displays the current number of filtered rows on a table. This might be useful to display number of search results in the UI.
Total live count is:
First name
Last name
Completed
John
Tregoning
9%
Lisa
Tabs
13%
Alex
Treg
1%
Attributes
-
table
Sets what nf-table the live count should be applied to. This attribute value should be set to the the ID of the relevant nf-table
default: fetches the first nf-table available in the page.
Events
-
change
Fired when the live count changes
Event Details: e.detail.length contains the total number of rows available in the table
nf-table-live-count is automatically available when importing netflix.html. If you wish to
import nf-table-live-count without importing the whole Netflix library, you can do so. Here is a standalone example
nf-switch
nf-switch introduces the ability to easily and declaratively toggle content by clicking on it
See more...
See less...
Attributes
-
switched
Boolean attribute, indicating whether nf-switch should be on or off (presence indicates 'on'). This attribute is 'reflected' (kept up to date with the state) so it can be used to style nf-switch's content.
default: false
-
persist
Indicates whether the state of the switch should be persisted into local storage. Its value should be a unique string that will used as the localStorage key (e.g. persist="turbo-switch")
default: false
Events
-
switched
Fired when nf-switch is toggled
Event Details: e.detail.switched contains the current state of nf-switch
nf-switch is automatically available when importing netflix.html. If you wish to
import nf-switch without importing the whole Netflix library, you can do so. Here is a standalone example
nf-select
nf-select is a replacement for the native option (with multiple select enabled). It provides a fully searchable, keyboard friendly, upgraded option dropdown component
Use: In order to work around this bug, you will have to wrap your native select tag with a nf-select tag, as shown in the sample code.
If you need to adjust the dimentions of this component (like all other components) you can simply set with and height via CSS and nf-select will automatically adjust.
Note: If you are using Angular/Ember/Other you should bind to the native 'select' not the wrapper 'nf-select' value/selectedOptions/change-events/etc.
Finally if you would like a component like nf-select but at a lower level of abstraction nf-input might be what you are looking for. (all it does is set style and keyboard navigation for you)
Attributes
-
placeholder
Sets the placeholder text in the search input box.
default: no placeholder text
-
regex
Indicates whether the search query should be treated as a regex.
default: true
-
disabled
Boolean attribute, indicating whether nf-select is disabled or not. (when disabled the user will be unabled to interact with the component)
default: false
Events
Note: Please note that the underlying native select will also trigger native events such as change, etc. when elements are selected in nf-select
-
querychanged
Fired when the search/filter query is changed
nf-select is automatically available when importing netflix.html. If you wish to
import nf-select without importing the whole Netflix library, you can do so. Here is a standalone example
nf-icon
nf-icon provides a standard collection of SVG icons (styleable using CSS)
You can customize each icon simply by using CSS to set the width and height in order to change the icon size or by setting color.
Attributes
-
name
the name identifies the icon that should be displayed.
nf-icon is automatically available when importing netflix.html. If you wish to
import nf-icon without importing the whole Netflix library, you can do so. Here is a standalone example
nf-submenu
nf-submenu should normally be placed inside the header component.
reports
configuration
advanced settings
Attributes
-
selected
Sets the selected tab by index
default: 0 (first tab)
-
noslide
boolean property that if present will removes the bottom bar animation when switching tabs
default: by default the bottom bar will animate/slide
Events
-
submenuchanged
Fired when a the selected submenu changes
Event Details:
e.detail.selectedIndex: contains the index of the tab that triggered the event.e.detail.selectedItem: contains reference to the nf-tab element.
nf-submenu is automatically available when importing netflix.html. If you wish to
import nf-submenu without importing the whole Netflix library, you can do so. Here is a standalone example
nf-submenu-pages
nf-submenu-pages is a component designed to be use in conjunction with nf-submenu. In essence nf-submenu-pages
is used to selectively/programmatically show one of its children/pages at a time.
Note: In order for the page sliding animation to work you will need to set the height (via CSS) on the relevant nf-submenu-page tag, otherwise it will still work but without the transition animation.
Attributes
-
submenu
Sets which nf-submenu should linked with. This attribute value should be set the the ID of the relevant nf-submenu
default: fetches the first nf-submenu available in the page.
nf-submenu-pages is automatically available when importing netflix.html. If you wish to
import nf-submenu-pages without importing the whole Netflix library, you can do so. Here is a standalone example
nf-accordion
nf-accordion is a component to easily fulfill a common pattern found in websites where content is alternatively show/hidden by clicking on a toggle.
The component is divided into two sections: the first section is always displayed regardless of whether the component is opened or closed.
You can set this section either by using a header tag (or any tag with the .nf-accordion-header classname).
In this first section you will also need to set the toggler by using the .nf-toggler classname (please note that the whole first section could be the toggler or an element within it).
The second section is anything that's not in the first section, this content will either be shown or not depending on the state of the component.
Here is an example of using nf-accordion together with the nf-switch component. Also check the standalone demo source code for more examples.
see more...
see less...
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
Attributes
-
closed
Boolean attribute, indicating whether nf-accordion should be opened or closed (the attribute presence indicates 'closed').
default: false (opened)
-
persist
Indicates whether the state of the accordion should be persisted into local storage. Its value should be a unique string that will used as the localStorage key (e.g. persist="admin-options")
default: false
nf-accordion is automatically available when importing netflix.html. If you wish to
import nf-accordion without importing the whole Netflix library, you can do so. Here is a standalone example
nf-tags
nf-tags introduces the ability to easily add/remove tag/tokens via this simple tag editing component.
Note: As all components you can set its width/height via CSS and the component will adjust itself. below an example nf-tags with its width set to 400px.
Attributes
-
tags
Array indicating which tags should be pre-polulated.
default: []
-
placeholder
Sets the placeholder text in the tag input box.
default: no placeholder text
Methods
-
setTags
This method allows you to programmatically set the tags in nf-tags.
Parameters:
- tagsArray: array with the tags to be set.
-
addTag
This method allows you to programmatically set the tags.
Parameters:
- tag: the tag to be added.
-
removeTag
This method allows you to programmatically removea a tag.
Parameters:
- tag: the tag to be removed.
nf-tags is automatically available when importing netflix.html. If you wish to
import nf-tags without importing the whole Netflix library, you can do so. Here is a standalone example
nf-lightbox
nf-lightbox introduces the ability to easily and declaratively use a lightbox in your web application.
nf-lightbox automatically includes a close (x) button on the top right, also pressing the 'esc' key will close the lightbox. You can also set any element to close the lightbox simply by giving it the .nf-lightbox-close classname.
Hello There
Attributes
-
state
This attribute is 'reflected' (kept up to date with the state of the component). if state anything other than 'hidden' the lightbox will be displayed.
default: 'hidden'
-
width
Sets the width of the lightbox.
default: it defaults to the width of the content
Methods
-
hideLightbox
This method allows you to set the state of the lightbox to 'hidden'
-
showLightbox
This method allows you to set the state of the lightbox to 'visible'
nf-lightbox is automatically available when importing netflix.html. If you wish to
import nf-lightbox without importing the whole Netflix library, you can do so. Here is a standalone example
nf-date-picker
nf-date-picker introduces the ability to easily and declaratively create a date/time selector.
Attributes
-
input
This should be the 'id' of the 'proxy input'.
this proxy input will be populated with the selected value (so submitting a native form will work as expected) also nf-date-picker will automatically trigger the required events on this 'proxy input' ('change/keydown/input/etc') so binding to the proxy input from Angular 1x/Ember should work out of the box.
default: none
-
format
String that sets how the date is visually represented
default: 'MM/DD/YY h:mm A'
-
placeholder
Sets the placeholder text in the date input box.
default: no placeholder text
-
value
Sets the initial value of the nf-date-picker component
default: null
-
epoch
Changes the output value return the numeric value of the selected date as the number of milliseconds since January 1, 1970.
default: string following the ISO 8601 Extended Format.
Events
-
change
Fired when a date is set
Event Details: e.detail.date contains the newly set Date.
nf-date-picker is automatically available when importing netflix.html. If you wish to
import nf-date-picker without importing the whole Netflix library, you can do so. Here is a standalone example
nf-autosuggest
nf-autosuggest introduces the ability to easily and declaratively create an autosuggest component
Attributes
-
input
This should be the 'id' of the 'proxy input'.
this proxy input will be populated with the autosuggest value (so submitting a native form will work as expected) also nf-autosuggest will automatically trigger the required events on this 'proxy input' ('change/keydown/input/etc') so binding to the proxy input from Angular 1x/Ember should work out of the box.
default: none
-
placeholder
Sets the placeholder text in the autosuggest input box.
default: no placeholder text
-
disabled
Boolean attribute that disables the autosuggest component.
default: false
-
suggestions
Array of possible suggestions
default: []
-
maxSize
Number of items to display in the drop down
default: 8
Events
-
querychanged
Fired when the search/filter query is changed
nf-autosuggest is automatically available when importing netflix.html. If you wish to
import nf-autosuggest without importing the whole Netflix library, you can do so. Here is a standalone example
nf-json
The nf-json enables you to easily deal with JSON. This component has two different modes:
Inline
Simply inline JSON inside the nf-json tags, and the component will render said JSON as 'pretty' JSON (with search, minimize and color highlighting features)
REST
By setting a REST endpoint as a url attribute this components becomes a very powerful JSON editor that can persist changes to the endpoint if desired.
Example of editable REST endpoint
Note: Feel free to make changes and persist them by clicking on the cloud-arrow icon (in this example the REST endpoint is couchdb), just please don't trash the demo so other people can use it
Example inline pretty JSON
{
"a": "hello there",
"b": [1,2,3,4,5],
"c": {
"z": "abcdefg",
"y": 789.23
},
"d": "last one"
}
Attributes
-
url
Endpoint of a REST interface that returns valid JSON via HTTP 'GET'
default: none
-
updatable
boolean attribute that indicates to the component that the REST endpoint accepts updates via HTTP 'PUT' posts.
default: false
nf-json is not automatically available when importing netflix.html. Here is a standalone example
PRE-ALPHA