SlideShare a Scribd company logo
1 of 115
Download to read offline
Accelerated grid
 theming using NineSixty


                                      +

Todd Nienkerk
Drupal Design Camp Boston | June 19, 2010
Personal introduction
Todd Nienkerk
                         Co-founder, designer, and developer
                         Four Kitchens

                         todd@fourkitchens.com




Photo: Kristin Hillery
What is a grid system?
History of the grid
 ‣   The practice of using a grid to guide design and
     page layout is nearly a century old
 ‣   In the 1910s and 1920s, ornamental design gave
     way to Rationalism and New Objectivity




Source: Grids are Good by Khoi Vinh and Mark Boulton
Photo: kmaraj on Flickr (Creative Commons BY-NC-ND)
Photo: dalydose on Flickr (Creative Commons BY-NC-SA)
‣   This shift in design was part of a much larger
     movement towards function over form




Source: Grids are Good by Khoi Vinh and Mark Boulton
Photo: s.alt on Flickr (Creative Commons BY-NC-ND)
Photo: J. Kleyn on Flickr (Creative Commons BY-ND)
Typographic grids
 ‣   After World War II, a number of graphic designers,
     influenced by the modernist ideas of Die neue
     Typographie (The New Typography), questioned
     the relevance of the conventional page layout of
     the time
 ‣   They devised a flexible system to help designers
     achieve coherency in organizing the page



Source: Grid (page layout) on Wikipedia
Source: Grid (page layout) on Wikipedia
Nearly a century ago
 ‣   Modernists looked to build a new aesthetic by...
     ‣   deriving beauty from the innate qualities of the
         machine
     ‣   championing standardization




Source: Grids are Good by Khoi Vinh and Mark Boulton
Nearly a century ago
 ‣   Modernists looked to build a new aesthetic by...
     ‣   deriving beauty from the innate qualities of the
         machine
     ‣   championing standardization
 ‣   Sound familiar?




Source: Grids are Good by Khoi Vinh and Mark Boulton
Today
 ‣   Web designers have turned to grid-based design
     in order to...
     ‣   derive beauty from the innate qualities of the
         browser
     ‣   champion standardization
 ‣   17 years after the invention of the web, we are
     finally embracing a century-old design philosophy

Source: Grids are Good by Khoi Vinh and Mark Boulton
Grid systems on the web
    ‣   On the web, grid systems usually take the form of
        CSS frameworks
    ‣   A framework is a “reuseable abstraction of code
        wrapped in a well-defined API”1
    ‣   A collection of tools and shortcuts designed to
        minimize code and make your life easier



1   Source: Software framework on Wikipedia
Examples of frameworks
‣   Ruby on Rails is a well-known Ruby framework
‣   jQuery is a JavaScript framework
‣   Drupal itself can be considered a web application
    framework
    ‣   Includes many APIs for working with databases,
        fields, and web forms
CSS frameworks
‣   Apply the principles of software frameworks to
    web design
‣   They provide standardized rules and shortcuts for:
    ‣   browser resets
    ‣   typography
    ‣   navigation
    ‣   print style
    ‣   and...
Layout
‣   When applied to web design, grid systems are CSS
    frameworks that provides standardized rules and
    shortcuts for building a website’s layout
“I’m convinced that the people railing
         against CSS frameworks are just trying to
         drum up some false job security.”

                                                  —Je     Croft, designer and author




Je Croft.com | What’s not to love about CSS frameworks?
Why use a grid system?
1) Saves time

2) Saves money

3) Reduces frustration
Stop reinventing the
wheel
‣   Reduces the amount of CSS and markup you need
    to duplicate each time you start a project
‣   No need to refer to old projects to figure out how
    to implement layouts
Stop fixing and start
designing
‣   Shortens testing phases by providing built-in
    support for noncompliant browsers
    ‣   Minimize Internet Explorer hacks in your layout
‣   A well-tested grid system will rarely be the source
    of your problems
Stop deconstructing CSS
‣   Understanding someone else’s design is much
    easier when a standard grid system is used
“Embrace constraints”
                               — Mark Kraemer, National UX Practice Lead, EMC.com


 ‣   All modern displays
     support at least
     1024×768 resolution
 ‣   Despite the many
     advances in web
     technology, it’s all
     just rectangles



Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
Enforcing a grid can
    accelerate design while
    maintaining order
Photo: jontidmarsh on Flickr (Creative Commons BY-SA)
“Our craft is becoming a commodity, and the
   people in charge don’t care about the quality of
   the markup, CSS, or how short our JavaScript is.
   What matters is how fast you can get it to
   market, how many people it reaches, and how
   cheaply it can be built.”

                               —Christian Heilmann, Standards evangelist at Yahoo




Think Vitamin | Web development is moving on — Are you?
How do grid systems
work?
Columns
 ‣   Grid systems are built
     using columns
     ‣   Columns are a grid
         system’s smallest unit
         of measurement
 ‣   Most grid systems
     contain 12–16 columns


Example based on 960.gs (12-column)
Column width
 ‣   Page regions (header,
     content, sidebars, etc.)
     are defined by column
     width
 ‣   As in: “The header is
     eight columns wide”




Example based on 960.gs (12-column)
Gutters (margins)
 ‣   Margins or padding are
     used to create gutters
     between columns
 ‣   These gutters provide
     margins between page
     regions




Example based on 960.gs (12-column)
Lean and versatile CSS
‣   A grid system’s CSS should:
    ‣   Be lean and e cient
    ‣   Be versatile and reusable
    ‣   Ensure consistent behavior across all common
        browsers — even IE6
Wrapping <div> elements
‣   In fixed-width grid systems, the entire layout is
    wrapped inside a single <div> element
‣   <div> elements wrap the page regions and define
    their widths according to the number of columns
    they span
    ‣   These <div> elements may be nested to create
        regions within regions
Floating <div> elements
 ‣   The wrapping <div>                         class: grid-12
     elements are assigned
     a column width using a            class:         class:
     CSS class                         grid-4         grid-4
                                                                  class:
                                                                 grid-4
 ‣   Because these classes                class: grid-8
     also float the elements,
     they simply fall into
                                      class: grid-6       class: grid-6
     place on the page


Example based on 960.gs (12-column)
What can grid systems
look like?
Examples of grid-based layouts
Layout A: Content left, sidebar right




Example based on 960.gs (12-column)
Layout B: Content between sidebars




Example based on 960.gs (12-column)
Layout C: Content right with two left sidebars




Example based on 960.gs (12-column)
Layout D: Whatever




Example based on 960.gs (12-column)
Layout E: The Mondriaan




Painting by Piet Mondriaan (later Mondrian)
How 960.gs works
What is 960.gs?
 ‣   960.gs — also known as the 960 Grid System —
     was created by Nathan Smith in order to
     “streamline web development workflow”
 ‣   It’s both a prototyping and development
     framework




Source: 960.gs
What’s in it
 ‣   Download it for free at http://960.gs
 ‣   GPL and MIT licensed
 ‣   The 960.gs download includes:
     ‣   Printable sketch sheets for doodling
     ‣   Design templates for all most applications:
         Photoshop, Illustrator, Inkscape, OmniGra e, etc.


Source: 960.gs
Technical specs
 ‣   960px wide with a 940px usable area
 ‣   Two versions: 12- and 16-column
     ‣   These can be implemented separately or
         simultaneously
 ‣   Each column has a 10px margin on the left and
     right, which creates a 20px gutter between
     columns


Source: 960.gs
12-column version
     Columns are 60px wide              Gutters are 20px wide




      10px margin on the left and     Available
      right prevents collision with   working area
      browser chrome                  is 940px wide


Source: 960.gs
16-column version
     Columns are 40px wide




                      Everything else remains the same



Source: 960.gs
Using both versions
simultaneously
‣   12- and 16-column layouts can be used on the
    same page

                                      Halves




                                     Quarters
‣   This flexibility allows designers to work with both
    60px- and 40px-wide columns




‣   If 12 or 16 columns don’t suit you, 960 is also
    divisible by 2, 3, 4, 5, 6, 8, 10, 15, 20, 24, 30, 32, 40,
    48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480
CSS and markup
Note: 960.gs uses underscores in its CSS class names. To avoid confusion, the
examples that follow will use hyphens instead, as this is The Drupal Way.
Containers
‣   Grids must be wrapped
    in a container <div>
                            .container-12,
‣   Containers center the   .container-16 {
                              margin-left: auto;
    content and define         margin-right: auto;
    which version of the      width: 960px;
    grid will be            }

    implemented
Grids
‣   Grids are held inside      .grid-1,
                               .grid-2,
    containers and are         .grid-3,
    floated left so they fall     ...
    into place                 .grid-16 {
                                  display: inline;
    automatically                 float: left;
                                  position: relative;
‣   They also provide 10px        margin-left: 10px;
    margins on the left and       margin-right: 10px;
                               }
    right
Grid widths
‣   The width of each grid
    is determined by the      .container-12 .grid-1 {
    container that wraps it     width: 60px;
                              }
‣   For example, a one-
                              .container-16 .grid-1 {
    column grid is either       width: 40px;
    60px or 40px              }
    depending on whether
    it’s a 12- or 16-column
    layout
‣   Note that grid width does not increase by 60px or
    40px each time
‣   Each increase must account for the 20px gutter
    between grids

       .container-12 .grid-1 {   .container-16 .grid-1 {
         width: 60px;              width: 40px;
       }                         }

       .container-12 .grid-2 {   .container-16 .grid-2 {
         width: 140px;             width: 100px;
       }                         }

       .container-12 .grid-3 {   .container-16 .grid-3 {
         width: 300px;             width: 160px;
       }                         }
Putting containers and
grids together
.container-12



 .grid-3        .grid-6   .grid-3
Prefixes and su xes
‣   If you want to leave
    space between              .container-12 .prefix-1 {
    columns, use a prefix         padding-left: 80px;
    or su x class              }

                               .container-12 .suffix-1 {
‣   Prefix classes add            padding-right: 80px;
    padding to the left of a   }
    column
‣   Su x classes add
    padding to the right
Adding a prefix and su x

.container-12

                 .grid-4
 .grid-3        .prefix-1   .grid-3
                .suffix-1
Multiple rows
.container-12

                .grid-12



                 .grid-4
 .grid-3        .prefix-1   .grid-3
                .suffix-1
Multiple rows: markup
                      <div class="container-12">
The container <div>
 defines the layout      <!-- row 1 -->
                        <div class="grid-12">
     version in use
                          This grid occupies the full width
                        </div>

                        <!-- row 2 -->
                        <div class="grid-3">
                          One wide
    No need to put
                        </div>
each row in its own     <div class="grid-4 prefix-1 suffix-1">
    wrapping <div>        Four wide with a prefix and suffix of one each
                        </div>
                        <div class="grid-3">
                          One wide
                        </div>

                      </div> <!-- /container -->
Stack content vertically
with nested grids
                          .grid-6
.container-12

                .grid-6
 .grid-3                  .grid-3
                .grid-6
‣   Here’s the catch: Because each grid includes a
    10px left and right margin, nesting grids can break
    your layout
                                             .grid-6
    .container-12

                            .grid-6
      .grid-3
                            .grid-6


      .grid-3
Alpha and omega fix
broken nesting
‣   When nesting grids, use the alpha and omega
    classes to remove the margins
    ‣   alpha removes the left margin. It’s the first nested
        grid.
    ‣   omega removes the right margin. It’s the last
        nested grid.
.grid-6
.container-12

               .grid-3      .grid-3
               .alpha       .omega
 .grid-3                                    .grid-3
                       .grid-6
                    .alpha .omega


       .alpha removed          .omega removed
       the left margin        the right margin
Grid design tools
‣   960 Gridder: gridder.andreehansson.se




Screenshot from gridder.andresshansson.se
‣   960 Gridder module for Drupal:
     drupal.org/project/gridder




Screenshot from Drupal.org
‣   Variable grid system generator:
     spry-soft.com/grids




Screenshots from spry-soft.com/grids
Grid systems based on
960.gs
‣   Fluid 960.gs: designinfluences.com/fluid960gs
     ‣   Variable-width version of 960.gs




Screenshot from designinfluences.com/fluid960gs
‣   Typogridphy: csswizardry.com/typogridphy
     ‣   Typographical and grid layout CSS framework




Screenshot from csswizardry.com/typogridphy
And...
The NineSixty theme
http://drupal.org/project/ninesixty
About NineSixty
 ‣   NineSixty is the Drupal port of 960.gs
 ‣   Developed by Joon Park, aka dvessel on
     Drupal.org
 ‣   Intended to be used as a base theme




Source: Drupal.org
Screenshot from ninesixty.fkdemos.com
NineSixty’s improvements
‣   Content-first layout using “push” and “pull” classes
    ‣   Now part of 960.gs proper
‣   Dynamic grid widths based on context using ns()
‣   Debugging tools and grid visualization
‣   Right-to-left (RTL) language support
Content-first layout
‣   A design convention in which the content is output
    as close to the top of the markup as possible
    ‣   Content should be output before all sidebars
‣   This can be very di cult to achieve on a site with
    one or more left columns
Push and pull classes
‣   Content-first layout can be achieved in NineSixty
    by “pushing” the content grid to the right while
    “pulling” a sidebar to the left
‣   These classes use the same naming convention
    as .grid-X, .prefix-X, and .suffix-X, where X is the
    grid’s width:
    ‣   .push-X and .pull-X
‣   Push and pull values should match the grid value
     of the opposite grid

      <div class="container-12">
        <div id="content" class="grid-6 push-3">
                                                    Match numbers to
          Content
                                                    swap locations
        </div>

         <div id="sidebar-left"   class="grid-3 pull-6">
           Sidebar: Left
         </div>

        <div id="sidebar-right" class="grid-3">
          Sidebar: Right
        </div>
      </div>




Source: NineSixty’s README.txt
Before adding push and pull
.container-12


           #content               #sidebar-left      #sidebar-right
           .grid-6                   .grid-3            .grid-3




         <div class="container-12">
           <div id="content" class="grid-6">
             Content
           </div>
           <div id="sidebar-left" class="grid-3">
             Sidebar: Left
           </div>
           <div id="sidebar-right" class="grid-3">
             Sidebar: Right
           </div>
         </div>
After adding push and pull
.container-12

 #sidebar-left              #content
                                                  #sidebar-right
    .grid-3                 .grid-6
                                                     .grid-3
    .pull-6                 .push-3



         <div class="container-12">
           <div id="content" class="grid-6 push-3">
             Content
           </div>
           <div id="sidebar-left" class="grid-3 pull-6">
             Sidebar: Left
           </div>
           <div id="sidebar-right" class="grid-3">
             Sidebar: Right
           </div>
         </div>
Dynamic grid widths
‣   In some cases, you may want grids to resize
    themselves when a region isn’t populated
    ‣   For example, a 3-6-3 layout should become 3-9 if
        the right column is empty
‣   Dynamic width assignment is handled using the
    ns() function

    ‣   Defined in template.php
Structure of ns()
                          These “pairs”
         Default        subtract from the
          value           default value



       ns('class-X', $region, Y, $region, Z, ...)




   ‣   class can be grid, prefix, suffix, push, or pull

   ‣   X, Y, and Z are all width values

   ‣   $region can be any theme region

   ‣   Use as many pairs as you like
Implementing ns()
               From page.tpl.php:
               <div id="main" class="column <?php print ns('grid-16', $left,
               4, $right, 3) . ' ' . ns('push-4', !$left, 4); ?>">
                   <?php print $content; ?>
               </div>

               <?php if ($left): ?>
                 <div id="sidebar-left" class="column sidebar region grid-4 <?
               php print ns('pull-12', $right, 3); ?>">
                   <?php print $left; ?>
                 </div>
               <?php endif; ?>

               <?php if ($right): ?>
                 <div id="sidebar-right" class="column sidebar region grid-3">
                   <?php print $right; ?>
                 </div>
               <?php endif; ?>




Source: NineSixty’s page.tpl.php
From #main:
                   <?php print ns('grid-16', $left, 4, $right, 3)
                   . ' ' . ns('push-4', !$left, 4); ?>


                                     If left sidebar is       If right sidebar is
                Default            present, subtract 4       present, subtract 3
                 width             from default width.       from default width.



                   ns('grid-16', $left, 4, $right, 3)



                                         If left sidebar is not present, subtract
                 Default                 4 from the push value. This will result
                push value                         in no push, as 4-4 = 0



                   ns('push-4', !$left, 4)



Source: NineSixty’s page.tpl.php
From #sidebar-left:
                   <?php php print ns('pull-12', $right, 3); ?>



                                      If right sidebar is
                Default              present, subtract 3
               pull value          from default pull value



                   ns('pull-12', $right, 3)




Source: NineSixty’s page.tpl.php
NineSixty in action
‣   Visit http://ninesixty.fkdemos.com to see how
    NineSixty...
    ‣   uses push and pull classes to generate content-
        first layout
    ‣   dynamically assigns grid widths based on
        context
    ‣   can be used to create di erent layouts
Implementing a grid-
based layout
Using NineSixty to build your site
When not to use a grid
‣   Implementing a grid will probably be impossible if
    your site’s layout...
    ‣   uses irregular column sizes
    ‣   has irregular margins or gutters
    ‣   has a width that isn’t divisible by a sane number
‣   Implementing a grid will be di cult — but not
    impossible — if your site’s layout...
    ‣   has gutter widths of odd numbers
    ‣   is fluid
    ‣   wasn’t designed on a grid
Getting started
‣   Do not change the NineSixty theme on your site!
    ‣   Hacking NineSixty is like hacking core: It will
        make upgrading your site very di cult
‣   Instead, subtheme NineSixty or create a totally
    new theme based on NineSixty
Subtheme
‣   This method is best if your site is (or can be)
    960px wide and can utilize 12 or 16 columns
‣   Subtheming instructions and resources on
    Drupal.org:
    ‣   Subtheming quick and dirty
    ‣   Sub-themes, their structure and inheritance
Build a new theme
‣   You should build a new theme when your site’s
    layout...
    ‣   isn’t 960px wide
    ‣   doesn’t use 12 or 16 columns
‣   It’s more e cient to use a new theme than to
    override virtually all of NineSixty’s CSS
Do the math
 ‣   Be prepared to crunch numbers
 ‣   Building a new grid can be very confusing
     ‣   Spreadsheets can help you visualize columns,
         margins, and gutters




Image source: Client project
Examples

960.gs as a prototyping
and development system
Refresh Boston: 16 columns




refreshboston.org
Refresh Boston: 16 columns




refreshboston.org
Convertbot: 16 columns




tapbots.com/convertbot
Convertbot: 16 columns




tapbots.com/convertbot
Pepsi comp: 16 columns
Pepsi comp: 16 columns
AAFES comp: 12 columns




Credits
AAFES comp: 12 columns




Credits
stopdesign.com 12 columns




stopdesign.com
stopdesign.com 12 columns




stopdesign.com
Drupal.org redesign: 12 columns




infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Drupal.org redesign: 12 columns




infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Four Kitchens: 12 columns




fourkitchens.com
infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Four Kitchens: 12 columns




fourkitchens.com
infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Appendix
Learn more about grids
‣   The Grid System: thegridsystem.org
    ‣   “The ultimate resource in grid systems”
    ‣   The Grid System’s Flickr pool
‣   My bookmarks tagged “gridsystems”:
    delicious.com/toddross/gridsystems
Downloads
‣   960 grid system: 960.gs
‣   NineSixty theme for Drupal: drupal.org/project/
    ninesixty
‣   This and other presentations are available for
    download at fourkitchens.com/presentations
Contact Todd
‣   Email: todd@fourkitchens.com
    ‣   also works for Google Chat and AIM
‣   Skype: toddatfk
‣   Twitter: twitter.com/toddross
Questions?
Credits
‣   “History of the grid” slides were   ‣   This presentation was created by
    borrowed heavily from Khoi Vinh         Nathan Smith of Fellowship Tech
    and Mark Boulton’s presentation         and Todd Ross Nienkerk, co-
    Grids are Good and from                 founder of Four Kitchens, and
    Wikipedia                               delivered by Todd Ross Nienkerk

‣   Piet Mondriaan painting was found
    somewhere online. Copyright
    holder is unknown

‣   The items listed above are exempt
    from this presentation’s Creative
    Commons license
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-
ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.

More Related Content

Viewers also liked

HSEdesign: Peng Peng / Weltformat
HSEdesign: Peng Peng / WeltformatHSEdesign: Peng Peng / Weltformat
HSEdesign: Peng Peng / Weltformathsedesign
 
Design Samples
Design SamplesDesign Samples
Design Sampleslindsey_h
 
Fotos insólitas del Papa Francisco
Fotos insólitas del Papa FranciscoFotos insólitas del Papa Francisco
Fotos insólitas del Papa FranciscoIvan Consiglio
 
Livro medula a fábrica da vida. book bone marrow the factory of life..
Livro medula a fábrica da vida. book bone marrow the factory of life..Livro medula a fábrica da vida. book bone marrow the factory of life..
Livro medula a fábrica da vida. book bone marrow the factory of life..Helena Alves
 
Trabago practico n5
Trabago practico n5Trabago practico n5
Trabago practico n5nachonico
 
Achegamento ó mundo real e fantástico na obra merlín e familia- de álvaro cu...
Achegamento ó mundo real e fantástico na obra  merlín e familia- de álvaro cu...Achegamento ó mundo real e fantástico na obra  merlín e familia- de álvaro cu...
Achegamento ó mundo real e fantástico na obra merlín e familia- de álvaro cu...Maria Villar
 
Talavera de la Reina Programa Feria del Libro 2015
Talavera de la Reina Programa Feria del Libro 2015Talavera de la Reina Programa Feria del Libro 2015
Talavera de la Reina Programa Feria del Libro 2015Lagartera TV
 
Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...
Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...
Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...Likelika
 
Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)
Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)
Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)jpbriaire
 
From LIBEs’ framework to users experience of LIBE courses: analysing the Port...
From LIBEs’ framework to users experience of LIBE courses: analysing the Port...From LIBEs’ framework to users experience of LIBE courses: analysing the Port...
From LIBEs’ framework to users experience of LIBE courses: analysing the Port...Marta Pinto
 

Viewers also liked (20)

HSEdesign: Peng Peng / Weltformat
HSEdesign: Peng Peng / WeltformatHSEdesign: Peng Peng / Weltformat
HSEdesign: Peng Peng / Weltformat
 
Design Samples
Design SamplesDesign Samples
Design Samples
 
The simpsons
The simpsonsThe simpsons
The simpsons
 
Fotos insólitas del Papa Francisco
Fotos insólitas del Papa FranciscoFotos insólitas del Papa Francisco
Fotos insólitas del Papa Francisco
 
Dinámica Molecular de Mezclas Multicomponentes
Dinámica Molecular de Mezclas MulticomponentesDinámica Molecular de Mezclas Multicomponentes
Dinámica Molecular de Mezclas Multicomponentes
 
Circexcr
CircexcrCircexcr
Circexcr
 
Increase clubprofits presentation_pdf
Increase clubprofits presentation_pdfIncrease clubprofits presentation_pdf
Increase clubprofits presentation_pdf
 
Livro medula a fábrica da vida. book bone marrow the factory of life..
Livro medula a fábrica da vida. book bone marrow the factory of life..Livro medula a fábrica da vida. book bone marrow the factory of life..
Livro medula a fábrica da vida. book bone marrow the factory of life..
 
Mundo animal
Mundo animal Mundo animal
Mundo animal
 
Trabago practico n5
Trabago practico n5Trabago practico n5
Trabago practico n5
 
Achegamento ó mundo real e fantástico na obra merlín e familia- de álvaro cu...
Achegamento ó mundo real e fantástico na obra  merlín e familia- de álvaro cu...Achegamento ó mundo real e fantástico na obra  merlín e familia- de álvaro cu...
Achegamento ó mundo real e fantástico na obra merlín e familia- de álvaro cu...
 
Portafolio La Divina Mente
Portafolio La Divina MentePortafolio La Divina Mente
Portafolio La Divina Mente
 
Talavera de la Reina Programa Feria del Libro 2015
Talavera de la Reina Programa Feria del Libro 2015Talavera de la Reina Programa Feria del Libro 2015
Talavera de la Reina Programa Feria del Libro 2015
 
Y que estamos haciendo?
Y que estamos haciendo?Y que estamos haciendo?
Y que estamos haciendo?
 
Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...
Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...
Systemic and Mucosal Infection Program Protective Memory CD8 T Cells in the V...
 
La escuela hoy , meirieu 2004 (3)
La escuela hoy , meirieu  2004 (3)La escuela hoy , meirieu  2004 (3)
La escuela hoy , meirieu 2004 (3)
 
FELTET AV UNIVERSELL OVERLEVELSE
FELTET AV UNIVERSELL OVERLEVELSEFELTET AV UNIVERSELL OVERLEVELSE
FELTET AV UNIVERSELL OVERLEVELSE
 
Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)
Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)
Social Mail: Geef je social media een boost met e-mail (Multichannel 2013)
 
From LIBEs’ framework to users experience of LIBE courses: analysing the Port...
From LIBEs’ framework to users experience of LIBE courses: analysing the Port...From LIBEs’ framework to users experience of LIBE courses: analysing the Port...
From LIBEs’ framework to users experience of LIBE courses: analysing the Port...
 
Traje de charra
Traje de charraTraje de charra
Traje de charra
 

Similar to Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)

Drupal theming using the 960.gs grid system
Drupal theming using the 960.gs grid systemDrupal theming using the 960.gs grid system
Drupal theming using the 960.gs grid systemFour Kitchens
 
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Four Kitchens
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Four Kitchens
 
What is grid system
What is grid systemWhat is grid system
What is grid systemchetankane
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationCharlie Moad
 
CSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteCSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteMario Hernandez
 
Grid system- cbil360.com
Grid system- cbil360.comGrid system- cbil360.com
Grid system- cbil360.comPhillip Turner
 
New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)Igalia
 
MySQL Schema Design in Practice
MySQL Schema Design in PracticeMySQL Schema Design in Practice
MySQL Schema Design in PracticeJaime Crespo
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez
 
Drupal 960 grid system based theming
Drupal 960 grid system based theming Drupal 960 grid system based theming
Drupal 960 grid system based theming Gaurav Mishra
 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017Morten Rand-Hendriksen
 
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsSteve Hong
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
DUG: Grids & Panels
DUG: Grids & PanelsDUG: Grids & Panels
DUG: Grids & PanelsPure Sign
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Ryan Cross
 

Similar to Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010) (20)

Drupal theming using the 960.gs grid system
Drupal theming using the 960.gs grid systemDrupal theming using the 960.gs grid system
Drupal theming using the 960.gs grid system
 
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
 
What is grid system
What is grid systemWhat is grid system
What is grid system
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
CSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteCSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing website
 
Grid system- cbil360.com
Grid system- cbil360.comGrid system- cbil360.com
Grid system- cbil360.com
 
New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)New layout models on the Web (Mobile World Congress 2014)
New layout models on the Web (Mobile World Congress 2014)
 
MySQL Schema Design in Practice
MySQL Schema Design in PracticeMySQL Schema Design in Practice
MySQL Schema Design in Practice
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 
Drupal 960 grid system based theming
Drupal 960 grid system based theming Drupal 960 grid system based theming
Drupal 960 grid system based theming
 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
 
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent Results
 
RWD
RWDRWD
RWD
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
DUG: Grids & Panels
DUG: Grids & PanelsDUG: Grids & Panels
DUG: Grids & Panels
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 

More from Four Kitchens

Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens
 
Four Kitchens: We make BIG websites
Four Kitchens: We make BIG websitesFour Kitchens: We make BIG websites
Four Kitchens: We make BIG websitesFour Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)Four Kitchens
 
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...Four Kitchens
 
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyBig Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyFour Kitchens
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Four Kitchens
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalFour Kitchens
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websitesFour Kitchens
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fontsFour Kitchens
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbookFour Kitchens
 
The Web Chef Cookbook
The Web Chef CookbookThe Web Chef Cookbook
The Web Chef CookbookFour Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Four Kitchens
 

More from Four Kitchens (20)

Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMS
 
Four Kitchens: We make BIG websites
Four Kitchens: We make BIG websitesFour Kitchens: We make BIG websites
Four Kitchens: We make BIG websites
 
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
Don't Design Websites. Design Web SYSTEMS! (UT Austin Drupal Users Group)
 
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
 
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case StudyBig Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
 
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
Intro to Drush
Intro to DrushIntro to Drush
Intro to Drush
 
Teaching Drupal
Teaching DrupalTeaching Drupal
Teaching Drupal
 
Big Websites
Big WebsitesBig Websites
Big Websites
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
 
The Web Chef Cookbook
The Web Chef CookbookThe Web Chef Cookbook
The Web Chef Cookbook
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
 

Recently uploaded

FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 

Recently uploaded (20)

FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 

Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)

  • 1. Accelerated grid theming using NineSixty + Todd Nienkerk Drupal Design Camp Boston | June 19, 2010
  • 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com Photo: Kristin Hillery
  • 4. What is a grid system?
  • 5. History of the grid ‣ The practice of using a grid to guide design and page layout is nearly a century old ‣ In the 1910s and 1920s, ornamental design gave way to Rationalism and New Objectivity Source: Grids are Good by Khoi Vinh and Mark Boulton
  • 6. Photo: kmaraj on Flickr (Creative Commons BY-NC-ND)
  • 7. Photo: dalydose on Flickr (Creative Commons BY-NC-SA)
  • 8. This shift in design was part of a much larger movement towards function over form Source: Grids are Good by Khoi Vinh and Mark Boulton
  • 9. Photo: s.alt on Flickr (Creative Commons BY-NC-ND)
  • 10. Photo: J. Kleyn on Flickr (Creative Commons BY-ND)
  • 11. Typographic grids ‣ After World War II, a number of graphic designers, influenced by the modernist ideas of Die neue Typographie (The New Typography), questioned the relevance of the conventional page layout of the time ‣ They devised a flexible system to help designers achieve coherency in organizing the page Source: Grid (page layout) on Wikipedia
  • 12. Source: Grid (page layout) on Wikipedia
  • 13. Nearly a century ago ‣ Modernists looked to build a new aesthetic by... ‣ deriving beauty from the innate qualities of the machine ‣ championing standardization Source: Grids are Good by Khoi Vinh and Mark Boulton
  • 14. Nearly a century ago ‣ Modernists looked to build a new aesthetic by... ‣ deriving beauty from the innate qualities of the machine ‣ championing standardization ‣ Sound familiar? Source: Grids are Good by Khoi Vinh and Mark Boulton
  • 15. Today ‣ Web designers have turned to grid-based design in order to... ‣ derive beauty from the innate qualities of the browser ‣ champion standardization ‣ 17 years after the invention of the web, we are finally embracing a century-old design philosophy Source: Grids are Good by Khoi Vinh and Mark Boulton
  • 16. Grid systems on the web ‣ On the web, grid systems usually take the form of CSS frameworks ‣ A framework is a “reuseable abstraction of code wrapped in a well-defined API”1 ‣ A collection of tools and shortcuts designed to minimize code and make your life easier 1 Source: Software framework on Wikipedia
  • 17. Examples of frameworks ‣ Ruby on Rails is a well-known Ruby framework ‣ jQuery is a JavaScript framework ‣ Drupal itself can be considered a web application framework ‣ Includes many APIs for working with databases, fields, and web forms
  • 18. CSS frameworks ‣ Apply the principles of software frameworks to web design ‣ They provide standardized rules and shortcuts for: ‣ browser resets ‣ typography ‣ navigation ‣ print style ‣ and...
  • 19. Layout ‣ When applied to web design, grid systems are CSS frameworks that provides standardized rules and shortcuts for building a website’s layout
  • 20. “I’m convinced that the people railing against CSS frameworks are just trying to drum up some false job security.” —Je Croft, designer and author Je Croft.com | What’s not to love about CSS frameworks?
  • 21. Why use a grid system?
  • 22. 1) Saves time 2) Saves money 3) Reduces frustration
  • 23. Stop reinventing the wheel ‣ Reduces the amount of CSS and markup you need to duplicate each time you start a project ‣ No need to refer to old projects to figure out how to implement layouts
  • 24. Stop fixing and start designing ‣ Shortens testing phases by providing built-in support for noncompliant browsers ‣ Minimize Internet Explorer hacks in your layout ‣ A well-tested grid system will rarely be the source of your problems
  • 25. Stop deconstructing CSS ‣ Understanding someone else’s design is much easier when a standard grid system is used
  • 26. “Embrace constraints” — Mark Kraemer, National UX Practice Lead, EMC.com ‣ All modern displays support at least 1024×768 resolution ‣ Despite the many advances in web technology, it’s all just rectangles Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
  • 27. Enforcing a grid can accelerate design while maintaining order Photo: jontidmarsh on Flickr (Creative Commons BY-SA)
  • 28. “Our craft is becoming a commodity, and the people in charge don’t care about the quality of the markup, CSS, or how short our JavaScript is. What matters is how fast you can get it to market, how many people it reaches, and how cheaply it can be built.” —Christian Heilmann, Standards evangelist at Yahoo Think Vitamin | Web development is moving on — Are you?
  • 29. How do grid systems work?
  • 30. Columns ‣ Grid systems are built using columns ‣ Columns are a grid system’s smallest unit of measurement ‣ Most grid systems contain 12–16 columns Example based on 960.gs (12-column)
  • 31. Column width ‣ Page regions (header, content, sidebars, etc.) are defined by column width ‣ As in: “The header is eight columns wide” Example based on 960.gs (12-column)
  • 32. Gutters (margins) ‣ Margins or padding are used to create gutters between columns ‣ These gutters provide margins between page regions Example based on 960.gs (12-column)
  • 33. Lean and versatile CSS ‣ A grid system’s CSS should: ‣ Be lean and e cient ‣ Be versatile and reusable ‣ Ensure consistent behavior across all common browsers — even IE6
  • 34. Wrapping <div> elements ‣ In fixed-width grid systems, the entire layout is wrapped inside a single <div> element ‣ <div> elements wrap the page regions and define their widths according to the number of columns they span ‣ These <div> elements may be nested to create regions within regions
  • 35. Floating <div> elements ‣ The wrapping <div> class: grid-12 elements are assigned a column width using a class: class: CSS class grid-4 grid-4 class: grid-4 ‣ Because these classes class: grid-8 also float the elements, they simply fall into class: grid-6 class: grid-6 place on the page Example based on 960.gs (12-column)
  • 36. What can grid systems look like? Examples of grid-based layouts
  • 37. Layout A: Content left, sidebar right Example based on 960.gs (12-column)
  • 38. Layout B: Content between sidebars Example based on 960.gs (12-column)
  • 39. Layout C: Content right with two left sidebars Example based on 960.gs (12-column)
  • 40. Layout D: Whatever Example based on 960.gs (12-column)
  • 41. Layout E: The Mondriaan Painting by Piet Mondriaan (later Mondrian)
  • 43. What is 960.gs? ‣ 960.gs — also known as the 960 Grid System — was created by Nathan Smith in order to “streamline web development workflow” ‣ It’s both a prototyping and development framework Source: 960.gs
  • 44. What’s in it ‣ Download it for free at http://960.gs ‣ GPL and MIT licensed ‣ The 960.gs download includes: ‣ Printable sketch sheets for doodling ‣ Design templates for all most applications: Photoshop, Illustrator, Inkscape, OmniGra e, etc. Source: 960.gs
  • 45. Technical specs ‣ 960px wide with a 940px usable area ‣ Two versions: 12- and 16-column ‣ These can be implemented separately or simultaneously ‣ Each column has a 10px margin on the left and right, which creates a 20px gutter between columns Source: 960.gs
  • 46. 12-column version Columns are 60px wide Gutters are 20px wide 10px margin on the left and Available right prevents collision with working area browser chrome is 940px wide Source: 960.gs
  • 47. 16-column version Columns are 40px wide Everything else remains the same Source: 960.gs
  • 48. Using both versions simultaneously ‣ 12- and 16-column layouts can be used on the same page Halves Quarters
  • 49. This flexibility allows designers to work with both 60px- and 40px-wide columns ‣ If 12 or 16 columns don’t suit you, 960 is also divisible by 2, 3, 4, 5, 6, 8, 10, 15, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480
  • 50. CSS and markup Note: 960.gs uses underscores in its CSS class names. To avoid confusion, the examples that follow will use hyphens instead, as this is The Drupal Way.
  • 51. Containers ‣ Grids must be wrapped in a container <div> .container-12, ‣ Containers center the .container-16 { margin-left: auto; content and define margin-right: auto; which version of the width: 960px; grid will be } implemented
  • 52. Grids ‣ Grids are held inside .grid-1, .grid-2, containers and are .grid-3, floated left so they fall ... into place .grid-16 { display: inline; automatically float: left; position: relative; ‣ They also provide 10px margin-left: 10px; margins on the left and margin-right: 10px; } right
  • 53. Grid widths ‣ The width of each grid is determined by the .container-12 .grid-1 { container that wraps it width: 60px; } ‣ For example, a one- .container-16 .grid-1 { column grid is either width: 40px; 60px or 40px } depending on whether it’s a 12- or 16-column layout
  • 54. Note that grid width does not increase by 60px or 40px each time ‣ Each increase must account for the 20px gutter between grids .container-12 .grid-1 { .container-16 .grid-1 { width: 60px; width: 40px; } } .container-12 .grid-2 { .container-16 .grid-2 { width: 140px; width: 100px; } } .container-12 .grid-3 { .container-16 .grid-3 { width: 300px; width: 160px; } }
  • 55. Putting containers and grids together .container-12 .grid-3 .grid-6 .grid-3
  • 56. Prefixes and su xes ‣ If you want to leave space between .container-12 .prefix-1 { columns, use a prefix padding-left: 80px; or su x class } .container-12 .suffix-1 { ‣ Prefix classes add padding-right: 80px; padding to the left of a } column ‣ Su x classes add padding to the right
  • 57. Adding a prefix and su x .container-12 .grid-4 .grid-3 .prefix-1 .grid-3 .suffix-1
  • 58. Multiple rows .container-12 .grid-12 .grid-4 .grid-3 .prefix-1 .grid-3 .suffix-1
  • 59. Multiple rows: markup <div class="container-12"> The container <div> defines the layout <!-- row 1 --> <div class="grid-12"> version in use This grid occupies the full width </div> <!-- row 2 --> <div class="grid-3"> One wide No need to put </div> each row in its own <div class="grid-4 prefix-1 suffix-1"> wrapping <div> Four wide with a prefix and suffix of one each </div> <div class="grid-3"> One wide </div> </div> <!-- /container -->
  • 60. Stack content vertically with nested grids .grid-6 .container-12 .grid-6 .grid-3 .grid-3 .grid-6
  • 61. Here’s the catch: Because each grid includes a 10px left and right margin, nesting grids can break your layout .grid-6 .container-12 .grid-6 .grid-3 .grid-6 .grid-3
  • 62. Alpha and omega fix broken nesting ‣ When nesting grids, use the alpha and omega classes to remove the margins ‣ alpha removes the left margin. It’s the first nested grid. ‣ omega removes the right margin. It’s the last nested grid.
  • 63. .grid-6 .container-12 .grid-3 .grid-3 .alpha .omega .grid-3 .grid-3 .grid-6 .alpha .omega .alpha removed .omega removed the left margin the right margin
  • 65. 960 Gridder: gridder.andreehansson.se Screenshot from gridder.andresshansson.se
  • 66. 960 Gridder module for Drupal: drupal.org/project/gridder Screenshot from Drupal.org
  • 67. Variable grid system generator: spry-soft.com/grids Screenshots from spry-soft.com/grids
  • 68. Grid systems based on 960.gs
  • 69. Fluid 960.gs: designinfluences.com/fluid960gs ‣ Variable-width version of 960.gs Screenshot from designinfluences.com/fluid960gs
  • 70. Typogridphy: csswizardry.com/typogridphy ‣ Typographical and grid layout CSS framework Screenshot from csswizardry.com/typogridphy
  • 73. About NineSixty ‣ NineSixty is the Drupal port of 960.gs ‣ Developed by Joon Park, aka dvessel on Drupal.org ‣ Intended to be used as a base theme Source: Drupal.org
  • 75. NineSixty’s improvements ‣ Content-first layout using “push” and “pull” classes ‣ Now part of 960.gs proper ‣ Dynamic grid widths based on context using ns() ‣ Debugging tools and grid visualization ‣ Right-to-left (RTL) language support
  • 76. Content-first layout ‣ A design convention in which the content is output as close to the top of the markup as possible ‣ Content should be output before all sidebars ‣ This can be very di cult to achieve on a site with one or more left columns
  • 77. Push and pull classes ‣ Content-first layout can be achieved in NineSixty by “pushing” the content grid to the right while “pulling” a sidebar to the left ‣ These classes use the same naming convention as .grid-X, .prefix-X, and .suffix-X, where X is the grid’s width: ‣ .push-X and .pull-X
  • 78. Push and pull values should match the grid value of the opposite grid <div class="container-12"> <div id="content" class="grid-6 push-3"> Match numbers to Content swap locations </div> <div id="sidebar-left" class="grid-3 pull-6"> Sidebar: Left </div> <div id="sidebar-right" class="grid-3"> Sidebar: Right </div> </div> Source: NineSixty’s README.txt
  • 79. Before adding push and pull .container-12 #content #sidebar-left #sidebar-right .grid-6 .grid-3 .grid-3 <div class="container-12"> <div id="content" class="grid-6"> Content </div> <div id="sidebar-left" class="grid-3"> Sidebar: Left </div> <div id="sidebar-right" class="grid-3"> Sidebar: Right </div> </div>
  • 80. After adding push and pull .container-12 #sidebar-left #content #sidebar-right .grid-3 .grid-6 .grid-3 .pull-6 .push-3 <div class="container-12"> <div id="content" class="grid-6 push-3"> Content </div> <div id="sidebar-left" class="grid-3 pull-6"> Sidebar: Left </div> <div id="sidebar-right" class="grid-3"> Sidebar: Right </div> </div>
  • 81. Dynamic grid widths ‣ In some cases, you may want grids to resize themselves when a region isn’t populated ‣ For example, a 3-6-3 layout should become 3-9 if the right column is empty ‣ Dynamic width assignment is handled using the ns() function ‣ Defined in template.php
  • 82. Structure of ns() These “pairs” Default subtract from the value default value ns('class-X', $region, Y, $region, Z, ...) ‣ class can be grid, prefix, suffix, push, or pull ‣ X, Y, and Z are all width values ‣ $region can be any theme region ‣ Use as many pairs as you like
  • 83. Implementing ns() From page.tpl.php: <div id="main" class="column <?php print ns('grid-16', $left, 4, $right, 3) . ' ' . ns('push-4', !$left, 4); ?>"> <?php print $content; ?> </div> <?php if ($left): ?> <div id="sidebar-left" class="column sidebar region grid-4 <? php print ns('pull-12', $right, 3); ?>"> <?php print $left; ?> </div> <?php endif; ?> <?php if ($right): ?> <div id="sidebar-right" class="column sidebar region grid-3"> <?php print $right; ?> </div> <?php endif; ?> Source: NineSixty’s page.tpl.php
  • 84. From #main: <?php print ns('grid-16', $left, 4, $right, 3) . ' ' . ns('push-4', !$left, 4); ?> If left sidebar is If right sidebar is Default present, subtract 4 present, subtract 3 width from default width. from default width. ns('grid-16', $left, 4, $right, 3) If left sidebar is not present, subtract Default 4 from the push value. This will result push value in no push, as 4-4 = 0 ns('push-4', !$left, 4) Source: NineSixty’s page.tpl.php
  • 85. From #sidebar-left: <?php php print ns('pull-12', $right, 3); ?> If right sidebar is Default present, subtract 3 pull value from default pull value ns('pull-12', $right, 3) Source: NineSixty’s page.tpl.php
  • 86. NineSixty in action ‣ Visit http://ninesixty.fkdemos.com to see how NineSixty... ‣ uses push and pull classes to generate content- first layout ‣ dynamically assigns grid widths based on context ‣ can be used to create di erent layouts
  • 87. Implementing a grid- based layout Using NineSixty to build your site
  • 88. When not to use a grid ‣ Implementing a grid will probably be impossible if your site’s layout... ‣ uses irregular column sizes ‣ has irregular margins or gutters ‣ has a width that isn’t divisible by a sane number
  • 89. Implementing a grid will be di cult — but not impossible — if your site’s layout... ‣ has gutter widths of odd numbers ‣ is fluid ‣ wasn’t designed on a grid
  • 90. Getting started ‣ Do not change the NineSixty theme on your site! ‣ Hacking NineSixty is like hacking core: It will make upgrading your site very di cult ‣ Instead, subtheme NineSixty or create a totally new theme based on NineSixty
  • 91. Subtheme ‣ This method is best if your site is (or can be) 960px wide and can utilize 12 or 16 columns ‣ Subtheming instructions and resources on Drupal.org: ‣ Subtheming quick and dirty ‣ Sub-themes, their structure and inheritance
  • 92. Build a new theme ‣ You should build a new theme when your site’s layout... ‣ isn’t 960px wide ‣ doesn’t use 12 or 16 columns ‣ It’s more e cient to use a new theme than to override virtually all of NineSixty’s CSS
  • 93. Do the math ‣ Be prepared to crunch numbers ‣ Building a new grid can be very confusing ‣ Spreadsheets can help you visualize columns, margins, and gutters Image source: Client project
  • 94. Examples 960.gs as a prototyping and development system
  • 95. Refresh Boston: 16 columns refreshboston.org
  • 96. Refresh Boston: 16 columns refreshboston.org
  • 99. Pepsi comp: 16 columns
  • 100. Pepsi comp: 16 columns
  • 101. AAFES comp: 12 columns Credits
  • 102. AAFES comp: 12 columns Credits
  • 105. Drupal.org redesign: 12 columns infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  • 106. Drupal.org redesign: 12 columns infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  • 107. Four Kitchens: 12 columns fourkitchens.com infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  • 108. Four Kitchens: 12 columns fourkitchens.com infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  • 110. Learn more about grids ‣ The Grid System: thegridsystem.org ‣ “The ultimate resource in grid systems” ‣ The Grid System’s Flickr pool ‣ My bookmarks tagged “gridsystems”: delicious.com/toddross/gridsystems
  • 111. Downloads ‣ 960 grid system: 960.gs ‣ NineSixty theme for Drupal: drupal.org/project/ ninesixty ‣ This and other presentations are available for download at fourkitchens.com/presentations
  • 112. Contact Todd ‣ Email: todd@fourkitchens.com ‣ also works for Google Chat and AIM ‣ Skype: toddatfk ‣ Twitter: twitter.com/toddross
  • 114. Credits ‣ “History of the grid” slides were ‣ This presentation was created by borrowed heavily from Khoi Vinh Nathan Smith of Fellowship Tech and Mark Boulton’s presentation and Todd Ross Nienkerk, co- Grids are Good and from founder of Four Kitchens, and Wikipedia delivered by Todd Ross Nienkerk ‣ Piet Mondriaan painting was found somewhere online. Copyright holder is unknown ‣ The items listed above are exempt from this presentation’s Creative Commons license
  • 115. All content in this presentation, except where noted otherwise, is Creative Commons Attribution- ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.