SlideShare ist ein Scribd-Unternehmen logo

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Acquia
Acquia
AcquiaField Marketing Manager um Acquia

Too many responsive websites fall into the "move the sidebars around" trap and end up looking the same as any other responsive site. By combining the CSS of Zen Grids and the smart markup of the Zen 5 theme, you can create a stellar, unique responsive design for your website with ease. Zen has always been a popular starting point for building Drupal themes, but the new Zen 5 has been re-written from the ground-up with updated best practices including HTML5, Modernizr integration, Normalize, IE conditional classes, responsive layouts, and, best of all, Sass and Compass integration. Zen Grids is an all new project, independent from the Zen theme. The Zen Grids system reinvents the flexible, but complicated CSS layout method in old versions of the Zen theme, transforming it into a radically simplified process using the power of Sass. Where traditional grid systems (like 960.gs) often don't scale to match a responsive design's requirements, Zen Grids makes it incredibly easy to create amazing responsive layouts in just a couple lines of code.

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

1 von 32
Downloaden Sie, um offline zu lesen
Creating Responsive
Drupal Sites with Zen Grids
and the Zen 5 Theme
John Albin Wilkins and Dana DeMet
Palantir.net
About Palantir.net
• Founded in 1996; working with Drupal since 2006
• Web strategy, design, and development firm
• Team of senior-level Drupal and Web experts
• Leading contributors to Drupal core, contributed
  modules, and community

• Enterprise Select Acquia Partner
Palantir and Responsive Design

• Responsive Web Design is the sustainable
  approach for building “mobile-first” sites

• The mobile device landscape is growing and
  changing rapidly

• Zen 5 and Zen Grids are built to embrace that
  change

• Zen 5 and Zen Grids are battle-tested and ready to
  use today
http://drupal.org/project/zen




                              00, 000
                          er 7 ads!
                        Ov nlo
                         dow
+
Zen 7.x-5.0 is the 5th major release.
+ Normalize.css
                  + Respond.js
+ Compass            + Zen Grids
    + Responsive Design


                          +
+ ARIA + Mobile First
               + Sass    + Drush
    + HTML5 Shiv + IE Conditional Classes
                                 + RTL
           + Accessibility

Recomendados

Drupal Camp Manila 2014 - Theming with Zen
Drupal Camp Manila 2014 - Theming with ZenDrupal Camp Manila 2014 - Theming with Zen
Drupal Camp Manila 2014 - Theming with ZenJapo Domingo
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build themDick Olsson
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsSuzanne Dergacheva
 
Introduction to the Drupal - Web Experience Toolkit
Introduction to the Drupal - Web Experience ToolkitIntroduction to the Drupal - Web Experience Toolkit
Introduction to the Drupal - Web Experience ToolkitSuzanne Dergacheva
 
DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014Suzanne Dergacheva
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateLaura Scott
 

Más contenido relacionado

Was ist angesagt?

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva
 
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinCreating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinSuzanne Dergacheva
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers PerspectiveMediacurrent
 
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarCreating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarSuzanne Dergacheva
 
Drupal 7 Theme System
Drupal 7 Theme SystemDrupal 7 Theme System
Drupal 7 Theme SystemPeter Arato
 
Using Display Suite / Context to Build your Drupal Site
Using Display Suite / Context to Build your Drupal SiteUsing Display Suite / Context to Build your Drupal Site
Using Display Suite / Context to Build your Drupal SiteMatthew Wetmore
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundationsean_todd
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationMelanie Archer
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingJamie Schmid
 
How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseDavid Yeiser
 
Responsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationResponsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationSolTech, Inc.
 
Drupal Site Building Checklist from DrupalCamp New Jersey
Drupal Site Building Checklist from DrupalCamp New JerseyDrupal Site Building Checklist from DrupalCamp New Jersey
Drupal Site Building Checklist from DrupalCamp New JerseySuzanne Dergacheva
 
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Andrea Tarr
 

Was ist angesagt? (20)

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
A Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 MinutesA Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 Minutes
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon DublinCreating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
Creating Layouts and Landing Pages for Drupal 8 - DrupalCon Dublin
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarCreating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
Drupal 7 Theme System
Drupal 7 Theme SystemDrupal 7 Theme System
Drupal 7 Theme System
 
Using Display Suite / Context to Build your Drupal Site
Using Display Suite / Context to Build your Drupal SiteUsing Display Suite / Context to Build your Drupal Site
Using Display Suite / Context to Build your Drupal Site
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress Themeing
 
How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public Release
 
HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
 
Responsive Web Design using ZURB Foundation
Responsive Web Design using ZURB FoundationResponsive Web Design using ZURB Foundation
Responsive Web Design using ZURB Foundation
 
Drupal Site Building Checklist from DrupalCamp New Jersey
Drupal Site Building Checklist from DrupalCamp New JerseyDrupal Site Building Checklist from DrupalCamp New Jersey
Drupal Site Building Checklist from DrupalCamp New Jersey
 
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
 

Destacado

Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式Chris Wu
 
Multimedia handing in Drupal 7, done better with the Media module
Multimedia handing in Drupal 7, done better with the Media moduleMultimedia handing in Drupal 7, done better with the Media module
Multimedia handing in Drupal 7, done better with the Media moduleJacob Singh
 
Kung Fu Therapy
Kung Fu TherapyKung Fu Therapy
Kung Fu Therapycortabyron
 
Using Grids For Layout
Using Grids For LayoutUsing Grids For Layout
Using Grids For LayoutJoshua Bullock
 
Presentation Zen Workshop
Presentation Zen WorkshopPresentation Zen Workshop
Presentation Zen WorkshopCarrie Moran
 
The Art of Presentation II. Following the ZEN path. PREPARATION
The Art of Presentation II. Following the ZEN path. PREPARATIONThe Art of Presentation II. Following the ZEN path. PREPARATION
The Art of Presentation II. Following the ZEN path. PREPARATIONEduardo S. de la Fuente
 
Japanese Landscape
Japanese Landscape Japanese Landscape
Japanese Landscape Sai Yaswanth
 
網站壓力測試與實戰
網站壓力測試與實戰網站壓力測試與實戰
網站壓力測試與實戰Hsu Ping Feng
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsLinkedIn
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging ChallengesAaron Irizarry
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 

Destacado (15)

Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式
 
Multimedia handing in Drupal 7, done better with the Media module
Multimedia handing in Drupal 7, done better with the Media moduleMultimedia handing in Drupal 7, done better with the Media module
Multimedia handing in Drupal 7, done better with the Media module
 
Kung Fu Therapy
Kung Fu TherapyKung Fu Therapy
Kung Fu Therapy
 
Using Grids For Layout
Using Grids For LayoutUsing Grids For Layout
Using Grids For Layout
 
Fluid - The Zen of Templating
Fluid - The Zen of TemplatingFluid - The Zen of Templating
Fluid - The Zen of Templating
 
Presentation Zen Workshop
Presentation Zen WorkshopPresentation Zen Workshop
Presentation Zen Workshop
 
The Art of Presentation II. Following the ZEN path. PREPARATION
The Art of Presentation II. Following the ZEN path. PREPARATIONThe Art of Presentation II. Following the ZEN path. PREPARATION
The Art of Presentation II. Following the ZEN path. PREPARATION
 
Japanese Landscape
Japanese Landscape Japanese Landscape
Japanese Landscape
 
網站壓力測試與實戰
網站壓力測試與實戰網站壓力測試與實戰
網站壓力測試與實戰
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Ähnlich wie Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassClaudina Sarahe
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application DesignBryce Kerley
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of LayoutStephen Hay
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAidan Foster
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compassChris Lee
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?glen_a_smith
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and ReadyDenise Jacobs
 
Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Hajas Tamás
 

Ähnlich wie Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme (20)

Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
The Future State of Layout
The Future State of LayoutThe Future State of Layout
The Future State of Layout
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Sass compass
Sass compassSass compass
Sass compass
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 

Mehr von Acquia

Acquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdfAcquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdfAcquia
 
Acquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdfAcquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdfAcquia
 
Taking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next LevelTaking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next LevelAcquia
 
CDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdfCDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdfAcquia
 
May Partner Bootcamp 2022
May Partner Bootcamp 2022May Partner Bootcamp 2022
May Partner Bootcamp 2022Acquia
 
April Partner Bootcamp 2022
April Partner Bootcamp 2022April Partner Bootcamp 2022
April Partner Bootcamp 2022Acquia
 
How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story Acquia
 
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CXUsing Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CXAcquia
 
Improve Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development WorkflowImprove Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development WorkflowAcquia
 
September Partner Bootcamp
September Partner BootcampSeptember Partner Bootcamp
September Partner BootcampAcquia
 
August partner bootcamp
August partner bootcampAugust partner bootcamp
August partner bootcampAcquia
 
July 2021 Partner Bootcamp
July  2021 Partner BootcampJuly  2021 Partner Bootcamp
July 2021 Partner BootcampAcquia
 
May Partner Bootcamp
May Partner BootcampMay Partner Bootcamp
May Partner BootcampAcquia
 
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASYDRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASYAcquia
 
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead MachineWork While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead MachineAcquia
 
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B LeadsAcquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B LeadsAcquia
 
April partner bootcamp deck cookieless future
April partner bootcamp deck  cookieless futureApril partner bootcamp deck  cookieless future
April partner bootcamp deck cookieless futureAcquia
 
How to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutionsHow to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutionsAcquia
 
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...Acquia
 
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021Acquia
 

Mehr von Acquia (20)

Acquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdfAcquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdf
 
Acquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdfAcquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdf
 
Taking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next LevelTaking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next Level
 
CDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdfCDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdf
 
May Partner Bootcamp 2022
May Partner Bootcamp 2022May Partner Bootcamp 2022
May Partner Bootcamp 2022
 
April Partner Bootcamp 2022
April Partner Bootcamp 2022April Partner Bootcamp 2022
April Partner Bootcamp 2022
 
How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story
 
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CXUsing Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
 
Improve Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development WorkflowImprove Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development Workflow
 
September Partner Bootcamp
September Partner BootcampSeptember Partner Bootcamp
September Partner Bootcamp
 
August partner bootcamp
August partner bootcampAugust partner bootcamp
August partner bootcamp
 
July 2021 Partner Bootcamp
July  2021 Partner BootcampJuly  2021 Partner Bootcamp
July 2021 Partner Bootcamp
 
May Partner Bootcamp
May Partner BootcampMay Partner Bootcamp
May Partner Bootcamp
 
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASYDRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
 
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead MachineWork While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
 
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B LeadsAcquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
 
April partner bootcamp deck cookieless future
April partner bootcamp deck  cookieless futureApril partner bootcamp deck  cookieless future
April partner bootcamp deck cookieless future
 
How to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutionsHow to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutions
 
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
 
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
 

Último

My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!KivenRaySarsaba
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfDomotica daVinci
 
Enhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersEnhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersThousandEyes
 
M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____Aathiraju
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersOnePlan Solutions
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologySafe Software
 
A Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car TechnologyA Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car TechnologyKumar Bipin
 
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptxssuser796efb
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
Azure Migration Guide for IT Professionals
Azure Migration Guide for IT ProfessionalsAzure Migration Guide for IT Professionals
Azure Migration Guide for IT ProfessionalsChristine Shepherd
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxBrandon Minnick, MBA
 
AWS for the beginning is cloud computing
AWS for the beginning  is  cloud computingAWS for the beginning  is  cloud computing
AWS for the beginning is cloud computingkajalghule1
 
Put a flag on it. A busy developer's guide to feature toggles.
Put a flag on it. A busy developer's guide to feature toggles.Put a flag on it. A busy developer's guide to feature toggles.
Put a flag on it. A busy developer's guide to feature toggles.Mateusz Kwasniewski
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfDomotica daVinci
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Daniel Toomey
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfDomotica daVinci
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education pptsafnarafeek2002
 
Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...
Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...
Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...Raphaël PINSON
 

Último (20)

My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdf
 
Enhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for PartnersEnhancing SaaS Performance: A Hands-on Workshop for Partners
Enhancing SaaS Performance: A Hands-on Workshop for Partners
 
M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____M.Aathiraju Self Intro.docx-AD21001_____
M.Aathiraju Self Intro.docx-AD21001_____
 
Navigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio LeadersNavigating the Never Normal Strategies for Portfolio Leaders
Navigating the Never Normal Strategies for Portfolio Leaders
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI Technology
 
A Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car TechnologyA Comprehensive Theoretical Overview of Self-Driving Car Technology
A Comprehensive Theoretical Overview of Self-Driving Car Technology
 
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
2) Presentation_Overview_ISO_16140-3_Method_verification_20210322.pptx
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
Azure Migration Guide for IT Professionals
Azure Migration Guide for IT ProfessionalsAzure Migration Guide for IT Professionals
Azure Migration Guide for IT Professionals
 
Introduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptxIntroduction to Serverless with AWS Lambda in C#.pptx
Introduction to Serverless with AWS Lambda in C#.pptx
 
AWS for the beginning is cloud computing
AWS for the beginning  is  cloud computingAWS for the beginning  is  cloud computing
AWS for the beginning is cloud computing
 
5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion5 Tech Trend to Notice in ESG Landscape- 47Billion
5 Tech Trend to Notice in ESG Landscape- 47Billion
 
Put a flag on it. A busy developer's guide to feature toggles.
Put a flag on it. A busy developer's guide to feature toggles.Put a flag on it. A busy developer's guide to feature toggles.
Put a flag on it. A busy developer's guide to feature toggles.
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
 
Russia Ukraine war Cyberspace operations (2022-2024)
Russia Ukraine war Cyberspace operations (2022-2024)Russia Ukraine war Cyberspace operations (2022-2024)
Russia Ukraine war Cyberspace operations (2022-2024)
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education ppt
 
Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...
Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...
Cfgmgmtcamp 2024 — eBPF-based Security Observability & Runtime Enforcement wi...
 

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

  • 1. Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme John Albin Wilkins and Dana DeMet Palantir.net
  • 2. About Palantir.net • Founded in 1996; working with Drupal since 2006 • Web strategy, design, and development firm • Team of senior-level Drupal and Web experts • Leading contributors to Drupal core, contributed modules, and community • Enterprise Select Acquia Partner
  • 3. Palantir and Responsive Design • Responsive Web Design is the sustainable approach for building “mobile-first” sites • The mobile device landscape is growing and changing rapidly • Zen 5 and Zen Grids are built to embrace that change • Zen 5 and Zen Grids are battle-tested and ready to use today
  • 4. http://drupal.org/project/zen 00, 000 er 7 ads! Ov nlo dow
  • 5. + Zen 7.x-5.0 is the 5th major release.
  • 6. + Normalize.css + Respond.js + Compass + Zen Grids + Responsive Design + + ARIA + Mobile First + Sass + Drush + HTML5 Shiv + IE Conditional Classes + RTL + Accessibility
  • 8. Drupal 7 Drupal 7 + Fences <div class="field-field-NAME"> <div class="field-label"> <h3 class="field-label"> LABEL:&nbsp; LABEL </div> </h3> <div class="field-items"> <ELEMENT class="field-NAME"> <div>VALUE 1</div> VALUES <div>VALUE 2</div> </ELEMENT> </div> </div>
  • 9. Building a Responsive Drupal Site • Configure Drupal fields with Fences • Build a Zen sub-theme • Design your layouts with Zen Grids and Sass
  • 10. Building a Responsive Drupal Site • Configure Drupal fields with Fences • Build a Zen sub-theme • Design your layouts with Zen Grids and Sass
  • 11. Guiding principle of Zen Zen makes no assumptions about your content and your design. It does the most minimally useful thing for all designs and then gets the hell out of your way. http://palantir.net/blog/all-new-zen-same-guiding-principles
  • 12. Guiding principle of Zen Lean, semantic HTML5 markup Flexible, light-weight responsive framework http://palantir.net/blog/all-new-zen-same-guiding-principles
  • 13. Drush + Zen = ♡ > drush dl zen (download Zen) > drush cc all (clear the cache) > drush zen "My First Sub-theme" first --description="Our example theme." --without-rtl Starter kit for "My First Sub-theme" created in: /sites/all/themes/first
  • 14. Configure your sub-theme /admin/appearance
  • 15. Configure your sub-theme Turn off “Add Respond.js” if you want to use a custom Modernizr script.
  • 21. em or px-based gutters box-sizing: border-box; Set your gutter (padding) in em or px. Set your column widths in %. http://paulirish.com/2012/box-sizing-border-box-ftw/
  • 22. The obvious layout method: region-based layouts region-based layouts in rk 8 ta al S Dr up “Multi-Device Layout Patterns” http://www.lukew.com/ff/entry.asp?1514
  • 23. Field-based grid item Each field becomes a layouts http://www.palantir.net/experience
  • 24. + A Drupal Project A Sass/Compass Project
  • 25. Zen Grids is a separate project ( but it’s included with the Zen theme ) http://zengrids.com
  • 26. Writing raw layout CSS is hard • Writing 3 to 5 separate layouts with raw CSS is really, really, really, really, really hard. • Sass makes its easy. • Sass is just CSS syntax + awesomesauce. • Learning Sass will save you time. Immediately.
  • 27. Sass in 2 minutes • Variables • Mixins $blue: #3bbfce; @mixin left($distance) { float: left; .text { margin-left: $distance; color: $blue; } } .box { .picture { border-color: $blue; @include left(10px); } } .text { .picture { color: #3bbfce; float: left; } margin-left: 10px; .box { } border-color: #3bbfce; } http://sass-lang.com
  • 28. Sass in 2 minutes • Write in Sass. • Have a Sass utility generate the CSS. • Deploy the CSS. http://sass-lang.com
  • 29. Compass in 1 minute • Compass is a library of pre-defined Sass mixins. • Includes CSS3 mixins. ( Never have to mess with vendor prefixes again. ) • Includes vertical rhythm helper mixins. • Includes standardized IE Legacy variables. (Turn on or off IE 6/7/8 support with ease.) $legacy-support-for-ie6: false; • Includes image sprite generation mixins. • Zen Grids requires Compass. http://compass-style.org
  • 30. Installation • Command-line junkies: Install Compass and Sass for free at: http://sass-lang.com/tutorial.htmlAnd then run: gem install compass gem install zen • Command-line haters: Get Fire.app for $14 at: http://fireapp.handlino.com
  • 31. Zen Grids LIVE DEMO! http://zengrids.com
  • 32. Thanks! John Albin Wilkins Follow me on Twitter @JohnAlbin Visit Palantir at www.palantir.net Follow us on Twitter @palantir

Hinweis der Redaktion

  1. Making the Web a better place means: technology - experience - content - together and in harmony
  2. * Luke Wro-BLEW-ski * 2 problems — 1.) boring 2.) dangerous * DANGER: content — what goes in the the other regions?