-
Notifications
You must be signed in to change notification settings - Fork 1
adambom/Boilergrid-for-Compass
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
repo = { name: "Boilergrid for Compass", author: { name: "Adam Savitzky", email: "asavitzky@forio.com", url: "github.com/adambom" }, description: "This is a mashup of Paul Irish's HTML5 boilerplate, which is a badass, bullet-proof, and future-ready html 5 and css template that makes your shit work nice, with the blueprint grid system, which helps you create grid based layouts. It's all built in SCSS (.scss file ext) (a.k.a SASS - or syntactically awesome stylesheets), which is backwards compatible with sass (.sass file ext) and css. It's all rolled up using the compass framework (compass-style.org). Since the code uses blueprint/semantic, you can make finally make your grid-based layouts semantic. No more span-10 classes in your markup. This is accomplished using the column, prepend, append, last, etc. mixins.", install: { "Step 1": "$ sudo gem install scss", "Step 2": "$ sudo gem install sass", "Step 3": "$ sudo gem install compass", "Step 4": "$ cd ~/", "Step 5": "$ git clone git@github.com:adambom/Boilergrid-for-Compass.git", "Step 6": "$ cp -r Boilergrid-for-Compass myapp", "Step 7": "$ cd myapp", "Step 8": "$ compass watch", }, references: [ "Paul Irish's HTML5 Boilerplate": "http://html5boilerplate.com/", "Compass Framework": "http://compass-style.org/", "Syntastically Awesome Style Sheets (SASS), aka Sassy CSS (SCSS)" : "http://sass-lang.com/" ], notes: "If you don't know SASS, you should learn it (Learn to write scss to be specific). It's the best thing to happen to CSS since CSS. If you don't want to/don't feel like learning it, then compile the project once and then add all your styles in CSS to /css/stylesheets/style.css starting at line 282. This stylesheet is valid CSS, and you can use it perfectly well without recompiling anything. You will need to recompile if you change any of the blueprint parameters, like grid width or gutter width." } tutorial = { "Step 1": "install Boilergrid (see repo.install)", "Step 2": "add markup to /index.html (<div id="wrapper"></div>)", "Step 3": function setBluePrintParameters () { file = "/css/src/partials/_base.scss"; set $blueprint-grid-columns: 24; set $blueprint-container-size: 950px; set $blueprint-grid-margin: 10px; set $blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin; }, "Step 4":" add scss, sass, or plain 'ol css to /css/src/partials/_main.scss. These are your app's styles." #wrapper { @include column(20); @include prepend(2); @inlcude append(2); @include last; /* Your styles below */ background-color:green } "Step 5": "save. your scss will be compiled into valid css when you save if you are running compass watch. otherwise, just run compass compile." "Step 6": "Check out /css/stylesheets/style.css to see your compiled CSS" } More: ////////////////////////// I've set up a repo called Boilergrid, which is a nice semantic implementation of blueprint using compass. I've integrated Paul Irish's HTML5 boilerplate for cross-browser, optimized markup. Add all of your styles in scss or css in /css/src/partials/_main.scss Set the width of blueprint elements like column width, grid width, and gutter width in /css/src/partials/_base.scss when you want to specify column width for element #myelement, add the following scss to /css/src/partials/_main.scss: #myelement { @include column(number-columns) // where number-columns is the integer number of columns to span. Equivalent to class="span-numbercolumns". } To prepend or append columns to an element use the @include append(number-columns), or @include prepend(number-columns) mixins. That is equivalent to class="prepend-numbercolumns". To indicate the last column in a row, use the @include last mixin. This is equivalent to class="last". e.g. #myelement { @include last; }
About
This is a mashup of Paul Irish's HTML5 Boilerplate with Semantic Blueprint through Compass and SASS/SCSS
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published