Your SlideShare is downloading. ×
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Foundation or Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Foundation or Twitter Bootstrap

2,270

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,270
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Who guess the logo? T-Shirt!!
  • MISS: Make it Simple Silly
  • Luke skywalker was not a jedi until he begun learning it from the beginning.
  • 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 • • Mixins! • Little example • • What are pre-processors 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 • Panels • Block Class • Views Responsive Grid • Node Class • Flexslider / Nivo Slider • Views • Title • DS & Extras • Blockify • Field Groups • 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 • Panels. • What is in place. • Existing Modules • Manage Display (DS). • JQuery Scripts • Create Views (Global Text)..
    • 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!

    ×