siimple
v3.0.0
Getting started

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

Installation

There are 3 ways to get started with siimple in your project. We recommend that you import the framework using a package manager.

1. Install using a package manager

You can use npm or bower to download the latest version of siimple.

Install using npm:

$ npm install siimple --save

Install using bower:

$ bower install siimple

You can find the release CSS files in the ./dist/ folder.

2. Use a hosted version

You can use our hosted version in JsDelivr. Just copy and paste the following <link> element in your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.0.0/dist/siimple.min.css">

You can check all available hosted versions in the jsDelivr website.

3. Download manually from the repository

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.

Customize

You can customize siimple and build your own version by editing the SASS/SCSS files placed in the ./scss folder.

Build siimple

We use Gulp for compiling the SCSS files and generate the final CSS file. Be sure that you have installed NPM and Gulp in your computer. Then, you must install all the Gulp dependencies by running the following command:

$ npm install

You can compile the SCSS files running the gulp build task, and minimize the compiled code running the gulp minimize task. Compiled CSS files will be available in ./dist folder.

Importing SASS/SCSS
You can import siimple as a dependency using a package manager, and then import the SASS mixins in your project by adding the following line in your main scss file:
@import "siimple/scss/_all.scss";
Remember that you take a look about how to use the includePaths option to resolve the @import declarations.
Classes

siimple is organized in five blocks: typography, elements, layout, form and grid. Each class has the prefix siimple and is followed by one dash and the component name, ie siimple-[COMPONENT], and each attribute (like colors, disabled...) comes with double dash and followed by the attribute name, ie siimple-[COMPONENT]--[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>
Font

siimple uses Montserrat as the default font family, imported automatically from Google Fonts. If you want to use your own font, you can set that in your body tag. Here is an example:

body
{
  font-family: Verdana, Arial, 'sans-serif';
}

All the elements on your page will inherit this font-family and will overwrite the Montserrat font set by default by siimple.

Colors
siimple comes with 10 colors predefined:
Navy
Green
Teal
Blue
Purple
Pink
Red
Orange
Yellow
Grey
Browser support

siimple is supported by the latest versions of most mobile and desktop browsers.

Chrome
Opera
Firefox
Safari
Edge
Explorer
Mac
Supported
Supported
Supported
Supported
-
-
Linux
Supported
Supported
Supported
-
-
-
Windows
Supported
Supported
Supported
Supported
Supported
10+
Android
Supported
Supported
Supported
-
-
-
iOS
Supported
Supported
Supported
Supported
-
-
Typography
Found a mistake or want to help improve this documentation? Suggest changes on GitHub