Leer en EspaƱol
See Video Tutorials
What is?
Responsimple is a mobile first's grid system written 100% pure CSS code with awesome features
Features
-
A Simple Reset inspired by
-
Structure based on Containers & Items
-
2 Types of Containers:
-
Container with page's width,
use
.container-full
-
Container with 1200px's maximum width,
use
.container
-
A Mobile First Grid System with 12 Columns & 4 Media Queries Sizes:
-
Phones
< (30em or 480px)
use .ph1 to .ph12
-
Small Devices
< (48em or 768px)
use .sm1 to .sm12
-
Medium Devices
< (64em or 1024px)
use .md1 to .md12
-
Large Devices
> (64em or 1024px)
use .lg1 to .lg12
-
Layout's Multiple Techniques
- Floats
- Display inline-block
- Flexbox
-
Additional Features:
- Vertical & Horizontal Alignments
- Font Sizes
- Margins & Paddings
- Borders & Displays
Download or Install:
-
responsimple on GitHub
bower install responsimple
Basic Usage:
A Simple Reset
This is the heart of the Responsimple's reset
html {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
-ms-text-size-ajust: 100%;
-moz-text-size-ajust: 100%;
-webkit-text-size-ajust: 100%;
text-size-ajust: 100%;
background-color: #FFF;
color: #000;
}
body { overflow-x: hidden; }
*, *::after, *::before {
-ms-box-sizing: inherit;
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
margin: 0;
padding: 0;
}
The initial font size of Responsimple's headings
h1 {
font-size: 32px;
font-size: 2rem;
}
h2 {
font-size: 28px;
font-size: 1.75rem;
}
h3 {
font-size: 24px;
font-size: 1.5rem;
}
h4 {
font-size: 20px;
font-size: 1.25rem;
}
h5 {
font-size: 16px;
font-size: 1rem;
}
h6 {
font-size: 12px;
font-size: .75rem;
}
Containers & Items
Responsimple used containers and items to structure the grid. This is the CSS code of these elements
.container, .container-full {
display: block;
width: 100%;
margin: auto;
font-size: 0;
}
.container { max-width: 1200px; }
.item {
display: block;
width: 100%;
padding: 16px;
padding: 1rem;
font-size: 16px;
font-size: 1rem;
}
All HTML tags inline, paragraphs and list item inherit the container's font size
a, abbr, b, code, dfn, em, i, li, mark, p, pre, strong { font-size: inherit; }
2 Types of Containers
You can use container with page's width (.container-full
) or container with 1200px's maximum width (.container
)
Example Full Container
<section class="container-full">
<article class="item">1</article>
<article class="item">2</article>
<article class="item">3</article>
<article class="item">4</article>
</section>