Lightweight
37 kB (8.9 kB gzipped).
npm install sierra-library --save-dev@import 'sierra-library/lib/index';Need help about that? take a look at our example page and its code.
Download ready-to-use compiled CSS or minified CSS files, and include it in your HTML file:
<link rel="stylesheet" type="text/css" media="all" href="css/styles.min.css">Otherwise you can compile Sierra Library with your own tools by downloading our source SCSS files.
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:
<ul>
<li class="badge">default</li>
<li class="badge badge--primary">primary</li>
<li class="badge badge--secondary">secondary</li>
<li class="badge badge--dark">dark</li>
<li class="badge badge--success">success</li>
<li class="badge badge--warning">warning</li>
<li class="badge badge--error">error</li>
</ul><ul>
<li class="badge badge--small">small badge</li>
<li class="badge">default badge</li>
<li class="badge badge--big">big badge</li>
</ul><button class="button button--primary">Button</button><button class="button button--small button--primary">primary</button>
<button class="button button--small button--secondary">secondary</button>
<button class="button button--small button--green">green</button>
<button class="button button--small button--red">red</button>
<button class="button button--small button--outlined">outlined</button>
<button class="button button--small button--transparent">transparent</button><button class="button button--primary button--mobileFull">Button</button><button class="button button--big">Button big</button>
<button class="button">Button default</button>
<button class="button button--small">Button small</button><label class="label" for="test10">Input</label>
<div class="input input-fullWidth">
<input id="test10" placeholder="Input" type="text">
</div><label class="label" for="test10">Input</label>
<div class="input input-withIcon input-fullWidth">
<input id="test1" placeholder="Your name" type="text">
<svg class="input-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path d="M257,474.1c-62.5,0-125,0-187.5,0c-17.9,0-29.6-11.2-29.9-29c-0.2-12.7-0.3-25.3,0.2-38c0.6-15,7.9-26.5,20.9-33.6 c42.7-23.3,85.6-46.1,128.3-69.3c3.1-1.7,5-0.1,7.3,1.1c36.5,19.1,73.7,20.7,111.7,4.8c1.1-0.4,2.3-0.7,3.2-1.5 c7.9-6.7,15-4,23.2,0.5c38.3,21.1,76.9,41.8,115.5,62.4c16.7,8.9,24.9,22.3,24.6,41.2c-0.2,10.7,0,21.3,0,32 c-0.1,17.7-11.9,29.4-29.5,29.4C382.3,474.1,319.6,474.1,257,474.1z"></path><path d="M253.9,295.2c-35.2-1.2-64.4-18.6-85.9-49.5C132.8,195,137,123,177.3,76.8c43.8-50.1,116.4-49.8,159.8,0.6 c46.1,53.6,43.2,138.2-6.7,186.8C310,284.1,285.6,294.8,253.9,295.2z"></path></g></svg>
</div>Error message
<label class="label" for="test10">Input</label>
<div class="input input-fullWidth">
<input id="test10" placeholder="Input" type="text">
</div>
<p class="text-error text-small">Error message</p><label class="label" for="country-code">Select</label>
<div class="select select-fullWidth">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>Error message
<label class="label" for="country-code">Select</label>
<div class="select select-fullWidth has-error">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<p class="text-error text-small">Error message</p><label class="label" for="message">Textarea</label>
<div class="textarea textarea-fullWidth">
<textarea id="message"></textarea>
</div>Error message
<label class="label" for="message">Textarea</label>
<div class="textarea textarea-fullWidth has-error">
<textarea id="message"></textarea>
</div>
<p class="text-error text-small">Error message</p><div class="radio">
<input id="radio1" name="radio" value="" type="radio">
<label for="radio1">Radio button 1</label>
</div>
<div class="radio">
<input id="radio2" name="radio" value="" type="radio">
<label for="radio2">Radio button 2</label>
</div>
<div class="radio">
<input id="radio3" name="radio" value="" type="radio">
<label for="radio3">Radio button 3</label>
</div><div class="checkbox">
<input id="one" name="#" value="" type="checkbox">
<label for="one">Checkbox 1</label>
</div>
<div class="checkbox">
<input id="two" name="#" value="" type="checkbox">
<label for="two">Checkbox 2</label>
</div>
<div class="checkbox">
<input id="three" name="#" value="" type="checkbox">
<label for="three">Checkbox 3</label>
</div><div class="formCollapsed">
<div class="input formCollapsed-item formCollapsed-itemPrimary">
<input id="test8" placeholder="Search" type="text">
</div>
<button class="formCollapsed-item button button-primary">
Search
</button>
</div><div class="formCollapsed">
<div class="input formCollapsed-item formCollapsed-itemPrimary">
<input id="test7" placeholder="Search" type="text">
</div>
<div class="select formCollapsed-item">
<select name="country-code" id="country-code">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</div>
<button class="formCollapsed-item button button-primary">
Search
</button>
</div><div class="formCollapsed">
<div class="select formCollapsed-item formCollapsed-itemPrimary">
<select name="country-code" id="country-code">
<option>Vincent</option>
<option>Jules</option>
<option>Mia </option>
<option>Butch</option>
</select>
</div>
<div class="select formCollapsed-item formCollapsed-itemPrimary">
<select name="country-code" id="country-code">
<option>Mr. White</option>
<option>Mr. Orange</option>
<option>Mr. Pink</option>
<option>Mr. Blonde</option>
</select>
</div>
<div class="select formCollapsed-item formCollapsed-itemPrimary">
<select name="country-code" id="country-code">
<option>Shaw </option>
<option>Kelly</option>
<option>Doyle </option>
<option>Lt. William</option>
</select>
</div>
</div><!-- By default it's fixed at the top of the page -->
<div class="loadingBar"></div>
<!-- By default it's located at the center of the page -->
<div class="loadingSpinner">
<span class="loadingSpinner-inner"></span>
<span class="loadingSpinner-inner"></span>
<span class="loadingSpinner-inner"></span>
<span class="loadingSpinner-inner"></span>
</div>
Success message
Info message
Warning message
Error message
<div class="notification notification--success"><p>Success message</p></div>
<div class="notification notification--info"><p>Info message</p></div>
<div class="notification notification--warning"><p>Warning message</p></div>
<div class="notification notification--error"><p>Error message</p></div>
<ul class="paginator">
<li class="paginator-item">
<a href="#" class="paginator-itemLink">Prev</a>
</li>
<li class="paginator-item">
<a href="#" class="paginator-itemLink">1</a>
</li>
<li class="paginator-item">
<a href="#" class="paginator-itemLink is-active">2</a>
</li>
<li class="paginator-item">
<a href="#" class="paginator-itemLink">Next</a>
</li>
</ul>| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Lemon | Orange | Kiwi |
| Sugar | Salt | Pepper |
| Fork | Knife | Spoon |
| Cup | Glass | Pitcher |
<table class="table">
<thead>
<tr class="text-small text-left">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lemon</td>
<td>Orange</td>
<td>Kiwi</td>
</tr>
<tr>
<td>Sugar</td>
<td>Salt</td>
<td>Pepper</td>
</tr>
<tr>
<td>Fork</td>
<td>Knife</td>
<td>Spoon</td>
</tr>
<tr>
<td>Cup</td>
<td>Glass</td>
<td>Pitcher</td>
</tr>
</tbody>
</table>| 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. |
<table class="table table--responsive">
<thead>
<tr class="text-small">
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="First column">Blue</td>
<td data-th="Second column">One</td>
<td data-th="Third column">My life fades</td>
</tr>
<tr>
<td data-th="First column">Green</td>
<td data-th="Second column">Two</td>
<td data-th="Third column">When the world was powered by the black fuel... and the desert sprouted great cities of pipe and steel. </td>
</tr>
<tr>
<td data-th="First column">Yellow</td>
<td data-th="Second column">Three</td>
<td data-th="Third column">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. </td>
</tr>
</tbody>
</table><div class="tabs">
<a href="#" class="tabs-item">Tab 1</a>
<a href="#" class="tabs-item is-selected">Tab 2</a>
<a href="#" class="tabs-item">Tab 3</a>
</div>
<ul>
<li class="tag">
<a href="#">fantasy</a>
</li>
<li class="tag">
<a href="#">fiction</a>
</li>
<li class="tag">
<a href="#">contemporary</a>
</li>
<li class="tag">
<a href="#">horror</a>
</li>
</ul>
<div class="aligner aligner--spaceBetween">
<div><img src="img/img4.jpg" width="50"></div>
<div><img src="img/img2.jpg" width="50"></div>
</div>
<div class="aligner aligner--spaceAround">
<div><img src="img/img2.jpg" width="50"></div>
<div><img src="img/img1.jpg" width="50"></div>
</div>
<div class="aligner aligner--contentStart">
<div><img src="img/img6.jpg" width="50"></div>
</div><div class="aligner aligner--contentEnd">
<div><img src="img/img2.jpg" width="50"></div>
</div><div class="aligner aligner--centerVertical">
<div><img src="img/img3.jpg" width="50"></div>
</div>
<div class="aligner aligner--centerHoritzontal aligner--centerVertical">
<div><img src="img/img1.jpg" width="50"></div>
</div><div class="aligner">
<div class="aligner--itemBottom">
<img src="img/img4.jpg" alt="Image 4" width="50">
</div>
</div>
<div class="border-top border-bottom"><br></div><div class="border-left border-right"><br></div><div class="border"><br></div><div class="aligner aligner--spaceAround">
<div class="flex-grow bg-primary"><br><br></div>
<div class="flex-grow bg-secondary"><br><br></div>
</div>Customize all colors overwriting color settings variables
<div class="aligner aligner--spaceAround">
<div class="flex-grow bg-success"><br><br></div>
<div class="flex-grow bg-info"><br><br></div>
<div class="flex-grow bg-warning"><br><br></div>
<div class="flex-grow bg-error"><br><br></div>
</div><div class="aligner aligner--spaceAround">
<div class="flex-grow bg-white"><br><br></div>
<div class="flex-grow bg-gray-light"><br><br></div>
<div class="flex-grow bg-gray"><br><br></div>
<div class="flex-grow bg-dark"><br><br></div>
</div><div class="container"></div><div class="container-medium"></div><div class="container-small"></div><div class="container">
<div class="row">
<div class="col bg-gray-light"><br><br></div>
<div class="col bg-gray"><br><br></div>
<div class="col bg-gray-light"><br><br></div>
<div class="col bg-gray"><br><br></div>
</div>
</div><div class="container">
<div class="row">
<div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
<div class="col-sm bg-gray p-medium text-white">3/12</div>
<div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
<div class="col-sm bg-gray p-medium text-white">3/12</div>
</div>
</div>
Available responsive classes:
col-sm <!-- Equal width on small, medium, large and extra large devices -->
col-md <!-- Equal width on medium, large, and extra large devices -->
col-lg <!-- Equal width on large, and extra large devices -->
col-xl <!-- Equal width on extra large devices -->
<div class="container">
<div class="row">
<div class="col-sm-4 bg-gray-light p-medium text-gray">4/12</div>
<div class="col-sm-2 bg-gray p-medium text-white">2/12</div>
<div class="col-sm-4 bg-gray-light p-medium text-gray">4/12</div>
<div class="col-sm-2 bg-gray p-medium text-white">2/12</div>
</div>
</div>Col
Col
<div class="container">
<div class="row"> <!-- First level row -->
<div class="col bg-gray-light p-medium text-gray">
<p class="mb-small">Col</p>
<div class="container">
<div class="row"> <!-- Nested row -->
<div class="col bg-gray p-medium text-white">Nested col</div>
<div class="col bg-white p-medium ">Nested col</div>
</div>
</div>
</div>
<div class="col bg-gray p-medium text-white">
<p class="mb-small">Col</p>
</div>
</div>
</div><img class="rounded" src="img/img1.jpg" alt="#" width="100"><img class="rounded-corners" src="img/img6.jpg" alt="#" width="100"><div class="section bg-dark">
<div class="container text-center">
<h3 class="text-huge text-white text-withSubtitle">We can be heroes</h3>
<h4 class="text-big text-gray m-none">just for one day</h4>
</div>
</div><img class="opacity-low" src="#" width="#"><div class="bg-gray-light">
<img class="m-big" src="img/img3.jpg" alt="Image 1" width="75">
</div>
Available margin classes:
m-xsmall <!-- Margin extra small -->
m-small <!-- Margin small -->
m-medium <!-- Margin medium -->
m-big <!-- Margin big -->
m-huge <!-- Margin huge -->
mb-xsmall <!-- Margin bottom extra small -->
mb-small <!-- Margin bottom small -->
mb-medium <!-- Margin bottom medium -->
mb-big <!-- Margin bottom big -->
mb-huge <!-- Margin bottom huge -->
m-none <!-- Margin none -->
<div class="p-huge bg-gray-light">
<span>Lorem ipsum</span>
</div>
Available padding classes:
p-small <!-- Padding small -->
p-medium <!-- Padding medium -->
p-big <!-- Padding big -->
p-huge <!-- Padding huge -->
pb-small <!-- Padding bottom small -->
pb-medium <!-- Padding bottom medium -->
pb-big <!-- Padding bottom big -->
pb-huge <!-- Padding bottom huge -->
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
<p class="text-huge">Lorem ipsum dolor sit amet</p>
<p class="text-big">Lorem ipsum dolor sit amet</p>
<p class="text-medium">Lorem ipsum dolor sit amet</p>
<p class="text-small">Lorem ipsum dolor sit amet</p>Text medium
Lorem ipsum dolor sit amet, consectetur adipisicing elit
<p class="text-big text-withSubtitle">Text medium</p>
<p class="text-medium text-gray">Lorem ipsum dolor sit amet</p>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.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat repellendus nostrum molestiae, nisi <a href="#">commodi eveniet</a>! Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.</p>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, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.
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, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.
<p class="text-gray">Lorem ipsum dolor sit amet...</p>
<p class="text-primary">Lorem ipsum dolor sit amet...</p>
<p class="text-success">Lorem ipsum dolor sit amet...</p>
<p class="text-error">Lorem ipsum dolor sit amet...</p>Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
<p class="text-center">Lorem ipsum dolor sit amet</p>
<p class="text-right">Lorem ipsum dolor sit amet</p>
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, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.
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, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.
<p class="text-uppercase">Lorem ipsum dolor sit amet...</p>
<p class="text-lineThrough">Lorem ipsum dolor sit amet...</p>
<p class="text-italic">Lorem ipsum dolor sit amet...</p>
<p class="text-underline">Lorem ipsum dolor sit amet...</p>