D7 Themes

From Things and Stuff Wiki
Revision as of 18:24, 30 August 2013 by Milk (talk | contribs) (→‎Other)
Jump to navigation Jump to search


Zentropy

Basic

Sasson

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/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.