A presentation from J and Beyond 2018 in Cologne, Germany. In this session, Crystal of Lucid Fox will walk you through the steps she took to build Akeeba FEF, a CSS framework that Akeeba now uses to ensure their extensions are consistent with their brand across Joomla, WordPress, and standalone PHP software. You’ll learn about creating a design system, writing CSS in a way that’s easily maintained and upgraded, and tips on implementing this system across multiple platforms.

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

9. 2.
THE
PROCESS

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

42. QUESTIONS/
DISCUSSION
@CRYSTALENKA #JAB18

43. THANK
YOU!
slides will be tweeted
@crystalenka