Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend++

1,139 views

Published on

Frontend++

Published in: Technology
  • Great slide show! Is there any audio or video that you've posted to accompany it? I may use some of your slides for a new introduction video I'm putting together for ConnextCMS.com, an open source front end extension for KeystoneJS.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Frontend++

  1. 1. FrontEnd++ with sh*t slides
  2. 2. How are we doing? Golin Styleeeeeee. Recognise
  3. 3. We WON!!!!!! well done team
  4. 4. AWARD WINNING FrontEnd++ with sh*t slides
  5. 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. 6. FrontEnd Boilerplate
  7. 7. What can we do better better? us? wha’ ya sayin bruva
  8. 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. 9. Inconsistencies • Between code styles • Get to know the same front end • Use the same modules, mixins • Normalise the designs • Whitespace
  10. 10. I heart buttons • I don’t heart buttons
  11. 11. Clients Give me new button style
  12. 12. Sponsors
  13. 13. Theming • themes - color-set1 - color-set2 - variables
  14. 14. Theming Issues
  15. 15. Style Guides • Consistency with buttons • Consistency with colours • Consistency with spacing • Consistency with elements • tables • infographics • buttons • forms
  16. 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. 17. Style Guides III
  18. 18. Style Guides IV
  19. 19. Going that extra mile his phrase is BANNED
  20. 20. Transitions / Animations • Easy • Quick • Be creative • Use and create mixins • Impress PMs and Clients
  21. 21. Mix it up • use, create, refactor
  22. 22. Separation of Concerns • use attributes for common js functionality
  23. 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!

×