chriseppstein / compass watch
public
Forks66Right
Watchers1314Right
Description: Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.
Home | Edit | New

Using Patterns

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:

Pages feed

Last edited by chriseppstein, Fri Apr 03 14:56:24 -0700 2009
Home | Edit | New
Versions: