D7 Themes
Zentropy
- http://drupal.org/project/zentropy - good but no sass
Basic
Sasson
- http://drupal.org/project/sasson - HTML5, responsive (content first), semantic grid (SASS/SCSS), CSS reset (normalize)
- v2 uses phamlp fork which bundles older Compass.
- v3 uses Ruby Sass
Automatic refresh feature: make sure GUI watch file is compiled .css, i.e., sites/example.org/files/sasson/webnetres/stylesheets/subtheme.css
Subthemes
drush sns [name] generate a subtheme
Use this Drush command to initalise a Sasson subtheme. Creates in sites/all, rather than respecting current path site context.
v2
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
- 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
@import "compass/css3"; // CSS3 mixins (http://compass-style.org/reference/compass/css3/) // @import "partials/mixins"; // Theme partial mixins (check your /partials directory)
v3
development branch, some of this might be out of date
Salsa grid
settings;
$container-width: 960px !default; $columns: 16 !default; $gutter-width: 20px !default; $flow: left !default; $opos: salsa-opos($flow); $box-sizing: border-box; $box-sizing-polyfill-path: "" !default; $ie7-support: false !default;
grid;
@include container;
also, @include nested-container;
@include grid(<$width> [<container>], [<$position>]);
grid() is the heart of the layout system, it allows you to define
grid-element's width and position.
$width:
- Can be unitless and represent the number of columns to span.
- May have any kind of width unit (e.g. px, em, % etc.) and provide
complete control over the element's with, even if not complying with
the grid layout or if using a grid is not your cup of tea.
$position:
- Can be unitless and represent the column number the element starts on
- May have any kind of width unit (e.g. px, em, % etc.) and provide
complete control over the element's position, similar to absolute
positioning only that elements are NOT removed from the normal flow.
- May be 'row' to force a new grid row
Examples:
- Simple grid element spanning 4 columns starting from the 12th column
@include grid(4, 12);
- a 40% wide element pushed 60% off the grid's first column
@include grid(40%, 60%);
Nested grids -
- You may provide $width as a simple fraction, so if you want an element
to span 3 columns inside a 6 columns (nested) grid container, you'll
probably use 3/6 as $width.
- $position too.
- note: 6/6 = 1 column, not 6 columns out of 6, use 100% instead.
Example: 2 column grid element nested inside a 6 columns nested-container,
starting from the 4th column.
@include grid(2/6, 4/6);
Omega
Other
Lost a lot of theme info when old wiki crashed. Tod; rebuild up interesting theme list.