That approach ultimately didn’t work because we were limiting ourselves into a using a single dimensional layout when Grid is meant for two. We wanted to utilize the latest CSS features, while also ensuring that visitors with older browsers received a comparable experience.Īt first we tried to implement our layout with a traditional 12-column grid using CSS Grid. The new site uses a combination of Flexbox and CSS Grid to create responsive layouts. Our biggest gains were on the pricing page, which saw a 53% decrease in loading time. Utility classes such as u-margin-top-small let us create consistent spacing and eliminate the need to reset or undo any spacing already applied to a component. In addition, spacing between components is one of the tricker parts of creating a design system. Utility classes such as these are an essential part of our system as it allows our devs to fine tune pieces of UI without having to rewrite a lot of CSS. For example, u-margin-top-small represents a utility class that sets margin-top to the small value set by our variables. The prefix is followed by the name of the component and any variation applied to it. Selectors are named using a single-letter prefix to indicate the type of style the class represents. Our CSS is organized based on the ITCSS philosophy and uses BEM-like naming conventions. After : Using a mostly class-based system resulted in a drop in our specificity.
799 unique declarations, down from 1,881īefore : Lots of deep spikes and valleys indicate poorly managed CSS specificity.It allowed us to reduce our CSS payload, in one case by nearly 70% (from 416kB to 132kB). The Spacesuit framework consists of class-based, reusable components and utility classes used to standardize our marketing pages. A fundamental part of this effort was the creation of our new UI framework, called Spacesuit. By including only what we need to run, we are able to increase site stability, reduce developer confusion and create a codebase that is easier to iterate on. One of our earliest goals was to decouple the website from the “web app” in order to streamline and simplify our codebase. The old shared many code and asset dependencies with our web-based Slack client. (L-R: January 2017, August 2017) Cleaner and leaner code
0 kommentar(er)
