Difference between revisions of "D7 Theming"

From Things and Stuff Wiki
Jump to navigation Jump to search
 
Line 130: Line 130:
 
== Responsive ==
 
== Responsive ==
 
* http://drupal.org/project/adaptive_image
 
* http://drupal.org/project/adaptive_image
 +
 +
{{menu}}
 +
 +
== Starter themes ==
 +
=== Zentropy ===
 +
* http://drupal.org/project/zentropy - good but no sass
 +
 +
=== Basic ===
 +
* http://drupal.org/project/basic
 +
 +
=== Sasson ===
 +
* http://drupal.org/project/sasson
 +
** HTML5, responsive (content first), semantic grid (SASS/SCSS), CSS reset (normalize)
 +
** v2 uses [https://github.com/MarcWeber/phamlp 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)
 +
* [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
 +
 +
* 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
 +
 +
* http://drupalcode.org/project/sasson.git/tree/refs/heads/7.x-3.x
 +
* http://drupal.org/node/1737170
 +
 +
==== 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;
 +
$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 ===
 +
* http://drupal.org/project/omega
 +
 +
=== Other ===
 +
Lost a lot of theme info when old wiki crashed. Tod; rebuild up interesting theme list.
 +
 +
* http://drupal.org/project/boron
 +
* http://drupal.org/project/golden_grid
 +
 +
* http://drupal.org/project/mothership
 +
 +
* http://basethe.me/
 +
 +
* https://drupal.org/project/unary - admin
 +
 +
* https://drupal.org/project/aether

Latest revision as of 23:38, 24 November 2017

Basics

Modules

  • Code per Node makes it possible to add custom CSS and Javascript per node, per block, and per content type. The code is stored in the database, but served from the file system. It also supports syntax highlighting with CodeMirror.
  • CSS Injector allows administrators to inject CSS into the page output based on configurable rules. The CSS is added using Drupal's standard drupal_add_css() function and respects page caching, etc.
  • JS injector - drupal_add_js() function and respects page caching, etc.

Development

Favicon

Background

Backwards compatibility

Layout

Various different methods 

Views
Nodequeue

Blocks
Panels

Context
Spaces

Templates

  • etc.

block

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?> "<?php print $attributes; ?>>
  <?php print render($title_prefix); ?>
  <?php if ($block->subject): ?>
    <h2><?php print $block->subject ?></h2>
  <?php endif;?>
  <?php print render($title_suffix); ?>
 
  <div class="content"<?php print $content_attributes; ?>>
    <?php print $content ?>
  </div>
</div>

Forms

For beyond basic content types field layouts; 

function milk_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'contact_node_form') {
    $form['actions']['submit'] = array(
        '#type' => 'submit',
        '#value' => t('Send'),
    );
  }
}

Responsive

Starter themes

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.

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