Melody.css
A mini & pure responsive css framwork inspired by Twitter Bootstrap.
min+gzip: 1.46kb
Usage
npm install melody.css
And in your file:
import 'melody.css'
Docs
Just Like Bootstrap Grid System:
Extra small devices(<768px) | Small devices(≥768px) | Medium devices(≥992px) | Large devices(≥1366px) | |
---|---|---|---|---|
Container width | auto | 750px | 970px | 1280px |
Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# of columns | 12 | 12 | 12 | 12 |
you have two container: .container
& .container-fluid
(100% width) width clear: both
, but delete the margin-left: -15px
& margin-right: -15px
Example
1.Basic grid
Basic grid display
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
2. Responsive Grid
Using the different column types to display different gird in different screens.
<div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
3. Offset
Moving the columns to over x columns
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
4. Ordering
Easily change the order of our built-in grid columns with .col-md-push- and .col-md-pull- modifier classes.
5. Nesting
To nest your content with the default grid, add a new .row and set of .col-sm- columns within an existing .col-sm- column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
width the
ex-width
you can break the15px padding
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row ex-width"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
Build your own grid system
Variables
$columns = 12 // column nums $gutters = 15px // column gutters $xs = 768px // BreakPoint $sm = 768px $md = 992px $lg = 1366px $smw = 750px // Container width $mdw = 970px $lgw = 1280px
In src/Melody.styl
, modified them, and use npm run build
build your own Grid-system
of Melody.css
By the way, you may need to install stylus:
npm install stylus -g
Enjoy!
License
Copyright (c) 2017 Molunerfinn