Sierra v 2.0.0

The smallest and lightest SCSS library

Download ZIP or Visit github

Lightweight
Lightweight
37 kB (8.9 kB gzipped).

Customizable
Customizable
Grid, fonts, colors, radius...

Open Source
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

Default

Compact

Badges

Sizes

  • small
  • default
  • large

Colors

  • default
  • primary
  • secondary
  • dark
  • success
  • warning
  • error

Rating small

1
2
3
4
5
6
7
8
9
10

Rating big

1
5
10

Image modifiers

Circle

Image 1
Image 2
Image 3

Rounded corners

Image 4
Image 5
Image 6

Aligners

Space between

Image 4
Image 5

Space around

Image 6
Image 5
Image 1
Image 2

Align start

Image 1

Align end

Image 3

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

Image 1

Loaders

Show loading bar Show loading spinner

Customizable colors

Brand ( primary / secondary )





Success / info / error / warning









Rating





















Others









Full width bars

We can be heroes

just for one day

Message bars

Success

Info

Warning

Error

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

/* 05/05/2016 */ - Fix Badge Color Warning (#34)
/* 02/05/2016 */ - Change entry file name from 'entry' to 'sierra'
/* 09/03/2016 */ - Remove margins on text-small
/* 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