DOMINATE THE THEME LAYER August 21st.

1. DOMINATETHE THEME LAYERAugust 21st.

2. Jesper Wøldiche Rahkonen • Themer / architect at Bysted.Markup Marine /Journalist /Frontend United / • @woeldiche

3. Last chance to run. Before we get started…

4. Focus onthe themer.

5. It’s just OOCSS.Or smacss.

6. There will be slides with code.

7. There will be (more)slides without code.

8. Presenter will be opinionated.

9. Code available on Github.

10. A quick outline. In this session.

11. A beautifulbeast.But a still a beast.

12. Submissivemarkup is efficientmarkup.

13. Overview of the session. • 1 - The gentleway. • 2 - The dominatingway. • 3 - Submissive markup in four easy steps. • 4 - Toolsof domination.

14. A common approach. Dangers of a gentle touch.

15. Don’t let contribtrick you.

16. Results • Bloatedcss

17. Results • Bloated css • Tied to markup

18. Results • Bloated css • Tied to markup • Low extensibility

19. Results • Bloated css • Tied to markup • Low extensibility • High maintenance

20. Stuff you don’t want to do, really. Common pitfalls

21. Style by Drupal module • #form-campaignmonitor-signup h2 {Styles don’t go here…}

22. Style by Drupal module • #form-campaignmonitor-signup h2 a {Styles don’t go here…} • Low extensibility.

23. Style by Drupal module • #form-campaignmonitor-signup h2 a {Styles don’t go here…} • Low extensibility. • Sameblock, differentvisuals.

24. Style by page or content type • body.page-article h2 a {Styles don’t go here…} • #maincontent .meta a {Styles don’t go here…}

25. Style by page or content type • body.page-article h2 a {Styles don’t go here…} • #maincontent .meta a {Styles don’t go here…} • Redundantcode.

26. Style by page or content type • body.page-article h2 a {Styles don’t go here…} • #maincontent .meta a {Styles don’t go here…} • Redundant code. • Expensive to maintain.

27. Using tags as selectors .node .node-meta span {Styles don’t go here…}

28. Using tags as selectors .node .node-meta span {Styles don’t go here…} Tiesstyles to markup.Harder to re-use.

29. Using tags as selectors .node .node-meta span {Styles don’t go here…} Ties styles to markup.Harder to re-use. Sometimes the dateis <p>,sometimes <span>,sometimes <data>

30. Using tags as selectors .node .node-meta span {Styles don’t go here…} Ties styles to markup.Harder to re-use. Sometimes the date is <p>,sometimes <span>,sometimes <data> <a>, <img> etc. are the exceptions.

31. Styling headings by tag h1 { Styles don’t go here… } h2 { Styles don’t go here… } h3 { Styles don’t go here… }

32. Styling headings by tag h1 { Styles don’t go here… }h2 { Styles don’t go here… }h3 { Styles don’t go here… } Visual hierarchywill not always match outline

33. Styling headings by tag h1 { Styles don’t go here… }h2 { Styles don’t go here… }h3 { Styles don’t go here… } Visual hierarchy will not always match outline Low portability

34. Styling headings by tag h1 { Styles don’t go here… }h2 { Styles don’t go here… }h3 { Styles don’t go here… } Visual hierarchy will not always match outline Low portability Allyour headings might be <h1>

35. Trust me, it wants a firm hand… Dominate your markup!

36. Create architecturebased on designand businesslogic.

37. Build web systems.extensible,robust,portable.

38. Style objects, notelementsand pages.

39. Invest time for domination.

40. It pays off.

41. It pays off Lower maintenance,

42. It pays off Lower maintenance, Cheaper introductionof new features.

43. It pays off Lower maintenance, Cheaper introduction of new features. Leaner cssand faster front-end.

44. Submissive markup in four easy steps. Analyzedesign and specs. Streamlineand feedback with designer/client. Define objects and layout. Dominateand add styling hooks to markup.

45. Analyze design and specification. Analyze

46. Look beyondthe markup and modules.

49. Identify recurring patterns.