1 / 13

Adapting a Site Template

Adapting a Site Template. Using Drupal Themes and SASS/LESS. Responsive Design. Screen size Reorder, show or hide. Some Tools to Use. SASS What are pre-processors Mixins! Little example Semantic CSS Vs. Non-semantic Frameworks Bootstrap Zurb Foundation Zen Grids. Remember!.

conan-gates
Download Presentation

Adapting a Site Template

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adapting a Site Template • Using Drupal Themes and SASS/LESS

  2. Responsive Design • Screen size • Reorder, show or hide

  3. Some Tools to Use • SASS • What are pre-processors • Mixins! • Little example • Semantic CSS Vs. Non-semantic • Frameworks • Bootstrap • Zurb Foundation • Zen Grids

  4. Remember! • Get a template • Use same framework or similar • Start locally • Easy Vs not so easy • Using classes • Using Mixins

  5. What we use • Fences • Block Class • Node Class • Views • DS & Extras • Field Groups • Panels • Views Responsive Grid • Flexslider / Nivo Slider • Title • Blockify • Extra Modules

  6. First Things First, Will It Look Nice? • The Template search. • What should I look for. • My rationale. • You are not alone.

  7. Try To M.I.S.S. This • Keep it in the front end. • Fix page.tpl.php only if needed (we want to avoid this) • Why I’ve done it and where

  8. And The Force May Be With Us If… • Start Top to bottom • Attack one section - Feature at a time • Convert to SASS / LESS when possible. • Use variables as crazy (Theme Colors, Fonts)

  9. Plan Wisely • Design Content types • What is in place. • Manage Display (DS). • Create Views (Global Text).. • Panels. • Existing Modules • JQuery Scripts

  10. The Grid Is The Backbone • Design the Grid per device • Adding grid clases • Using Mixins

  11. Fill It Nicely • Apply the “Prettiness”. • Use SASS Changes and create mixins as desired • Applying the javascripts. • Remember, You Are Not Alone.

  12. Check progress • Using Firebug to debug • Mobile debugging • Screen size vs remote debugging.

  13. What Am I Missing? • Shoot your questions and comments!

More Related