Image for post
Image for post

Minimal CSS with Carbon

Josh Black
Apr 1, 2019 · 6 min read

Using unpkg as a CDN

If you’ve followed along with Carbon’s getting started guide for developers, you might have seen a section where we call out using a CDN. Since we publish Carbon Components as a package on NPM, we are able to use a service called Unpkg as a quick way to serve files distributed via the carbon-components package.

Image for post
Image for post
You can view all the files in our package on unpkg
<link rel="stylesheet" href="//unpkg.com/carbon-components@9.90.0/css/carbon-components.min.css">
Image for post
Image for post
css directory in carbon-components
Image for post
Image for post
Network timeline from an example project
  • Helper functions and mixins to automate tasks or styling while building components
  • Ability to try out new features through our feature flag system

Building Carbon using Sass

If you have Sass setup in your project, you can use the sass files that Carbon ships to include styles in a similar way to the unpkg CDN. To start off, make sure you’ve installed the carbon-components package. You can do this by running:

npm install carbon-components --save
yarn add carbon-components
@import 'carbon-components/scss/globals/scss/styles.scss';

Importing Components

If you take a look at the source file for our Sass import above, you’ll notice a block that shows how we’re importing all of the components to be included in the CSS output.

Image for post
Image for post
// Include some flags that are used to control the CSS output
// of things like resets, font families, and resets
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--typography: true;
$css--plex: true;
// Include each component as you start using it in your project
@import 'carbon-components/scss/components/button/button';
// Provides color variables for use in your project, these come
// from the IBM Design Language
@import 'carbon-components/scss/globals/scss/colors';
// Bring in color theme tokens
@import 'carbon-components/scss/globals/scss/theme';
// Imports spacing tokens for you to use
@import 'carbon-components/scss/globals/scss/spacing';
// And much, much more!
Image for post
Image for post

Wrapping up

Using Carbon’s Sass files is a great way to improve how you author components. It also opens up the opportunity to fine tune your application to guarantee your users the best experience possible.

We want (need) your feedback

Run into any issues or have feedback for us? Please make an issue on our project over on GitHub and we’ll make sure to get back to you as soon as possible!

Image for post
Image for post
Checkout our v10 site!

_carbondesign

Carbon is the design system for IBM software products.

Thanks to Abbey Hart, Connor Leech, and Vince Picone

Josh Black

Written by

Building design systems for IBM. Thoughts are my own.

_carbondesign

Carbon is the design system for IBM software products. It is a series of individual styles, components, and guidelines used for creating unified UI.

Josh Black

Written by

Building design systems for IBM. Thoughts are my own.

_carbondesign

Carbon is the design system for IBM software products. It is a series of individual styles, components, and guidelines used for creating unified UI.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store