– Styleguide

Colors

Typography

Fonts

This is Helvetica. Based on the Netflix style guide, Helvetica is the primary font for Dataflix. It is an easy readable and unobtrusive sans serif typeface suitable for screen reading.

Type Scale

Logo

Please don’t alter or distort the “Dataflix” logo except to change its sizing while preserving the original proportions. The logo should only be used on RED and DARKGREY and is always positioned in the upper left corner or in the top center.

Data Visualization

As the name indicates, Dataflix is all about visualizing data. Therefore, charts are essential. Below are some guidelines for styling various graphs to keep data visualizations uniformly and clear.

Pie Chart

If you're using a pie chart, always use a combination of our specified colors. For clearer visibility, you can use a dark border on bright backgrounds and the other way around.

Bar Chart

For visualizations with bar charts, the x and y axis always have to be labeled. Do not round up the corners! The bars themselves can either all be in one of our specified colors or mixed up to a maximum of 2. If you choose to mix colors, you have two options:

• Alternate between the 2
• First half in one color, second half in the other

Class Naming Convention – BEM

The BEM (Block, Element, Modifier) methodology is a popular naming convention for CSS and HTML classes. It consists of a block, which is a top-level abstraction of a component, one or more elements, which can be refered to as child items from the block, and modifiers. Modifiers can be used to manipulate blocks or elements or to style a specific item differently than the others.
The syntax is as follows:

                    
.block{};
.block--modifier{};
.block__element{};
.block__element--modifier{};
                    
                

Example

See the Pen bGNYJOQ by llenaa (@llenaa) on CodePen.

If you want to read more about BEM follow these links: BEM, Battling with BEM.

Units

Mesurements regarding typography, e.g font-size, letter-spacing or line-height, as well as margin, padding, width and height are declared in rem. Rem values are relative to the root html element. For example, if the font-size of the root element is 16px, then 1rem equals 16px and 1px equals 0,0625rem.
In case of precise specification you can use pixels (e.g border width).

Pre-Processor

SASS should be used for all projects following this styleguide. It is a stylesheet language that’s compiled to CSS and it allows you to use variables, nesting, functions and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. Sass can be downloaded here: Install SASS

Variables

Being able to use variables thanks to SASS helps in storing information that is reuseable throughout the stylesheet. The $ symbol is used to create a variable. Here's a basic example:

See the Pen wvBjyxX by dottolodaniela (@dottolodaniela) on CodePen.

Nesting

Nesting is a great way to organize CSS and make it more readable. Since "normal" CSS doesn't support nesting, SASS helps out with that. Here's a basic example for nesting:

See the Pen zYxPQGo by dottolodaniela (@dottolodaniela) on CodePen.

File Structure

The open-source bundler Webpack is used to compile all JavaScript modules as well as various front-end assets like HTML, CSS and images, if the corresponding loaders are included. Therefore, all components needed for this compilation are stored in the scr-folder. After processing the final files will be stored in the dist-folder.
More information about Webpack: Webpack

Paragraphs

The default body text is 16px. For optimum reading length, the paragraph width is capped at 640px.

Example

Links

Your can choose between different link styles but please keep consistency in using the chosen styling and don't switch between styles.

Example

See the Pen Links by llenaa (@llenaa) on CodePen.

Lists

If a list has a title, make sure it is centered. To define an unordered list use the html tag <ul>, for ordered lists use <ol>.

Examples

See the Pen Lists by llenaa (@llenaa) on CodePen.

Buttons

Basic Buttons

Basic buttons are used for functionalities like "Submit", "Send" or "Cancel". If a button is inactive, its opacity is set to 40% and the cursor it set to "default".

Example

See the Pen Buttons Basic by llenaa (@llenaa) on CodePen.

Additional Buttons

Buttons that indicate scrolling, a search function or additional information like instructions or claimers are included in the category "Additional Buttons". Their styling depends on their functionality. The inactive behaviour is the same as for basic buttons.

Example

See the Pen Button Special by llenaa (@llenaa) on CodePen.

Form Elements

Drop Down Selection

Make sure the drop down selection starts scrolling at 5 inputs. The color for the border should be the same as for the buttons you're using and the hover-state effect is always the inverted colors from the inactive state.

Example

See the Pen XWJZyMe by dottolodaniela (@dottolodaniela) on CodePen.

Search Input

Search inputs should always have the same color for the 2px border as the button color you're using. The icon on the right is just an example, there you can use whatever fits you're website.

Example

See the Pen ZEYozdG by dottolodaniela (@dottolodaniela) on CodePen.

Navigation

Example

If you're using a navbar without any links, the Dataflix logo always has to be in the center of the bar. The bar can either be RED or DARKGREY.

If you're using a navbar with links, the Dataflix logo has to be in the left corner of the bar , the links in the right. The bar can either be RED or DARKGREY.

Landing Page

This page layout is for the landing page. The global header always stick to the top. Important information is placed in the middle of the page, semi-important information underneath. Claimers, explanations and all kinds of additional information for the user is positioned in the bottom left corner.

Stats – Pie Chart

If you use a pie chart to display data, the chart is positioned in the middle of the page. More information to the chart is on its left and right side.
In case of comparing more than two data groups, the space can be split. So in case of three the two main boxes are split into half horizontally. The bottom right box stays empty. In case of four data groups all four boxes are filled with data.

Stats – Bar Chart

The third sample layout is for displaying data in a bar chart. The chart takes up most of the page. Options for toggling the view of the bar chart are placed right above the chart.