1 / 95

DOMINATE THE THEME LAYER August 21st.

Learn how to create efficient and robust web systems by dominating your markup. Discover the dangers of a gentle touch and the benefits of submissive markup. Analyze designs and specifications, define objects and layout, and add styling hooks to your markup for maximum control and extensibility.

williet
Download Presentation

DOMINATE THE THEME LAYER August 21st.

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. 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.

  47. Identify recurring patterns.

More Related