Graduating from Boostrap: With help from Atomic Design
on Design systems, Front-end
A conference talk I gave at Techbash 2017. Approached how to transition from using UI frameworks to design systems from the “Full Stack” developers perspective.
When replying to a conference’s “Call for Speakers” or “Call for Proposals” you often submit an abstract. The abstract serves as a pitch for a topic you would be interested in speaking on. Often times, the talk does not have slides or even an outline at this point. If one or more conferences likes the abstract and asks the submitter to present, a talk is born.
Abstract
Here is a copy of the abstract that ultimately led to this slide deck and presentation:
Bootstrap defines itself as “… the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” and it’s not wrong. At 105,000 stars, and over 48,000 forks on GitHub, it comes in as the second most popular repository of all time. Bootstrap is an amazing tool, but it’s not without it’s problems. Have you ever found yourself overriding a default Bootstrap style? Including CSS or JS for components you don’t use? Or maybe you’re just tired of your website looking like everyone else’s? We put up with this technical debt because of the wins Bootstrap provides, but what if we could keep the benefits without all of the headache? Enter Atomic Design.
In this discussion, we will start by exploring the problems Atomic design solves, how it promotes consistency/cohesion, easily traverses from abstract to concrete, and provides methodology for crafting an effective design system. Next we will get our hands dirty by digging into a concrete implementation of an Atomic Design based toolkit. Finally, we will go over resources for further education, how to begin the process of integrating Atomic Design into your process, and next steps. By the end of this talk you will be comfortable with Atomic Design basics and have the knowledge and resources necessary to create your own atomically driven comprehensive component library.
Slide Deck
Click Here to view on slides.com
Fullscreen is not available/does not function correctly within this layout. You can view the speaker notes and the slides in their full resolution on slides.com.
This talk was presented at Techbash 2017. You can find information about the other wonderful talks presented there in this GitHub Repo.
If you have any questions, please don’t hesitate to reach out below!
