Skip to content

Bootstrap's grid and responsive utility classes only, without any extras. Lightweight yet still powerful. Style to taste. Works with LessPHP.

License

Notifications You must be signed in to change notification settings

WenLiangTseng/bootstrap-grid-only

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bootstrap-Grid-Only (3.2.0)

Bootstrap's responsive grid and responsive utility classes only, without any extras. Lightweight yet still powerful. Style to taste.

Instructions

Include one of the precompiled grids (grid12.css, grid24.css, grid30.css, grid100.css) in your site, or customize and compile grid.css.less with command line lessc or LessPHP (no extends are used).

Included

  • Standard Bootstrap grid classes: columns, offsets, push and pull classes
  • Standard Bootstrap responsive utility classes: .visible-*, .hidden-*
  • Clearfix class, * {box-sizing:border-box} declaration, pull-right, pull-left.
  • Precompiled stylesheets for 12, 24, 30, and 100 columns. Gutter-width for each is respectively 30px, 15px, 10px, 2px. The 100 column grid yields results similar to Unsemantic and is good if you like semantic class naming (col-md-50 means exactly 50% width) or need extremely granular layout positioning (62 col + 38 col)
  • LESS file grid.css.less for building your own bootstrap grid, including variables for the grid ( @grid-columns, and @gutter-width) as well as breakpoint cutoff declarations (@screen-xs, @screen-sm, @screen-md, @screen-lg)

What's not included:

  • Pretty much everything else. It's really up to you. No styles, no javascript - not even a CSS reset.

Notes

You could also use Bootstrap's Customizer to compile only the grid + responsive utilities you need. Actually, I recommend trying that first (here's a config.json). However, for my needs, I wanted total control over class naming and reduced LESS file count, and needed to support LessPHP.

I needed LESS files in order to do server-side compilation with LessPHP on a Drupal site. LessPHP doesn't support extends, which this version doesn't have. This may also save you time in having to sift through the Bootstrap LESS source files, and allow you to understand and deconstruct how the grid is made. For instance, I had a project where I needed to change all the class names col-xs, col-md, col-sm, col-lg to match an existing convention: col-mobile, col-narrow, col-normal, col-wide.

About

Bootstrap's grid and responsive utility classes only, without any extras. Lightweight yet still powerful. Style to taste. Works with LessPHP.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 98.4%
  • HTML 1.6%