Blueprint & Drafter JS

50 %
50 %
Information about Blueprint & Drafter JS

Published on June 24, 2008

Author: prtksxna



A presentation on how to get started on Blueprint CSS, and Drafter JS

Blueprint CSS & Drafter JS

Blueprint CSS Framework to cut down CSS development time

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! • Predefined CSS for notifications like error, warning, flash. • Bundled with a few FamFamFam icons to complete your form



FamFamFam Icons

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>


Drafter A JavaScript tool to build CSS layouts quickly.

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

Any questions?

Thank You!

Add a comment

Related presentations

Related pages

GitHub - apiaryio/drafter: Snow Crash parser harness

drafter - Snow Crash parser harness. ... API Blueprint Parser. Drafter is complex builder of ... Check out the ./emcc/test-drafter.js and ./emcc/test.html ...
Read more

drafter - npm

Drafter. Snow Crash parser harness. Introduction. Drafter takes an API blueprint on its input, parses, and then processes the AST to exposes the Parse ...
Read more

grunt-blueprint-validator - npm

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 ...
Read more

Protagonist is Node.js wrapper for the API Blueprint parser Protagonist. API Blueprint Parser for Node.js. Protagonist is a Node.js wrapper for the Drafter library. API Blueprint is Web API documentation ...
Read more

Package - grunt-blueprint-validator

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, ...
Read more

Drafter | LinkedIn

View 116453 Drafter posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more

apiblueprint - MSON to describe object attributes in ...

MSON to describe object attributes in blueprint. ... handled behind the scenes by a library called boutique.js (through the aglio dependency drafter.js).
Read more

Developing tools for API Blueprint | API Blueprint

API Blueprint can be consumed via an API Blueprint parser which outputs an API Description which ... drafter.js is a pure JavaScript version of the drafter ...
Read more

API Blueprint Tools | API Blueprint

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
Read more