Lightweight
37 kB (8.9 kB gzipped).
Customizable
Grid, fonts, colors, radius...
Open Source
To nerds, by nerds.
Estructure
src/
├── entry.scss /* Import main library scss file and configuration variables */
├── _sierra.scss /* Import library modules from scss folder */
├── _variables.scss /* Configure grid system, colors, font family, font size, borders... */
└── scss/
├── background-colors.scss
├── bootstrapgrid/ /* Bootstrap grid system */
│ ├── grid.scss
│ └── grid-frameworks.scss
├── bootstrapgrid.scss /* Bootstrap main grid file */
├── buttons.scss
├── flexboxgrid/ /* Flexboxgrid system */
│ └── grid.scss
├── flexboxgrid.scss /* Flexfox main grid file */
├── utils/
│ └── mixins.scss
├── vendor/
│ └── reset.scss
├── forms.scss
├── helpers.scss /* Utilities and modifiers */
├── layout.scss
├── loading-bar.scss
├── loading-spinner.scss
├── main.scss
├── message-bars.scss
├── placeholders.scss
├── rating-circle.scss
├── tables.scss
├── tabs.scss
├── tags.scss
└── typography.scss Text modifiers
Default
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Gray
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Primary color
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Success color
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Error color
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Align center
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Align right
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Uppercase
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Line through
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Italic
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Buttons
Button colors
Buttons with icon
Buttons group
Button sizes
Typography sizes
Text huge
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Text big
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Text medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Text small
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Forms
$error message
$error message
$error message
$error message
Radio buttons
Checkboxes
Form row
Form collapse
Tables
Standard
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Lemon | Orange | Kiwi |
| Sugar | Salt | Pepper |
| Fork | Knife | Spoon |
| Cup | Glass | Pitcher |
Responsive
| First column | Second column | Third column |
|---|---|---|
| Blue | One | My life fades |
| Green | Two | When the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. |
| Yellow | Three | A whirlwind of looting, a firestorm of fear. Men began to feed on men. A whirlwind of looting, a firestorm of fear. Men began to feed on men. |
Paginator
Badges
Sizes
- small
- default
- large
Colors
- default
- primary
- secondary
- dark
- success
- warning
- error
Rating small
Rating big
Image modifiers
Circle
Rounded corners
Aligners
Space between
Space around
Align start
Align end
Center vertical
Lorem ipsum dolor sit amet
Center vertical and horitzontal
Lorem ipsum dolor sit amet
Align to bottom
Lorem ipsum dolor sit amet
Low opacity
Loaders
Customizable colors
Brand ( primary / secondary )
Success / info / error / warning
Rating
Others
Full width bars
We can be heroes
just for one day
Message bars
Containers
Standard
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Medium
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Small
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Borders
Border top + border bottom
Border right + border left
Bordered
To be done in next releases
- Fix bootstrap library updates
- Include code snippets on demo website (low prio)
- BEM naming convention (V2)
Latest changes
/* 09/03/2016 */ - Add relative state to loading spinner
/* 29/01/2016 */ - Fix large icons on buttons
/* 26/01/2016 */ - Add "word-break" helper class
/* 21/01/2016 */ - Adjust light version variables
/* 12/01/2016 */ - Removed fixed font-size on button icons
/* 08/01/2016 */ - Add loading spinner color as a variable
/* 08/01/2016 */ - Variables file reorganitzation
/* 08/01/2016 */ - Replace grey by gray in all SCSS files (text-gray, background-gray...)
/* 29/12/2015 */ - Replace tags background color variable and add text color variable
/* 29/12/2015 */ - Replace buttons background and text color variable
/* 29/12/2015 */ - Replace colour by color in variables file
/* 29/12/2015 */ - Add Badges module
/* 23/12/2015 */ - Add paginator module
/* 22/12/2015 */ - Renaming container selectors
/* 21/12/2015 */ - Add left and right border helpers
/* 21/12/2015 */ - Add message bars
/* 17/12/2015 */ - Add npm install
/* 16/12/2015 */ - Fix buttons visualitzation on mobile for this demo website
/* 16/12/2015 */ - Add mobile-block helper class
/* 16/12/2015 */ - Remove other projects selectors from tables.scss file
/* 16/12/2015 */ - Remove other projects selectors from mixins.scss file
/* 16/12/2015 */ - Remove other projects selectors from buttons.scss file