Frontend++

1. FrontEnd++
with sh*t slides

2. How are we doing?
Golin Styleeeeeee. Recognise

3. We WON!!!!!!
well done team

4. AWARD WINNING
FrontEnd++
with sh*t slides

5. SCSS Structure
• Tools
- elements / mixins (arrows, buttons)
- helpers (clearfixes, hidden visibility, mqs)
- grids (if you want to use them)
- transitions
• Settings
- colours
- fonts
- spacing
• partials
• base
- normalize
- base
- layout
• globals
- header
- footer
- nav
• components
- buttons
- media-block
• pages
- find-a-friend
- contact-us

6. FrontEnd Boilerplate

7. What can we do better
better? us? wha’ ya sayin bruva

8. Always use icon fonts
• Wherever possible
• works on everything (even oldIE)
• Less need for SPRITES (they can do one)
• Future proof
(Caters for iPhone11 Plus Plus)

9. Inconsistencies
• Between code styles
• Get to know the same front end
• Use the same modules, mixins
• Normalise the designs
• Whitespace

10. I heart buttons
• I don’t heart buttons

11. Clients
Give me new button style

12. Sponsors

13. Theming
• themes
- color-set1
- color-set2
- variables

14. Theming Issues

15. Style Guides
• Consistency with buttons
• Consistency with colours
• Consistency with spacing
• Consistency with elements
• tables
• infographics
• buttons
• forms

16. Style Guides II
• When?
Design phrase, after first set of designs have been
approved
• Why?
Designers: When a new designer takes over, there’s a
clear point of reference for existing styles, no need to
trawl through loads of pages.
Devs: Helps us to keep our code modular, take the
aspects of the style guide and code them individually.
• Time / Money saving?
You bet!

17. Style Guides III

18. Style Guides IV

19. Going that extra mile
his phrase is BANNED

20. Transitions / Animations
• Easy
• Quick
• Be creative
• Use and create mixins
• Impress PMs and Clients

21. Mix it up
• use, create, refactor

22. Separation of Concerns
• use attributes for common js functionality

23. General Improvements
• Avoid using grids unnecessarily
• * { box-sizing:border-box }
• Re-factor straight away
• Responsive mixins
• %’s over px’s
• Keep media queries within the elements
• Try not to overuse %silent-classes
• If you need to center vertically, consider absolute positioning
first (you can maybe utilise image-size() compass method)
• Keep your JS Modular on larger projects
• Keep experimenting!