Scalable front-end architecture with Bootstrap 3 + Atomic CSS

Scalable front-end architecture
with Bootstrap 3 + Atomic CSS

Let’s do some intros
I’m dying to meet you, kindred spirits :)

Hayden Bleasel
Product Designer, Full-Stack
Developer, Entrepreneur.
Head of Product at Spaceship.
@haydenbleasel on the internet.
Nice to meet you.

Quick Question
How many of you know what Bootstrap is?

Quick Question
How many of you know what Atomic CSS is?

The Front-End
• Web development on the client’s side. Everything
the user sees, clicks, smiles at or gets aggravated
by. Kinda extremely important when making a site.
• Used to just refer to HTML, CSS and a little bit of JS
but since the Javascript Uprising™ it can also refer
to building the entirety of your website (database
infrastructure and everything) on the user’s
computer.
• But that’s for a whole other discussion…

What is Bootstrap and why do I care?
Kind of a big question and a bit of a history lesson.

So what is Bootstrap?
• Bootstrap was a hack-week project between two homies at Twitter
that spawned a community of 9 maintainers and 839 contributors.
• It was the idea that we could create a “skeleton framework” that
every website on the web used. They’re on 3.4% right now
(approximately 12,773,795 websites).
• It’s the most starred repo on Github.
• 15,801 commits, 49,318 forks, 107,745 stars.
• Pretty impressive for a slab of CSS and JS.
• Bootstrap 4 is in alpha now.

WTF is Bootstrap tho?
• It’s around 10,000 lines of CSS and JavaScript that you can
include in your website with two lines of code.
• You copy markup (HTML) from their documentation and it
renders some pretty boilerplate elements.
• It styles elements like forms, buttons and tables.
• It adds CSS components like navbars, badges, labels and
button groups.
• It adds JS components like tooltips, modals, dropdowns
and popovers.

What does Bootstrap contain?
• Default styling for HTML elements
• A whole heap of CSS & JS components
• A flexible 12-column grid system
• Bugs, occasionally

Installing is pretty easy…
# Install with BootstrapCDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
# Install with Bower:
bower install bootstrap —save
# Install with NPM:
npm install bootstrap —save
# Install with NPM:
yarn add bootstrap
# Or just download the files from the website like a pleb

Markup is also pretty easy…
<button type=“button" class=“btn btn-default”>
This is a button
</button>

… sometimes
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>

The point is, it’d be a lot
more work to build these
things from scratch.

Just because you’re using
Bootstrap, doesn’t mean it
has to look like Twitter.
The CSS overwrites are purely up to you. Bootstrap is
meant as a boilerplate, not a solution.

Why do we use Bootstrap?
• Startups use Bootstrap to build their entire MVP.
• Small companies build on Bootstrap to create an
intuitive user experience with backbone.
• Big companies use it because their dev team sucks
and they don’t understand how to build custom
interfaces at scale.
• We’re currently moving off it at Spaceship.

I thought you said it was good!
• It is good. It’s good for you, for startups, for MVPs.
• When you scale though, you need to focus on things
like performance, minification, product design etc.
• Only using 500 of the 10,000 lines of Bootstrap in
your production app isn’t efficient.
• Many growing startups like Spaceship have to move
off Bootstrap eventually. It’s like a kickstarter.

Are there any alternatives?
• There’s Foundation by Zurb. 25,000 stars, probably
the biggest Bootstrap rival.
• http://foundation.zurb.com/
• There’s also Bulma. It’s designed to rival Bootstrap
4, simpler but less thought-out. Based on flexbox
which is great.
• http://bulma.io/

That’s enough about Bootstrap
In lieu of a good segue to “how to write good CSS”. Don’t
worry, I’ll show the connection when we get near the end.

How should I write my CSS?
• This is a huge discussion that’s still going on the internet.
• The TL;DR is that we need a way to write stylesheets
that are incredibly modular like Bootstrap, where you
can take any component and smash it together with
another and it’ll look good.
• Easier said than done - you have to take every use case
into account AND THEN THERE’S IE and this is what
being a real front-end developer is all about — dealing
with other people’s shit code.

Atomic CSS
• The idea that we should write components that
“grow in size”. Atomic refers to a series of sizes:
atoms, molecules, organisms, etc.
• Aggregated atoms create molecules, aggregated
molecules create organisms, etc.
• This is much easier to explain with images TBH:

Atomic CSS: Atoms
Buttons and inputs. Can’t get much easier than this.
Button Button Button Button Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Johny Boo
Johny Boo
Johny Boo
Full name
Remember me

Atomic CSS: Molecules
We can combine these things to make a form.
Login
Email
Password
Control Panel
Remember me

Atomic CSS: Organisms
We can combine forms to
create a Settings Page.
Business Contacts
+38 (066) 875 67 97
Phone
ok
alex.robby
Skype
ok
seo@apple.com
Business email
To Moderate
2 ﬁelds selected Mark as OK Mark as Violation Mark all as OK
Experience
Select ﬁelds to update status
Senior Engineer
Position
ok
Tesla Motors
Company
ok
October
Working from
ok2011 December
Working to Current time
2012

The project folder
my_project_folder/
— styles/
— scripts/
— index.html
— favicon.ico

The styles folder
my_project_folder/styles/
— atoms
— molecules
— organisms

The styles/atoms folder
my_project_folder/styles/atoms
— button.css
— input.css
— table.css
— typography.css

The styles/molecules folder
my_project_folder/styles/molecules
— navbar.css
— badge.css
— label.css
— alert.css

The styles/organisms folder
my_project_folder/styles/organisms
— home.css
— about.css
— work.css
— contact.css

Bootstrap + Atomic CSS
• Everyone’s going to have their own opinion on how
to architect CSS. I find the Atomic structure works
for me from a speed and scalability perspective.
• Now let’s start overwriting Boostrap using the
“atomic-overwrite method”. Basically just set up
files that reflect Bootstrap’s different components
and build on it.
• Let’s see what it might look like…

project/styles/atoms/button.css
/* Base */
.button { … }
/* Variations */
.button.default { … } 
.button.primary { … } 
.button.error { … }
/* States */
.button:hover { … } 
.button:focus { … }

project/styles/atoms/input.css
/* Base */
input.form-control { … }
/* Modifiers */
input.form-control[required] { … } 
input.form-control[name=“email”] { … } 
input.form-control[type=“password”] { … } 
input.form-control[disabled] { … } 
input.form-control:valid { … }

You should use LESS or Sass
• Don’t want to get into it in this talk, but you should
absolutely consider LESS when writing CSS
• It’s a preprocessor. You write fancy CSS (LESS) and
it converts it to CSS when you compile it.
• It will significantly cut down your code and make
writing modules and overwrites ridiculously easy.
• Here’s a quick example:

LESS / Sass vs CSS
/* CSS */
.button { … }
.button.default { … } 
.button.primary { … } 
.button.error { … }
.button:hover { … } 
.button:focus { … }
/* LESS / Sass */
.button { 
… 
&.default { … } 
&.primary { … } 
&.error { … } 
&:hover { … } 
&:focus { … } 
}

One last thing: Linting CSS
• My absolute favourite part of this topic on code quality.
Linters are absolutely amazing and indispensable. They
check your code as you’re writing it. They literally enforce
your style on everyone else.
• Some languages, like Javascript, have lots of linters to
choose from: JSLint, ESLint, JSHint, etc. All of these can be
configured, but the default options and extensibility varies.
• Get them on most text editors - Atom, Brackets, Sublime…
• For CSS, we can use CSSLint.

Some things to check out
• http://www.getbootstrap.com/
• http://bulma.io/
• http://patternlab.io/
• http://expo.getbootstrap.com/
• https://land-book.com/
• https://dribbble.com/
• https://github.com/JohnONolan/Styled

spaceship.com.au/launch
Interested in Spaceship?
Skip the waitlist:

Scalable front-end architecture with Bootstrap 3 + Atomic CSS

More Related Content

What's hot

Similar to Scalable front-end architecture with Bootstrap 3 + Atomic CSS

Recently uploaded

Scalable front-end architecture with Bootstrap 3 + Atomic CSS