Skip to content

Instantly share code, notes, and snippets.

@copitux
Created July 17, 2011 09:12
Show Gist options
  • Save copitux/1087388 to your computer and use it in GitHub Desktop.
Save copitux/1087388 to your computer and use it in GitHub Desktop.
Directrices compass

1. Instalar compass

Ruby > 1.8   : sudo apt-get install ruby
Ruby gems    : sudo apt-get install rubygems
Compass      : sudo gem install compass

Link compass binary: sudo ln -s /var/lib/gems/1.8/bin/compass/usr/local/bin/compass
or edit COMPASS_BINARY and replace with absolute rute

2. Vistazo rápido a Sass

http://sass-lang.com/tutorial.html

3. Directrices compass

Grid, o como quitarnos de span-x en html

<div class="test span-10 last append-1"> </div> igual que...

<div class="test"> </div>
#test
    +column(10, true) //el true indica 'last' para blueprint
    +append(1)

Utilizar +container si se desea utilizar contenedores (el layout está terminado, no se debería utilizar más containers)

Links a images en css

Utilizar background: image-url('imagen.png') (http://compass-style.org/reference/compass/helpers/urls) y guardar los nuevos statics en path/static/img

Abusar de los partials

Por ejemplo, para el layout me cree la carpeta /static/compass/layout con _header.sass, _footer.sass y _navigation.sass y dentro de static/compass/screen.sass realizo los imports:

@import layout/header
@import layout/navigation
@import layout/footer

De esta manera según vayamos maquetando creamos diferentes carpetas con partials dentro: blog, webadmin etc etc y generamos css más estructurado para nosotros y un solo css para el navegador.

Reglas para IE

Si hay algo que quieras hacer en IE utilizar las clases ie6, ie7, ie8

// Chrome
li
  &:after
    content: 'modern browser'
// IE 6 y 7
.ie6, .ie7
  li
    border-right: 1px solid red

Font responsive

Utilizar la function font_size($font_que_quieres, $font_del_contendor) para obtener una fuente real del tamaño que deseas. De manera que si la fuente cambia de tamaño quede proporcional (rythm)

La mayoría de las veces con font-size: font_size(15px) será suficiente pues cogerá el tamaño del container, el cual debería ser el body

Esto es así porque si se hace un nesting con font-size en cada nivel de profundidad la fuente va empequeñeciéndose cada vez más (incluso utilizando pixels)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment