Repo Colors Docs Home
siimple
Documentation for version v2.0.0
Overview

siimple is a light, responsive and open source framework for design flat and clean websites. It has built in SASS/SCSS and provides a clean starting point for your web design.

Getting started

You must include the siimple CSS library in each HTML page of your project.

Hosted

Just add the following <link> element in your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/siimple/VERSION/siimple.min.css">

Replace VERSION with the latest version of siimple. You can check all available versions on the jsDelivr website.

Download from GitHub

You can visit the repository hosted on GitHub and download the latest version from the releases page. You can find the CSS files on the ./dist/ folder, so you can copy them to your project.

Install using NPM or Bower

siimple is also hosted on npm and bower, so you can use the npm's CLI to install the framework on your project running the following command:

npm install siimple --save

Or using the bower's CLI running the following command:

bower install siimple

You can find the CSS files on the ./dist/ folder, so you can copy them to your project.

Reference

On v2.x.x, each element of the siimple library comes with the word siimple and followed by one dash and the element name, ie siimple-[ELEMENT], and each attribute (like colors, disabled...) comes with double dash and followed by the attribute name, ie siimple-[ELEMENT]--[ATTRIBUTE].

For example, if you want to create a blue button, you must add siimple-btn and siimple-btn--blue class to your div element:

My button
<div class="siimple-btn siimple-btn--blue">My button</div>
Colors
navy  #57607c
green  #1add9f
teal  #18d2ba
blue  #4894f0
purple  #b490f5
pink  #f45b93
red  #ff1a4f
orange  #ff8463
yellow  #ffbf00
grey  #ebf2fa

Use the siimple-color--[COLOR] class to set the text color, or the siimple-bg--[COLOR] class to change the background color property.

Typography

siimple provides you text styles for links using the siimple-link class and small text using the siimple-small class. siimple uses Montserrat as the default font family, imported from Google Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
Paragraph

You can create a paragraph by adding the siimple-p or siimple-paragraph class to your div or p element.

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.

<p class="siimple-p">Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
Code elements

You can use the siimple-code class adding a piece of code inline, or the siimple-pre class to display code in blocks. All the code examples on this reference are displayed using a pre tag with the siimple-pre class.

Headings

Use siimple-heading[X] or siimple-h[X] for each heading style, where [X] is a number from 1 to 6.

Heading 1
<div class="siimple-h1">Heading 1</div>
Heading 2
<div class="siimple-h2">Heading 2</div>
Heading 3
<div class="siimple-h3">Heading 3</div>
Heading 4
<div class="siimple-h4">Heading 4</div>
Heading 5
<div class="siimple-h5">Heading 5</div>
Heading 6
<div class="siimple-h6">Heading 6</div>
Blockquotes

Use siimple-blockquote class to style your blockquotes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<blockquote class="siimple-blockquote">Lorem ipsum dolor sit amet, consectetur...</blockquote>
Buttons

If you want a button style, you must add the siimple-btn class. Then, you can select the button color by adding the siimple-btn--[COLOR], where COLOR is your desired color.

My button
My button
My button
My button
My button
My button
My button
My button
My button
My button
<div class="siimple-btn siimple-btn--navy">My button</div>
<div class="siimple-btn siimple-btn--green">My button</div>
<div class="siimple-btn siimple-btn--teal">My button</div>
<div class="siimple-btn siimple-btn--blue">My button</div>
<div class="siimple-btn siimple-btn--purple">My button</div>
<div class="siimple-btn siimple-btn--pink">My button</div>
<div class="siimple-btn siimple-btn--red">My button</div>
<div class="siimple-btn siimple-btn--orange">My button</div>
<div class="siimple-btn siimple-btn--yellow">My button</div>
<div class="siimple-btn siimple-btn--grey">My button</div>

Also, you can create a disabled button adding the siimple-btn--disabled class:

Disabled button
<div class="siimple-btn siimple-btn--disabled">Disabled button</div>
Alerts

Add siimple-alert to transform a div element to an alert. Also, you can specify the alert type by adding siimple-alert--[TYPE], there type can be info, done, warning or error.

Default alert message
Info alert message
Done alert message
Warning alert message
Error alert message
<div class="siimple-alert">Default alert message</div>
<div class="siimple-alert siimple-alert--info">Info alert message</div>
<div class="siimple-alert siimple-alert--done">Done alert message</div>
<div class="siimple-alert siimple-alert--warning">Warning alert message</div>
<div class="siimple-alert siimple-alert--error">Error alert message</div>
Form
Input

Add the siimple-input class to your text-based input fields (text, password and submit types) or select fields.

<label class="siimple-label">Type something: </label>
<input type="text" class="siimple-input" placeholder="Type here your text">
<select class="siimple-input">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>
Textarea

Add the siimple-textarea class to your textarea fields:

<textarea class="siimple-textarea"></textarea>
Checkbox

For adding a checkbox element to your project, first you must create a div with the class siimple-checkbox. Inside your new div element, create an input with the attribute type="checkbox", and a label bound to the previous input element.

<label class="siimple-label">Your checkbox:</label>
<div class="siimple-checkbox">
  <input type="checkbox" value="1" id="myCheckbox" name="">
  <label for="myCheckbox"></label>
</div>
Grid

siimple uses a responsive grid with 12 columns. You must start the grid adding siimple-grid. Then, for each row of your grid you must add siimple-grid-row, and for each column you must add siimple-grid-col and siimple-grid-col--[NUM], where [NUM] is a number from 1 to 12.

TWELVE
ONE
ELEVEN
TWO
TEN
THREE
NINE
FOUR
EIGHT
FIVE
SEVEN
SIX
SIX
<div class="siimple-grid">
  <div class="siimple-grid-row">
    <div class="siimple-grid-col siimple-grid-col--12">TWELVE</div>
  </div>
  <div class="siimple-grid-row">
    <div class="siimple-grid-col siimple-grid-col--1">ONE</div>
    <div class="siimple-grid-col siimple-grid-col--11">ELEVEN</div>
  </div>
  <div class="siimple-grid-row">
    <div class="siimple-grid-col siimple-grid-col--2">TWO</div>
    <div class="siimple-grid-col siimple-grid-col--10">TEN</div>
  </div>
</div>
Want to contribute?
If you found a bug, have any questions or want to contribute, please feel free to open an issue or send a pull request to our repository on GitHub. We appreciate each review or pull request for improving the siimple library.
Organization on GitHub Contribution guidelines