Skip to content

Using Patterns

Jump to bottom Edit New page
chriseppstein edited this page Sep 13, 2010 · 2 revisions

Use the compass command line to stamp out a pattern:

$ compass patterns
$ cd patterns/
$ compass -f blueprint -p buttons
   exists patterns
directory images/buttons/
   exists src
   exists stylesheets
   create src/buttons.sass
   create images/buttons/cross.png
   create images/buttons/key.png
   create images/buttons/tick.png
   exists stylesheets
  compile src/buttons.sass
   create stylesheets/buttons.css
  compile src/ie.sass
identical stylesheets/ie.css
  compile src/print.sass
identical stylesheets/print.css
  compile src/screen.sass
identical stylesheets/screen.css

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/buttons.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>

You can also provide your own name to scope the pattern if you want to make several:

$ compass -f blueprint -p buttons --pattern-name alternate
   exists patterns
directory images/buttons/
   exists src
directory src/alternate/
   exists stylesheets
   create src/alternate/buttons.sass
   create images/buttons/cross.png
   create images/buttons/key.png
   create images/buttons/tick.png
   exists stylesheets
directory stylesheets/alternate/
  compile src/alternate/buttons.sass
   create stylesheets/alternate/buttons.css
  compile src/ie.sass
identical stylesheets/ie.css
  compile src/print.sass
identical stylesheets/print.css
  compile src/screen.sass
identical stylesheets/screen.css

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
Add a custom footer
Add a custom sidebar
Clone this wiki locally