Nootstrap

Sass front-end web framework

Free, open-source and minimal Framework

Installation

Nootstrap is available on the NPM package manager. It can be installed with the following command:

npm install nootstrap-ui

Include in your project

Sass

@import nootstrap-ui

Javascript or Typescript

import Nootstrap from "nootstrap-ui";
window.addEventListener('load', () => {
const nootstrap = new Nootstrap();
}, false);

Containers

Containers are layout elements used to limit the width of the page to respect the portrait format of a sheet of paper. Horizontal paddings allow the content of the containers to not touch the borders.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="container">Container</div>

Fluid containers are similar to containers, except that they don't have margins limiting the width of the page.

<div class="container-fluid">Container Fluid</div>

Columns

Columns are used to create responsive sites. They have a variable width depending on the screen size.
They should always be placed in a row, and the row in a container (or container-fluid).

Columns without properties will adjust their sizes to evenly distribute the row space.
In this demonstration, you can see how the columns are assembled by hovering over them with the mouse:

Column 1

Column 2

<div class="container">
	<div class="row">
		<div class="col">
			Column 1
		</div>
		<div class="col">
			Column 2
		</div>
	</div>
</div>

The row contains 12 slots for columns.
The 2 columns share the 12 slots, so each column occupies 6 slots.

It is possible to manually define the size of a column (between 1 and 12):

Column 1 (4/12)

Column 2 (5/12)

Column 3 (3/12)

<div class="container">
	<div class="row">
		<div class="col-4">
			Column 1
		</div>
		<div class="col-5">
			Column 2
		</div>
		<div class="col-3">
			Column 3
		</div>
	</div>
</div>

The columns may not have enough space to be displayed on small screens (smartphone, tablet). To remedy this, it is possible to define a breakpoint that will determine from which screen size the columns should be displayed one below the other.
There are 4 breakpoints: small (sm), medium (md), large (lg), extra-large (xl)

The following example will display its columns differently depending on the screen size (resize the window width to see changes):

Column 1 (medium 4/12)

Column 2 (small 5/12)

Column 3 (large 3/12)

<div class="container">
	<div class="row">
		<div class="col-md-4">
			Column 1
		</div>
		<div class="col-sm-5">
			Column 2
		</div>
		<div class="col-lg-3">
			Column 3
		</div>
	</div>
</div>

Grid

Grids are similar to columns, they allow to position and size elements.
With grids it is not only possible to position elements horizontally, but also vertically (on an invisible grid).
The following tiles will be displayed at a different position and size depending on the size of the screen.
In this demonstration, a grid has been drawn to facilitate the visualization of the coordinates of the tiles.

Tile 1

Tile 2

<div class="container">
	<div class="grid-6">
		<div class="tilex-xl-1 tilex-lg-2 tilex-md-3 tilex-sm-4 tilex-xs-5 tiley-2 tilew-2 tileh-4">
			Tile 1
		</div>
		<div class="tiley-xl-2 tilex-lg-5 tilew-lg-1 tileh-lg-2 tilex-md-2 tilew-md-4 tileh-md-1 tiley-sm-4 tilex-xs-2 tiley-2 tilew-1 tileh-2">
			Tile 2
		</div>
	</div>
</div>

Parallax

Parallaxes superimpose two elements, the one in the background of which will scroll 2 times slower than the one in the foreground (depending on the scroll of the page).
This creates a parallax effect with elements scrolling at different speeds.

.container > .parallax

<div class="container">
	<div class="parallax">
		<div class="parallax-background"></div>
		<div class="parallax-content">
			Content
		</div>
	</div>
</div>

.container-fluid > .parallax

<div class="container-fluid">
	<div class="parallax">
		<div class="parallax-background"></div>
		<div class="parallax-content">
			Content
		</div>
	</div>
</div>

Ratio

4/3

<div class="ratio4-3">Content</div>

16/9

<div class="ratio16-9">Content</div>

Tilt

Tilt right 1

Tilt right 2

Tilt right 3

Tilt right 4

Tilt right 5

Tilt left 1

Tilt left 2

Tilt left 3

Tilt left 4

Tilt left 5

<div class="tilt-right-3">
	<h1>Title</h1>
</div>

Highlight & Underline

Highlight link on hover
Highlighted link

Underline link on hover
Underlined link

<a href="#" class="highlight-blue">Highlight link on hover</a>
<a href="#" class="highlight-blue highlighted">Highlighted link</a>
<a href="#" class="underline-blue">Underline link on hover</a>
<a href="#" class="underline-blue underlined">Underlined link</a>

.highlight-blue
	+highlight-hover(blue)

.underline-blue
	+underline-hover(blue)

Debug

<div class="debug"></div>