siimple 3.1.1 Go to siimple.xyz
Layout overview | siimple
Layout
A collection of CSS classes for laying your project.
Layout overview
Introduction to layout components of siimple
Our layout module is an easy-to-use collection of components that lets you create the skeleton of your website/app. It provides fundamental features every framework should offer (a navbar, a tab system, etc.) to make easier and faster the first steps of your project: a little bit of previous experience with HTML and CSS is all you need to be capable of using this module effectively.
Before beginning, there's a detail we have to talk about: the layout sizes. There are several components here in siimple layout whose sizes can be customized depending on what you're looking for.
There are 6 different sizes:
Size
Pixels
Syntax
Extra Small
480px
siimple-{component}--extra-small
Small
600px
siimple-{component}--small
Medium
768px
siimple-{component}--medium
Large
960px
siimple-{component}--large
Extra Large
1280px
siimple-{component}--extra-large
Fluid
100% - 20px
siimple-{component}--fluid
Warning! In v3.1.0 we changed the size values of all the size modifiers and introduced two new sizes: siimple-{component}--extra-small and siimple-{component}--extra-large.
The different components where you can change the size are: content, footer, jumbotron and navbar.
Found a mistake or want to help improve this documentation?
Suggest changes on GitHub