Giter Club home page Giter Club logo

bootstrap-grid-only's Introduction

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.

bootstrap-grid-only's People

Contributors

zirafa avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.