Difference between revisions of "D7 Themes"

From Things and Stuff Wiki
Jump to navigation Jump to search
(Blanked the page)
 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{techy}}
 
  
* [http://drewish.com/tools/vertical-rhythm CSS with vertical rhythm] - drewish.com
 
* [http://lamb.cc/typograph/ Scale & Rhythm]
 
 
== Themes ==
 
=== Sasson ===
 
* http://drupal.org/project/sasson - HTML5, responsive (content first), semantic grid (SASS/SCSS), CSS reset (normalize)
 
 
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.
 
 
<code>drush sns [name]</code> - generate a subtheme. ff does this auto if theme is sasson.
 
 
sasson.info calls
 
* [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)
 
** @imports "css3", "960/grid", @import "base";
 
** https://github.com/nextmat/compass-960-plugin/blob/master/stylesheets/960/_grid.sass
 
 
==== Notes ====
 
* 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
 
** [http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/ Mastering the 960 Grid System]
 
@import "css3";
 
@import "960/grid";
 
@import "base";
 
 
$ninesixty-columns: 16;
 
 
@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()
 
 
== Future ==
 
* [http://drupal.org/project/issues/search/drupal?text=&assigned=&submitted=&participant=&version%5B%5D=8.x&issue_tags_op=or&issue_tags=html5 HTML5 in core]
 

Latest revision as of 23:37, 24 November 2017