Difference between revisions of "D7 Themes"

From Things and Stuff Wiki
Jump to navigation Jump to search
Line 33: Line 33:
  
 
=== v3 ===
 
=== v3 ===
 +
development branch, some of this might be out of date
 +
 
* http://drupalcode.org/project/sasson.git/tree/refs/heads/7.x-3.x
 
* http://drupalcode.org/project/sasson.git/tree/refs/heads/7.x-3.x
−
* http://drupalcode.org/project/sasson.git/blob/refs/heads/7.x-3.x:/stylesheets/grid/_gridy.scss
 
 
* http://drupal.org/node/1737170
 
* http://drupal.org/node/1737170
  
−
  $grid-width: 960px !default;
+
==== Salsa grid ====
 +
* http://drupalcode.org/project/sasson.git/tree/refs/heads/7.x-3.x:/sass/salsa
 +
 
 +
settings;
 +
  $container-width: 960px !default;
 
  $columns: 16 !default;
 
  $columns: 16 !default;
 
  $gutter-width: 20px !default;
 
  $gutter-width: 20px !default;
 
   
 
   
 
  $flow: left !default;
 
  $flow: left !default;
−
  $opos: opposite-position($flow);
+
  $opos: salsa-opos($flow);
 +
 
  $box-sizing: border-box;
 
  $box-sizing: border-box;
 
  $box-sizing-polyfill-path: "" !default;
 
  $box-sizing-polyfill-path: "" !default;
 
  $ie7-support: false !default;
 
  $ie7-support: false !default;
−
+
 
 +
grid;
 
  @include container
 
  @include container
 
  @include nested-container
 
  @include nested-container
Line 56: Line 63:
 
  @include grid-cell
 
  @include grid-cell
 
  @include gridy-background
 
  @include gridy-background
 +
 +
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==
 
== Omega==

Revision as of 03:37, 8 November 2012


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
@include nested-container
@include grid($column-span, $column-position: false, $parent-columns: false)

@include row
@include unrow

@include grid-cell
@include gridy-background

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.

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=D7_Themes&oldid=5500"