Sierra SCSS Library

The smallest and lightest SCSS library

Get started or Download

Lightweight
37 kB (8.9 kB gzipped).

Customizable
Fonts, colors, sizes...

Open Source
To nerds, by nerds.

Quick install

1.- Get the files via NPM

npm install sierra-library --save-dev

2.- Import the library from your SCSS files

@import 'sierra-library/lib/index';

3.- Ready to compile!

Need help about that? take a look at our example page and its code.

Download

Download ready-to-use compiled CSS or minified CSS files, and include it in your HTML file:

Otherwise you can compile Sierra Library with your own tools by downloading our source SCSS files.

Theme customization

If you want to customize Sierra library's theme settings, including fonts, margins, paddings and/or colors, create your own custom-settings file and add it just before importing Sierra files:

@import 'custom-settings';
@import 'sierra-library/lib/index';

This custom-settings.scss file should contain all those SCSS variables you want to overwrite. Check all settings you can customize in the settings library file.

However, we recommend to duplicate all variables in order to make sure your styles are not being compromised in eventual library updates.

Having troubles? take a look at this theme customization examples:

View page or view code

View page or view code

Components

Badges

Colors

default
primary
secondary
dark
success
warning
error


  default
  primary
  secondary
  dark
  success
  warning
  error

Badges color settings

Sizes

small badge
default badge
big badge


  small badge
  default badge
  big badge

Badges settings

Buttons

Buttons settings

Button colors

Mobile full size

Button sizes

Forms

Input

Input

Forms settings

Inputs with icon

Input

Input

Input with error

Input

Error message

Input

  

Error message

Select

Select

Select with error

Select

Error message

Select

  

Error message

Textarea

Textarea

Textarea with error

Textarea

Error message

Textarea

  

Error message

Radio buttons

Radio button 1

Radio button 2

Radio button 3


  
  Radio button 1


  
  Radio button 2


  
  Radio button 3

Checkboxes

Checkbox 1

Checkbox 2

Checkbox 3


  
  Checkbox 1


  
  Checkbox 2


  
  Checkbox 3

Forms collapsed

Forms settings

Loaders

Loading bar

Loading bar settings

Loading spinner

Loading spinner settings

Notifications

Success message

Info message

Warning message

Error message

Success message
Info message
Warning message
Error message

Notifications settings

Pagination

Pagination settings

Tables

Standard

Header 1	Header 2	Header 3
Lemon	Orange	Kiwi
Sugar	Salt	Pepper
Fork	Knife	Spoon
Cup	Glass	Pitcher


  
    
      Header 1
      Header 2
      Header 3
    
  
  
    
      Lemon
      Orange
      Kiwi
    
    
      Sugar
      Salt
      Pepper
    
    
      Fork
      Knife
      Spoon
    
    
      Cup
      Glass
      Pitcher

Table settings

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.


  
    
      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.

Tabs

Tab 1 Tab 2 Tab 3


  Tab 1
  Tab 2
  Tab 3

Tabs settings

Utilities

Aligners

Space between

Space around

Content start

Content end

Center vertical

Center vertical and horizontal

Align to bottom

Borders

Top bottom

Left right

Bordered

Colors

Primary / secondary

Customize all colors overwriting color settings variables

Success / info / error / warning

Others

Containers

Standard

Medium

Small

Grid

Equal width columns

Equal width, responsive columns

3/12


  
    3/12
    3/12
    3/12
    3/12
  


Available responsive classes:

col-sm 
col-md 
col-lg 
col-xl

Variable width

4/12

2/12

4/12

2/12

Nesting

Col

Nested col

Col


   
    
      Col
      
         
          Nested col
          Nested col
        
      
    
    
      Col

Image modifiers

Circle

Rouded corners

Full width box

We can be heroes

just for one day


  
    We can be heroes
    just for one day

Opacity low

Spacing

Margins


  


Available margin classes:

m-xsmall  
m-small   
m-medium  
m-big     
m-huge    

mb-xsmall 
mb-small  
mb-medium 
mb-big    
mb-huge   

m-none

Paddings

Lorem ipsum


  Lorem ipsum


Available padding classes:

p-small   
p-medium  
p-big     
p-huge    

pb-small  
pb-medium 
pb-big    
pb-huge

Typography

Sizes

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Text with subtitle

Text medium

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Text medium
Lorem ipsum dolor sit amet

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repellendus nostrum molestiae, nisi commodi eveniet! Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repellendus nostrum molestiae, nisi commodi eveniet! Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.

Colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...

Text aligners

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Modifiers

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...

Sierra SCSS Library

The smallest and lightest SCSS library

Lightweight 37 kB (8.9 kB gzipped).

Customizable Fonts, colors, sizes...

Open Source To nerds, by nerds.

Quick install

1.- Get the files via NPM

2.- Import the library from your SCSS files

3.- Ready to compile!

Download

Theme customization

Components

Badges

Colors

Sizes

Buttons

Button colors

Mobile full size

Button sizes

Forms

Input

Inputs with icon

Input with error

Select

Select with error

Textarea

Textarea with error

Radio buttons

Checkboxes

Forms collapsed

Loaders

Loading bar

Loading spinner

Notifications

Pagination

Tables

Standard

Responsive

Tabs

Tags

Utilities

Aligners

Space between

Space around

Content start

Content end

Center vertical

Center vertical and horizontal

Align to bottom

Borders

Top bottom

Left right

Bordered

Colors

Primary / secondary

Success / info / error / warning

Others

Containers

Standard

Medium

Small

Grid

Equal width columns

Equal width, responsive columns

Variable width

Nesting

Image modifiers

Circle

Rouded corners

Full width box

We can be heroes

just for one day

We can be heroes

just for one day

Opacity low

Spacing

Margins

Paddings

Typography

Sizes

Lightweight
37 kB (8.9 kB gzipped).

Customizable
Fonts, colors, sizes...

Open Source
To nerds, by nerds.