Difference between revisions of "D7 Themes"

From Things and Stuff Wiki
Jump to navigation Jump to search
m (moved Themes to D7 Themes)
Line 21: Line 21:
 
=== Layout ===
 
=== Layout ===
 
* sasson/styles/layout/desktop-first/sasson-base.scss sets .page as 960px. for a 100% wrapper, add a div in subtheme/templates/page.tpl.php
 
* sasson/styles/layout/desktop-first/sasson-base.scss sets .page as 960px. for a 100% wrapper, add a div in subtheme/templates/page.tpl.php
 
=== Grid ===
 
* [https://github.com/nextmat/compass-960-plugin compass-960-plugin] - grid system used
 
** https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass
 
* https://github.com/Hauleth/sass-960gs
 
* [http://960.gs 960.gs] / [http://960.gs/demo.html demo]
 
 
* [http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/ Mastering the 960 Grid System]
 
 
Install
 
gem install compass-960-plugin
 
 
// Grid mixins (see Sasson's layout partials for examples)
 
@import "960/grid";
 
 
Default is 12 colums. Set this in subtheme .scss;
 
$ninesixty-columns: 16;
 
 
Give an element a grid attribute
 
@include grid-container; - give to #page. sets width and auto margins
 
@include grid(8); - declare an 8 column wide element
 
@include grid-prefix(2); - add an empty 2-wide element before
 
@include grid-suffix(2); - add an empty 2-wide element after
 
@include grid-push(4); - push element 4 to the right
 
@include grid-pull(4); - pull element 4 to the right
 
@include alpha; - remove left gutter, for nested grid first element. must got after grid()
 
@include omega; - remove right gutter, for nested grid last element. must got after grid()
 
  
 
== Omega==
 
== Omega==

Revision as of 15:42, 22 July 2012


Sasson

Currently uses this phamlp fork which bundles Compass. This might change if Sasson switches to this fork.

Subthemes

Use this Drush command to initalise a Sasson subtheme. N.b.; Creates in sites/all, rather than respecting current path site context. drush sns [name] - generate a subtheme. ff does this auto if theme is sasson.

sasson.info calls (to recheck)

@import "compass/css3"; // CSS3 mixins (http://compass-style.org/reference/compass/css3/)
// @import "partials/mixins"; // Theme partial mixins (check your /partials directory)

Layout

  • sasson/styles/layout/desktop-first/sasson-base.scss sets .page as 960px. for a 100% wrapper, add a div in subtheme/templates/page.tpl.php

Omega

Other

Lost a lot of theme info when old wiki crashed. Tod; rebuild up interesting theme list.