Search
Find
Layout overview
Introduction to layout components of siimple
Box
A simple layout component to highlight something
Content
A responsive component to center content horizontally
Footer
A basic component for displaying content in the bottom of your page
Jumbotron
A lightweight component for showcasing content
Navbar
A horizontally navigation component
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
480pxsiimple-{component}--extra-smallSmall
600pxsiimple-{component}--smallMedium
768pxsiimple-{component}--mediumLarge
960pxsiimple-{component}--largeExtra Large
1280pxsiimple-{component}--extra-largeFluid
100% - 20pxsiimple-{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.