Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to make Awesomesauce

mortendk
January 03, 2012

How to make Awesomesauce

Drupalcon Chicago 2011 presentation about the fun in theming a drupal site ;)

mortendk

January 03, 2012
Tweet

More Decks by mortendk

Other Decks in Design

Transcript

  1. how to make awesomesauce! WITH DRUPAL7 in 45 minutes flat!

    drupalcon chicago 2011 #d7theming onsdag den 1. juni 2011
  2. mortendk • certified to rock? • i made the awesomesauce

    • lead for copenhagen 2010 • frontend united! • in drupal since 4.7 • i made microsoft say sorry for ie6 (& look good!) onsdag den 1. juni 2011
  3. goal • a theme we can come back to in

    12 months • a theme that a client can work with, without breaking stuff • a theme thats not filled with a ton of crap markup • a theme that can be changed in 32131$045 ways onsdag den 1. juni 2011
  4. brussels 5 years ago: ★ “We are tired of designers

    telling us that drupal looks like shit” - 3:00 am friday DrupalCon Brussels onsdag den 1. juni 2011
  5. Developer Those who work with the functionality & wanna have

    it to work epic onsdag den 1. juni 2011
  6. “Designer” Those who work with the frontend & wanna have

    it to look epic onsdag den 1. juni 2011
  7. building blocks last minut 10 % seo 13,07 % ie

    errors 1,96 % graphic design 13,73 % ux 16,99 % content 18,30 % engine 26,14 % onsdag den 1. juni 2011
  8. pre theme phase • draw all pages • what models

    are in use? • make sure “they” dont change the fieldnames! • plan your regions • is the site locked down? ... hint: its not! onsdag den 1. juni 2011
  9. round & round • #1 talk with the designer •

    talk with ux (did they talk with designer?) • talk with designer... • hit designer for making dump decissions onsdag den 1. juni 2011
  10. round & round • #2 talk with developers • did

    they build all the elements? • did they add (more) .css to the css “pile of crap” • hit the developers. • hit em again & again onsdag den 1. juni 2011
  11. round & round • #3 talk with project leads •

    say yes to something about seo • tell em that he’s the boss ... like a boss • yadi yadi well keep deadline if you dont change anything onsdag den 1. juni 2011
  12. it must be perfect! • everything is durable if you

    have all the time & money in the world ... • for the rest of us theres display:none & !importent onsdag den 1. juni 2011
  13. name game • make sure “they” dont change the fieldnames

    • use the regions class name • split the css files into node.css, page,css, fields.css etc. onsdag den 1. juni 2011
  14. Drupal Core theme Module theme site Module Module Module css

    css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css onsdag den 1. juni 2011
  15. css files • Stop adding crap! • only add if

    its nessesary • its not a reason “it looks pretty” onsdag den 1. juni 2011
  16. .base.css • module.base.css • for all you basic needs -

    ajax hotness, stuff that is really important • the stuff the theme shoudnt mess with onsdag den 1. juni 2011
  17. .theme.css • module.theme.css • if you really need colors &

    pretty stuff this is the place • anywhere else: punishment onsdag den 1. juni 2011
  18. its a secret! • modulename.theme.css is not widely used yet

    • d6: $field_fieldname_region never again! • tell you developers onsdag den 1. juni 2011
  19. tomorrow 11:00 • the hunt is starting • module developers

    be aware we will find you! onsdag den 1. juni 2011
  20. less • or sass or whatever • define grid classes

    that can be used for both the markup & css • tap easy into anything in a drupal site onsdag den 1. juni 2011
  21. its a g-thing • g1 - gwhatever # of columns

    • no outer gutters • gf • gc • upcoming theme: “tema” onsdag den 1. juni 2011
  22. theme_hook_suggestions • html • page • region • node •

    block • field • your mamma! onsdag den 1. juni 2011
  23. drupal design camp germany 24 - 26 june ...its in

    europe! onsdag den 1. juni 2011
  24. What did you think? Locate this session on the DCC

    website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks! onsdag den 1. juni 2011