Published on June 24, 2008
Blueprint CSS & Drafter JS
Blueprint CSS Framework to cut down CSS development time http://code.google.com/p/blueprintcss/
Blueprint is a... • Foundation to build on. • CSS framework that provides an easy way to make grids, has good typography and form styles
It provides you with... • Easily Customizable Grid • Sensible Typography • CSS Reset • Powerful scripts for customizing your layout
It is not a set of CSS templates. It is much more.
A Nice Looking Page
Why is it so nice ?
Why is it so nice ?
Typography • Sets a baseline (line-height) of 18px. • This means that every element, from line- heights to images has to have a height that is a multiple of 18
Forms • Makes forms look good! • Predeﬁned CSS for notiﬁcations like error, warning, ﬂash. • Bundled with a few FamFamFam icons to complete your form
The Grid 950px wide. 24 columns. spanning 30px. margin of 10px.
CSS Classes .span-x Has a width of (x*30 + ((x-1)*10))px Margin right of 10px Floating left Decides the width of the element
CSS Classes .append-x Has padding right of (x*40)px Adds blank space to the right of the element
CSS Classes .preprend-x Has padding left of (x*40)px Adds blank space to the left of the element
CSS Classes .push-x Has margin left and right of (x*40)px Floated right with relative positioning Pushes the entire element towards the right
CSS Classes .pull-x Has margin left of -(x*40)px Floated left with relative positioning Pulls the entire element towards the left
CSS Classes .container A DIV inside which everything is put.
<div class=quot;containerquot;> <div class=quot;span-24quot;> </div> <hr class=quot;spacequot; /> <div class=quot;span-16 colborderquot;> <div class=quot;span-5 append-1 prepend-1 lastquot;> </div> </div> </div>
What is it ? • An easy to use JS tool that can be used to create layouts and add basic content and styling to it. • Can be used both by developers and designers. • Easy to learn, not too many buttons. • Generates HTML in the end.
Why use it ? • Reduces development time. • Allows you to visualize the design quickly on the web. • Requires little or no knowledge of HTML/ CSS.
Get in touch firstname.lastname@example.org email@example.com http://twitter.com/prtksxna/
drafter - Snow Crash parser harness. ... API Blueprint Parser. Drafter is complex builder of ... Check out the ./emcc/test-drafter.js and ./emcc/test.html ...
Drafter. Snow Crash parser harness. Introduction. Drafter takes an API blueprint on its input, parses, and then processes the AST to exposes the Parse ...
NOTE. This module uses api-blueprint-validator. api-blueprint-validator module 1.1.0 uses Drafter.js, which is pre-release from version 1.1.0. If you want ...
README.md Protagonist. API Blueprint Parser for Node.js. Protagonist is a Node.js wrapper for the Drafter library. API Blueprint is Web API documentation ...
api-blueprint-validator module 1.1.0 uses Drafter.js, which is pre-release from version 1.1.0. If you want don't want to use Drafter.js, ...
View 116453 Drafter posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
MSON to describe object attributes in blueprint. ... handled behind the scenes by a library called boutique.js (through the aglio dependency drafter.js).
Plug your API Blueprint into the CI and get no more outdated API documentation. Drafter ... Mock APIs and Services from API Blueprint in JS tests. apib-mode