Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
- 1. NOT JUST A PRETTY FACE How to design and build a cross-CMS CSS framework @CRYSTALENKA #JAB18
- 2. ABOUT ME User Experience Consultant Front End Developer UI Designer Crystal Dionysopoulos @CRYSTALENKA #JAB18
- 3. The pros and cons of a DIY CSS framework, plus our starting project requirements. Intro 1 WHAT TO EXPECT IN THIS TALK How implementing FEF affected Akeeba’s extensions and workflow The Results 3 From design to code, 10 useful things we learned in the process. The Process 2 @CRYSTALENKA #JAB18
- 4. 1. INTRO
- 5. No really, LOTS of upfront work I’m not kidding. You will be committing a lot of time to this. Lots of upfront work. I mean, you’re building your own CSS framework, after all… Your code…you maintain it. As with any code you write, you’ll have to update it over time - and that takes time too. THE CONS #JAB18
- 6. BILBAO DESIGN 6 BUT IT IS WORTH IT! Or at least, we think so!
- 7. Lightweight and FAST Code Only build what you need, when you need it. Reduce the bloat and deliver better extensions! You’re In Control Make changes based on your own schedule and needs, as well as the needs of your audience. Ŏ Stay Visually Consistent Make sure your extensions provide a consistent experience for your users in Joomla! and WordPress. Easier to Maintain Same CSS framework across extensions and CMSs means more reusable code and less tweaking. WHY BOTHER? @CRYSTALENKA #JAB18
- 8. AKEEBA’S REQUIREMENTS Easy to convert to That meant not too many changes to the HTML or PHP structure, and easy-to-remember classes. ♥ Easy to adapt to We didn’t want to shock the users too much, so this was strictly a facelift - no functional changes. Flexible elements From structure to buttons, everything had to be flexible and easy to reuse. @CRYSTALENKA #JAB18
- 10. 2. THE PROCESS 10 tips which willhelp YOUR process
- 11. Know your audience and what you can do. 1 @CRYSTALENKA #JAB18 If you know your audience’s technical capabilities, you know when to play it safe and when to push the envelope. Future-proof when you can by using modern approaches like CSS Grid. APPROACH
- 12. 12 A CASE FOR CSS GRID Why you should just use it, already Two options for supporting older browsers: - fallback to mobile-first display (Grid default) - polyfill
- 14. Auto-fill repeating tracks with CSS Grid, inspired by Rachel Andrews https://codepen.io/rachelandrew/pen/GZQYOL The magic bit: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- 15. BILBAO DESIGN CSS GRID RESOURCES Grid by Example - Rachel Andrews https://gridbyexample.com CSS Grid Changes Everything - Morten Rand-Hendriksen https://mor10.com/wceu2017/ A Complete Guide to Grid - CSS Tricks https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Grid Layout - MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
- 16. Have a plan, but be open-minded. It’s good to have an idea of where you’re going, but it can be unproductive to stick to it religiously. When things go sideways, sometimes it’s better to go with the flow. 2 @CRYSTALENKA #JAB18 APPROACH
- 17. Find your building blocks, or “atoms” This will help your design look good, and also will help you later when coding as you can have cleaner, more reusable CSS. 3 @CRYSTALENKA #JAB18 APPROACH& DESIGN
- 24. BILBAO DESIGN DESIGN SYSTEM RESOURCES Atomic Design - Brad Frost http://atomicdesign.bradfrost.com/table-of-contents/
- 25. Be consistent with your colors & style Stick to your brand colors and others in that range so your extensions are easily recognizable on any platform. Pick an icon font (or go without) and stick to it. 4 @CRYSTALENKA #JAB18 APPROACH& DESIGN
- 26. BILBAO DESIGN COLOR PALETTE RESOURCES Adobe Color color.adobe.com Coolers Color Palette Generator coolers.co Paletton paletton.com
- 27. Use a preprocessor and make life easy Using SASS or LESS allows you to be more organized from the beginning, which helps you maintain the framework in the long-term. 5 @CRYSTALENKA #JAB18 APPROACH& DESIGN& CODE
- 28. Organize your code based on purpose Purposely-organized code is easier to come back to later than location-based code. Extensions evolve over time! 6 @CRYSTALENKA #JAB18 APPROACH& DESIGN& CODE
- 31. Build from outside in, not top to bottom This helps you think in a more function-based mindset. Start with the structure and work your way in. You’re likely to have more maintainable code as a result. 7 @CRYSTALENKA #JAB18 APPROACH& DESIGN& CODE
- 32. Namespace ALL the things This prevents conflicts with any too-generic CSS loaded by the CMS, and makes it easier to target so you never have to use !important. Example: .akeeba-button instead of .button 8 @CRYSTALENKA #JAB18 APPROACH& DESIGN& CODE
- 33. Don’t bloat your JavaScript Write what you need - it’s entirely possible to do it all with just a little vanilla JS. (You don’t need that giant JavaScript framework.) @CRYSTALENKA #JAB18 APPROACH& DESIGN& CODE 9
- 34. Have CMS-specific stylesheets No matter how hard you try, you will end up needing to make small tweaks for each CMS. Keep this separate from “common” code. @CRYSTALENKA #JAB18 APPROACH& DESIGN& CODE 10
- 35. It’s a journey, not a destination. You will need to maintain your framework as technology changes, your audience matures, and your knowledge grows. Things will get added and removed over time - enjoy the process. :) 11 @CRYSTALENKA #JAB18 APPROACH& DESIGN& CODE& BONUS
- 36. 3. THE RESULTS
- 37. BEFORE Akeeba Backup v. 5.6.3 @CRYSTALENKA #JAB18
- 38. AFTER Akeeba Backup v. 6.0.0 @CRYSTALENKA #JAB18
- 39. BEFORE Akeeba Backup v. 5.6.3 @CRYSTALENKA #JAB18
- 40. AFTER Akeeba Backup v. 6.0.0 @CRYSTALENKA #JAB18
- 41. AKEEBA IS HAPPY File size didn’t increase. The packaged Akeeba extensions are no larger than they were before, but look a lot better. 2 3 Much faster page rendering. By ditching Bootstrap and jQuery, Akeeba components now load way faster because fewer page redraws. Changes are predictable. Akeeba can make updates to the CSS when they need to, within their own development timeline. 1 @CRYSTALENKA #JAB18
- 43. THANK YOU! slides will be tweeted @crystalenka