74 lines
2.0 KiB
Plaintext
74 lines
2.0 KiB
Plaintext
---
|
||
title: Blueprint Framework
|
||
classnames:
|
||
- tutorial
|
||
---
|
||
%h1= item[:title]
|
||
|
||
%h2#semantic-blueprint Semantic Blueprint Template
|
||
|
||
%p
|
||
The semantic template assumes that you will write your own selectors
|
||
and apply the blueprint mixins to them to achieve a design that does
|
||
not use any presentational classes. This is the preferred approach for
|
||
using Blueprint with compass, but if you want a more traditional
|
||
approach, consider the <a href="#basic-blueprint">Basic
|
||
Blueprint Template</a>.
|
||
|
||
%h2 Getting Started with Semantic Blueprint
|
||
|
||
%p
|
||
Once you get Compass installed, you are ready to create a new
|
||
blueprint project. In your terminal enter the following commands:
|
||
|
||
%code.shell
|
||
%pre
|
||
%span.prompt<> $
|
||
compass create my_project --using blueprint/semantic
|
||
%br>
|
||
%span.prompt<> $
|
||
cd my_project
|
||
|
||
%hr
|
||
|
||
%h2#basic-blueprint Basic Blueprint Template
|
||
|
||
%p
|
||
The basic template is the starting point for working with blueprint
|
||
in compass. It can be used to generate CSS that is virtually identical
|
||
to the Blueprint CSS. If all you want is an easy way to customize the
|
||
grid or typography, you’ll be using these libraries. Since the basic
|
||
library is built on top of the blueprint modules, customization will
|
||
require that you refer to the particular module you want to customize.
|
||
|
||
%p
|
||
If you want to get started with the Basic Template because it feels
|
||
more familiar to you, that's fine. It's very easy to transition to
|
||
<a href="#semantic-blueprint">semantic selectors</a> when you're ready.
|
||
|
||
|
||
%h2 Getting Started with Basic Blueprint
|
||
|
||
%p
|
||
Once you get Compass installed, you are ready to create a new
|
||
blueprint project. In your terminal enter the following commands:
|
||
|
||
%code.shell
|
||
%pre
|
||
%span.prompt<> $
|
||
compass create my_project --using blueprint/basic
|
||
|
||
%h2 Blueprint Plugins
|
||
|
||
%p
|
||
The core blueprint plugins are available, but must be installed
|
||
into your project. Follow the instructions below:
|
||
|
||
%ul
|
||
%li
|
||
%a(href="#") Blueprint Buttons
|
||
%li
|
||
%a(href="#") Blueprint Link Icons
|
||
|
||
|