Today’s workshop is going to be pretty hectic; there’s a lot to get through and I’m keen not to spend too much time talking at you. Below is a list of things I’d like to cover and the rough order in which I want to go about it but… Let’s just enjoy ourselves, freestyle it and hammer out some code! Interrupt me shout out, open up discussion and let’s have fun!

• Intro
• Setup
  • Get the repo
  • Get Sass working
    • Intro to Sass for any who need it
  • Have a peek round the repo
• Look at the design
  • Rationalise/discuss it
  • Deconstruct it
• Code theory
  • A shift in thought
    • The web has changed
    • The three stakeholders – who we need to keep happy
  • SRP
  • Selectors
  • Specificity
  • Semantics are silly
  • Naming things
  • Naming conventions
  • Shearing layers
• Let’s code!
  • Familiarise ourselves with the codebase
    • This looks huuuuuuge!
    • Look at its structure, what lives where (and why)
  • Using the above, let’s build some stuffs!
  • No layout.
• Layout
  • Layout should be a component unto itself
  • Put all our components into a page
  • Done.
• Questions, recap.

1. settings/ – Variables, feature switches and other project specific settings. These are defined first and will be picked up and used by the framework later on.
2. tools/ – Mixins and functions to make tasks easier. These appear early on so that they can be utilised in the main body of the codebase.
3. generic/ – Resets, global box-sizing. These styles are really far reaching; they underpin every element we place on the page.
4. base/ – Base elements, unclassed h1, ol, etc. These are semantic HTML elements that require some base styling for when they exist outside of a component context (e.g. a regular, bulleted list in some body copy).
5. objects/ – design patterns, objects, abstractions and constructs.
6. gui/ – Designed components and modules. These build on top of semantic HTML elements and are referred to mainly through class selectors.
7. trumps/ – Style trumps, helper classes and overrides. These need to override any other styles and thus come last. It is not uncommon for these styles to carry !important.

• Page background color: #f9f9f9
• Page text color: #424242
• Pink: #f43059
• Nav border color: #e0e0e0
• Nav grad start: #fafafa
• Nav grad stop: #e1e1e1
• Grey box grad start: #535657
• Grey box grad stop: #414445
• Pink button grad start: #f54469
• Pink button grad stop: #d12a4c
• Pink button border color: #bd2343
• Grey button grad start: #30312f
• Grey button grad stop: #292a28
• Grey button border color: #1a1b19
• Solid grey box color: #e8e1df
• h1:
• h2:
• h3:
• h4:
• h5:
• h6: