---
title: Blueprint Framework
layout: tutorial
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:

  %pre.shell
    %code
      %span.prompt<> $&nbsp;
      compass create my_project --using blueprint/semantic
      %br>
      %span.prompt<> $&nbsp;
      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:

  %pre.shell
    %code
      %span.prompt<> $&nbsp;
      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="/reference/blueprint/buttons/") Blueprint Buttons
  %li
    %a(href="/reference/blueprint/link_icons/") Blueprint Link Icons