Difference between revisions of "D7 Themes"
Jump to navigation
Jump to search
(→Grid) |
|||
| Line 9: | Line 9: | ||
Currently uses this [https://github.com/MarcWeber/phamlp phamlp] fork which bundles Compass. This might change if Sasson switches to [https://github.com/richthegeek/phamlp this] fork. | Currently uses this [https://github.com/MarcWeber/phamlp phamlp] fork which bundles Compass. This might change if Sasson switches to [https://github.com/richthegeek/phamlp 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. | ||
<code>drush sns [name]</code> - generate a subtheme. ff does this auto if theme is sasson. | <code>drush sns [name]</code> - generate a subtheme. ff does this auto if theme is sasson. | ||
| − | sasson.info calls | + | sasson.info calls (to recheck) |
* [http://drupalcode.org/project/sasson.git/blob/refs/heads/7.x-2.x:/styles/boilerplate.css sasson/styles/boilerplate.css] - h5bp.com/css | * [http://drupalcode.org/project/sasson.git/blob/refs/heads/7.x-2.x:/styles/boilerplate.css sasson/styles/boilerplate.css] - h5bp.com/css | ||
* [http://drupalcode.org/project/sasson.git/blob/refs/heads/7.x-2.x:/styles/sasson.scss sasson/styles/sasson.scss] (.info call is to the processed .css, natch) | * [http://drupalcode.org/project/sasson.git/blob/refs/heads/7.x-2.x:/styles/sasson.scss sasson/styles/sasson.scss] (.info call is to the processed .css, natch) | ||
| Line 17: | Line 19: | ||
** https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass | ** https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass | ||
| − | === | + | @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 | * 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 | ||
Revision as of 02:21, 8 June 2012
Omega
Sasson
- http://drupal.org/project/sasson - HTML5, responsive (content first), semantic grid (SASS/SCSS), CSS reset (normalize)
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)
- sasson/styles/boilerplate.css - h5bp.com/css
- sasson/styles/sasson.scss (.info call is to the processed .css, natch)
- @imports "css3", "960/grid", @import "base";
- https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass
@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
Grid
- compass-960-plugin - grid system used
// 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(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()