Skip to content
This repository has been archived by the owner on May 6, 2020. It is now read-only.
/ shimmy-grid Public archive

Succinct Sass/Compass CSS structuring grid that is all brains and no fluff.

Notifications You must be signed in to change notification settings

jshimkoski/shimmy-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

98 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

shimmy-grid

Succinct Sass/Compass CSS structuring grid that is all brains and no fluff.

##Features

  • Built-in optional CSS reset
  • Highly customizable and lightweight
    • Change settings in _base.scss
  • Easy master grid width adjustment
    • Default: 960px
    • Can be: any unit (pixels, em, percent, etc.)
  • Easily adjust total column count
    • Default: 6
    • Can be: 0 - 12
  • Great multi-language support
    • Easy grid float direction adjustment
      • Default: left
      • Can be: left or right
    • Easy grid text direction adjustment
      • Default: ltr
      • Can be: ltr or rtl
  • Infinite grid and row nesting
  • Default grid class
    • .g
  • Default row class
    • .r
  • Available column classes
    • .one-whole
    • .one-half
    • .one-third, .two-thirds
    • .one-fourth, .two-fourths, .three-fourths
    • .one-fifth, .two-fifths, .three-fifths, .four-fifths
    • .one-sixth, .two-sixths, .three-sixths, .four-sixths, .five-sixths
    • .one-seventh, .two-sevenths, .three-sevenths, .four-sevenths, .five-sevenths, .six-sevenths
    • .one-eighth, .two-eighths, .three-eighths, .four-eighths, .five-eighths, .six-eighths, .seven-eighths
    • .one-ninth, .two-ninths, .three-ninths, .four-ninths, .five-ninths, .six-ninths, .seven-ninths, .eight-ninths
    • .one-tenth, .two-tenths, .three-tenths, .four-tenths, .five-tenths, .six-tenths, .seven-tenths, .eight-tenths, .nine-tenths
    • .one-eleventh, .two-elevenths, .three-elevenths, .four-elevenths, .five-elevenths, .six-elevenths, .seven-elevenths, .eight-elevenths, .nine-elevenths, .ten-elevenths
    • .one-twelfth, .two-twelfths, .three-twelfths, .four-twelfths, .five-twelfths, .six-twelfths, .seven-twelfths, .eight-twelfths, .nine-twelfths, .ten-twelfths, .eleven-twelfths
  • Push/pull any column
    • Easily adjust total push/pull column count
      • Default: 6
      • Can be: 0 - 12
    • Columns of nested rows can be pushed/pulled as well!
    • Just prepend push- or pull- to a column class
      • <div class="one-third push-one-sixth"></div>
  • Optional outside padding and gutters at grid level
    • Add a .pad class for outside padding
      • <div class="g pad"></div>
    • Add a .gutter class to use gutters
      • <div class="g gutter"></div>
    • Use .pad and .gutter together
      • <div class="g pad gutter"></div>
    • Pad or gutter the grid vertically
      • <div class="g pad-v gutter-v"></div>
    • Pad or gutter the grid horizontally
      • <div class="g pad-h gutter-h"></div>
  • Responsive features at grid, row, or column level
    • Grid & row level
      • Just add a .respond class
        • <div class="g respond"></div>
      • Works with nested rows!
      • Works with outside padding and gutters!
        • <div class="g respond pad gutter"></div>
      • Easily defined for any size (tablet and mobile are the default)
        • Default: when the browser is < 768px all columns in a .respond grid/row will resize to 50% width
        • Default: when the browser is < 480px all columns in a .respond grid/row will resize to 100% width
    • Column level
      • Just prepend a column class with tablet- or phone- to target those devices
        • <div class="one-fourth tablet-one-third phone-one-whole"></div>
      • Column level responsive classes override the .respond class at the grid and/or row level.
      • Hide or position columns offscreen using .tablet-hidden, .tablet-offscreen, .phone-hidden, .phone-offscreen
      • Easily define device orientation, for example: .tablet-portrait-one-third, .phone-landscape-two-fifths
  • Very easy to use markup
  • Cross browser support: IE 6+, Chrome, Firefox, Safari, Opera
    • Responsive features not compatible with IE 8 and below
      • See FAQs

##Examples

  • Basic:
<div class="g">
	<div class="r">
		<div class="one-whole"></div>
	</div>
	<div class="r">
		<div class="one-third"></div>
		<div class="two-thirds"></div>
	</div>
</div>
  • Basic responsive grid:
<div class="g respond">
	<div class="r">
		<div class="one-whole"></div>
	</div>
	<div class="r">
		<div class="one-third"></div>
		<div class="two-thirds"></div>
	</div>
</div>
  • Basic grid with gutters and responsive columns:
<div class="g gutter">
	<div class="r">
		<div class="one-whole"></div>
	</div>
	<div class="r">
		<div class="one-third tablet-one-half phone-one-whole"></div>
		<div class="two-thirds tablet-one-half phone-one-whole"></div>
	</div>
</div>
  • Outside padding and push/pull:
<div class="g pad">
	<div class="r">
		<div class="one-fourth"></div>
		<div class="two-fourths pull-one-sixth"></div>
        <div class="one-fourth push-two-thirds"></div>
	</div>
</div>
  • Nesting, push/pull, responsive rows, outside padding, and gutters:
<div class="g pad gutter">
	<div class="r">
		<div class="one-third pull-two-fifths"></div>
		<div class="two-thirds">
			<div class="r">
				<div class="one-fourth"></div>
				<div class="three-fourths pull-one-sixth">
					<div class="r respond">
						<div class="one-third"></div>
						<div class="one-third push-one-half"></div>
						<div class="one-third"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="r respond">
		<div class="one-half"></div>
		<div class="one-half"></div>
	</div>
</div>

##FAQs

Q: Where can I find the global settings?

A: The global settings are found in the _base.scss file.

Q: Why aren't the responsive features supported on IE 8 and below?

A: Because IE sucks. Those versions of IE aren't found on mobile devices so I wouldn't worry about it.

##Notes

  1. Push/pull functionality is disabled while in a responsive state.

##Additional Info

If you find any bugs or have questions/concerns please let me know.

Thank you for gitting out the word on shimmy-grid! (See what I did there).

About

Succinct Sass/Compass CSS structuring grid that is all brains and no fluff.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published