View on Github Downloads Page

What is nebular.css?

Nebular(previously known as breezy.css) is a css framework, created for the purpose of creating good looking websites, without carrying extra weight. The nebular form module, for example, is less then 2kb. Nebular is made in a modular system, so you can add what parts you need for your project, without requiring excess files. Nebular was made by Jacob Gray, as a personal project.

Nebular doesn't come with any fonts, but all the elements will inherit the font of their parent. We reccomend using the Lato, Roboto, Open sans, or similar fonts. This page uses lato, which can be easily added from Google Fonts.

How do you use nebular?

Nebular is currently built in 5 modules, listed on the left. You can add the entire library, or just add the modules you want for your project.

To style an element with nebular, you simply add the class you want to it. For example, if we want to add a button, we write our html like so:

<button class="-btn">Button</button>

That will render this:

To customize the button, we will use classes that we refer on this page to as "flags". A flag is a css class that is relative to the specific element. In our example, we will be using the buttons .-cb(Color Blue) flag to change the theme of the button. Our buttons HTML now looks like:

<button class="-btn -cb">Button</button>

And renders a nice blue button:

As you can see, nebular is quite simple to use. Don't be afraid to edit the source to fit your needs, nebular is most powerful when you customize it to work best for you. If you want to see how an element on this page gets it's style, simply use the browsers inspector.

Grid Module

The default grid system is a 12 column/row grid. There is also a 24 column/row grid file available, if further grid precision is needed. If you want different grid sizes, there is a SCSS mixin on the download page that makes generating new grids super easy. Simply download it, follow the instructions at the top of it, and compile. This allows you to make grids of any size.

Flags Flag use
-v Changes the grid direction to verticle. Default is horizontal.
-g Shorthand for telling a row or column to act like a grid, use if you want to have a grid inside a grid(See below example)
-gu Adds a 5px gutter to the grid.
-row Use to create a row. Note that rows parents must have the -v flag.
-col Use to create a column. Note that columns parents must not have the -v flag.
-c{int} Sets the columns width. {int} would be the number of column spaces you want the column to take up.
-r{int} Sets the rows height. {int} would be the number of row spaces you want the row to take up.
-g{int} Size of grid. The default is 12.

This demo grid helps you understand how the grid system works. Hover over it to see the different parts. Use the above table to understand the different meanings of the flags, and your browsers inspector to view the HTML structure:

-grid -g12 / -col -c4 -v -g / -row -r6
-grid -g12 / -col -c4 -v -g / -row -r3
-grid -g12 / -col -c4 -v -g / -row -r3
-grid -g12 / -col -c6
-grid -g12 / -col -c2

You can have different sized grids inside of each other. For example, here is a custom size 4 grid, inside of the default size 12(Note that before you can use a custom grid, you first must generate it and add the css file to the document):

-col -c6 -v -g -g4 so I am a column that takes up 6 out of twelve spaces. I also create a verticle(-v) grid(-g) that uses a custom 4 space grid(-g4). This is a row in that grid, which takes up 2 out of the 4 vertical spaces.
And both of these take up
1 out of 4 spaces.
-col -c4 so I am a column that takes up 4 out of 12 spaces
-col -c2 so I am a column that takes up 2 out of 12 spaces

As you probably noticed, that grid has gutters, using the .-gu flag.

Form Module

The form module contains all the styling for form elements, such as buttons, inputs and textareas. There is also a Form Widget Module, which we will talk about in a minute.

Text Inputs

Attribute Attribute use
disabled Disables select, allowing no user input.

The class to add a input is .-input.

To disable an input, simply add a disabled attribute to the input.

Textareas

Attribute Attribute use
disabled Disables textarea, allowing no user input.
Flags Flag use
-h Allows only horizontal resizing of textarea by user.
-v Allows only vertical resizing of textarea by user.
-n Allows no resizing of textarea by user.

To style a textarea, simply add the class .-textarea.

Buttons

Attribute Attribute use
disabled Disables button, allowing no user click.
Flags Flag use
-cw Sets the color to the themes white color
-cb Sets the color to the themes blue color
-cg Sets the color to the themes green color
-cr Sets the color to the themes red color
-u Adds 3D effect to button.

The class to add a button is .-btn.

Buttons can be disabled with the disabled attribute:

Creating your own button color is as easy as setting the background-color:

background-color:#5f16b4;
color:white;

You can play with the below CSS to style the demo-btn:

Selects

Attribute Attribute use
disabled Disables select, allowing no user input.

Selects use the class .-select.

Form Widgets Module

The form widget module is unique in that it is the only module that requires extra HTML markup. This requirement allows us to create more unique form elements, such as custom radio buttons, and inputs with icons.

Radio Buttons

Attribute Attribute use
disabled Disables radio button, allowing no user selection.

Radio buttons use a custom html structure using a label:

<label class="-radio">
<span class="-title">Optional Title</span>
<input type="radio">
<span class="-b"></span>
</label>

Use the class .-radio on the label. The .-b span must be below the input.

The title span is optional, and can be left out if no title is wanted.

You disable a radio button by setting the disabled attribute on the input.

Checkboxes

Attribute Attribute use
disabled Disables checkbox, allowing no user selection.

Checkboxes use a custom html structure that is basically the same as the radio button:

<label class="-checkbox">
<span class="-title">Optional Title</span>
<input type="checkbox">
<span class="-b"></span>
</label>

Use the class .-checkbox on the label. The .-b span must be below the input.

Switches

Attribute Attribute use
disabled Disables switch, allowing no user selection.
data-on Sets custom text for the on position
data-off Sets custom text for the off position

A toggle switch has a bit different of a HTML structure:

<label class="-switch">
<span class="-title">Optional Title</span>
<input type="checkbox">
<span class="-b" data-on="On" data-off="Off" ></span>
</label>

Use the class .-switch on the label. The .-b span must be below the input.

The radio, checkbox, and switch classes can be used interchangably, so you can simply replace the checkbox in the html with a radio button, if you wish for a radio button like switch:

Icon Inputs

Attribute Attribute use
disabled Disables select, allowing no user selection.

Icon inputs are the same as normal inputs, except they are made to have an icon to the left of them:

<label class="-iconinput">
<span class="-icon">@</span>
<input type="email">
</label>

Use the class .-iconinput on the label. The .-icon span should be above the input.

You can, of course, use an icon font here, text, or just an image. Remember, nebular is most powerful when you edit it to add your own changes. It is made to be a platform that you can build off of, not free-standing(although it can be).

Data Display Module

The data display module contains all the elements used to display data, such as tables, lists, codeviews, and highlights.

Tables

Attribute Attribute use
tabindex="number" Allows the row it is added to to be focusable.
Flags Flag use
-s Adds the select styles. If you want the row to be focusable, add a tabindex.

You have already seen the table module in action, it is what is used for all the tables on this page.

To use the table module, we first start with a default table:

<table class="-table">
<thead>
<td>TableHeading</td>
<td>tableHeading2</td>
</thead>
<tr>
<td>Table Content</td>
<td>Table Content2.</td>
</tr>
</table>

That will render this:

TableHeading tableHeading2
Table Content Table Content2.

Extremely simplistic, but add in more data and table headings and it gets quite complex:

Employees of the month Job
Tom F. Plumber
Chris D. Artist
Sarah K. Designer
Products Sales
Binary Monkey $30.84
Flying Car $493243.43

Table rows are selectable, with the -s flag:

Candy Amount
Jellies 45 cubic m
Chocolate 493.2 kg
Smarties A whole lot.

Lists

Attribute Attribute use
tabindex="number" Allows the list item it is added to to be focusable.
Flags Flag use
-s Adds the select styles. If you want the item to be focusable, add a tabindex.
-n Converts the list into a numbered list.

Lists are styled with the .-list class. Lists are used to render a visual cascade of informtation:

If you want a numbered list, add the -n flag:

As you can see above, lists can be embedded inside one another. Note that if the parent list has the -list class, none of the child lists need a class.

Lists are also selectable:

Codeblocks

Flags Flag use
-r Changes the code color to the red theme.
-g Changes the code color to the green theme.
-b Changes the code color to the blue theme.
-i Displays the code inline instead of block

Codeblocks are styled with the .-codeblock class. Codeblocks are used to display any text that you want to keep the white-spaces in, mainly used for displaying formatted code

.element{
background-color:orange;
font-family:Lato;
}

Codeblocks have three default themes, that can be used with their flags.

Highlights

Flags Flag use
-b Changes the highlight color to the blue theme.
-y Changes the highlight color to the yellow theme.

Highlights are extremely simple. They are created with the .-highlight class, and are used to highlight key points in a document.

Paragraphs

Flags Flag use
-t Adds an automatic indent to the first line of the paragraph

Simple paragraph created with the .-para class, and are used to display text.

Headings

Flags Flag use
-l Removes the default bold of the heading
-h1 Largest heading
-h2 Secondary heading
-h3 Third smallest heading
-h4 Smallest heading

Headings are created with the .-heading class, and are used to display headings.

Links

Attributes Attribute use
disabled Disables link

Just a basic link, styled with the .-link class. Adds a disabled option.

Blockquotes

Attributes Attribute use
data-title Display title for blockquote.

A simple element to display quotes, styled with the .-quote class.

Lions and tigers and bears; Oh My!

Tooltips Module

The tooltips module is used to display custom tooltips.

Attribute Attribute use
data-tooltip Sets the text for the tooltip
Flags Flag use
-t Displays the tooltip to the top of the element
-l Displays the tooltip to the left of the element
-r Displays the tooltip to the right of the element
-b Displays the tooltip to the bottom of the element
-ar Aligns tooltip to the right
-al Aligns tooltip to the left
-tl Displays a light themed tooltip instead of the default dark one.
-d The tooltip is always displayed

No class is needed for a tooltip. Simply add the data-tooltip attribute. An empty tooltip will display if no value is set. The tooltip has a dark theme and is aligned in the center by default. You must choose a position with one of the position flags, or the tooltip will not display.

The tooltip module has many customizations, and can be added to any element, as long as the :before and :after pseudo elements can be used.

People DIT
Peter Yobacha 0-9

Tooltips can be permanently displayed with the -d flag:

You can position a tooltip on any side of the element with one of the position flags(don't mix position flags, bad things will happen):

The align flags are used to customize where the tooltip is displayed on the x-axis:

And lastly, change the tooltip to a light theme with the -tl flag:

And that is all their currently is. If you have a bug, please report it on the github issues page. Have an idea you think will add some value, or want to add more theme options? Go ahead! Fork this repository, or commit your theme/feature to the dev branch of this project on github.

View on Github Downloads Page