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.

Scalable front-end architecture with Bootstrap 3 + Atomic CSS


Published on

I was invited back by the Coder Factory to give another talk on "how to convert design to code properly" for their new cohort of students.

Published in: Engineering
  • Be the first to comment

Scalable front-end architecture with Bootstrap 3 + Atomic CSS

  1. 1. Scalable front-end architecture with Bootstrap 3 + Atomic CSS
  2. 2. Let’s do some intros I’m dying to meet you, kindred spirits :)
  3. 3. Hayden Bleasel Product Designer, Full-Stack Developer, Entrepreneur. Head of Product at Spaceship. @haydenbleasel on the internet. Nice to meet you.
  4. 4. Quick Question How many of you know what Bootstrap is?
  5. 5. Quick Question How many of you know what Atomic CSS is?
  6. 6. 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…
  7. 7. What is Bootstrap and why do I care? Kind of a big question and a bit of a history lesson.
  8. 8. 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.
  9. 9. 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.
  10. 10. What does Bootstrap contain? • Default styling for HTML elements • A whole heap of CSS & JS components • A flexible 12-column grid system • Bugs, occasionally
  11. 11. Installing is pretty easy… # Install with BootstrapCDN: # 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
  12. 12. Markup is also pretty easy… <button type=“button" class=“btn btn-default”> This is a button </button>
  13. 13. … 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> <span class="icon-bar"></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>
  14. 14. The point is, it’d be a lot more work to build these things from scratch.
  15. 15. 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.
  16. 16. 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.
  17. 17. 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.
  18. 18. Are there any alternatives? • There’s Foundation by Zurb. 25,000 stars, probably the biggest Bootstrap rival. • • There’s also Bulma. It’s designed to rival Bootstrap 4, simpler but less thought-out. Based on flexbox which is great. •
  19. 19. 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.
  20. 20. 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.
  21. 21. 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:
  22. 22. 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
  23. 23. Atomic CSS: Molecules We can combine these things to make a form. Login Email Password Control Panel Remember me
  24. 24. 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 Business email To Moderate 2 fields selected Mark as OK Mark as Violation Mark all as OK Experience Select fields to update status Senior Engineer Position ok Tesla Motors Company ok October Working from ok2011 December Working to Current time 2012
  25. 25. The project folder my_project_folder/ — styles/ — scripts/ — index.html — favicon.ico
  26. 26. The styles folder my_project_folder/styles/ — atoms — molecules — organisms
  27. 27. The styles/atoms folder my_project_folder/styles/atoms — button.css — input.css — table.css — typography.css
  28. 28. The styles/molecules folder my_project_folder/styles/molecules — navbar.css — badge.css — label.css — alert.css
  29. 29. The styles/organisms folder my_project_folder/styles/organisms — home.css — about.css — work.css — contact.css
  30. 30. 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…
  31. 31. Bootstrap Buttons
  32. 32. project/styles/atoms/button.css /* Base */ .button { … } /* Variations */ .button.default { … }
 .button.primary { … }
 .button.error { … } /* States */ .button:hover { … }
 .button:focus { … }
  33. 33. Bootstrap Inputs
  34. 34. 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 { … }
  35. 35. 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:
  36. 36. LESS / Sass vs CSS /* CSS */ .button { … } .button.default { … }
 .button.primary { … }
 .button.error { … } .button:hover { … }
 .button:focus { … } /* LESS / Sass */ .button {
 &.default { … }
 &.primary { … }
 &.error { … }
 &:hover { … }
 &:focus { … }
  37. 37. 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.
  38. 38. Realtime syntax checking
  39. 39. Some things to check out • • • • • • •
  40. 40. Interested in Spaceship? Skip the waitlist: