und CSS

Getting Started

Quick Start

For a quick start you first need to install und-css as a dependency to your project.

yarn add -D @und-pohlen/und-css

npm install @und-pohlen/und-css --save-dev

Presuming you have some kind of SASS transpiler running in your project (e.g. via webpack or some other task runner) you then simple required the und-css entry file in your SASS stylesheet.

@import '@und-pohlen/und-css';

Important Globals

To make live easier and more predictable und-css makes some assumptions about your HTML markup and sets some opionated styling defaults.

HTML5 Doctype

und-css requires the HTML5 Doctype. Without it you might experience some weird rendering issues.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Responsive Meta Tag

und-css provides responsive utility classes to make designing for different viewports easier. To ensure proper renderung and zooming for all devices, you need to add the responsive view meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Box-sizing

For more logical spacing and size calculations in CSS, und-css switches the global box-sizing value from content-box to border-box.

On rare occasions you therefore might want to reset this in your custom component styles building on und-css.

.c-my-component {
  box-sizing: content-box;
}

What is und-css

Meta-Framework

und-css isn’t a CSS framework in the original definition. That is, it doesn’t come with any styling. und-css is meant to provide a solid baseline for your custom CSS styles by being almost fully customizable allowing you to freely configure design tokens and creating as many (or as little) utility classes as you like. und-css is here to speed up your process, not to make all your websites look the same.

Parts

und-css consists of three parts: Tokens, Objects and Utilities. These serve as the foundation for further styling that can be built on top of it (by writing custom components) or with it (by generating a lot of utility classes).

Tokens

The formalization of visual language (read »design system«) is at the heart of the und-css approach. At its core und-css is a config file (_settings.scss) containing all neccessary information about the visual language of the site or app you’re building, including:

  • Typography
    • Sizes
    • Font Families
    • Leading
    • Tracking
    • Measures
  • Colors
  • Layout Values
    • Spacing
    • Widths
    • Dimensions
    • Breakpoints

und-css takes all the information provided in the config and converts them to CSS custom properties, so other parts of the stylesheet can easily access them.

The tokens generated by und-css are fully customizable in the config file.

Objects

Objects are meant to be time-savers by providing simple abstractions over common layout challenges such as grids, boxes or centering things. Objects help you to quickly create macro layouts. Parameters of objects can be altered using modifiers, to make adjustments to your micro-layout.

Utilities

Utility classes, sometimes also called atomic or functional CSS, just do one thing like setting a color, font-size or spacing (most of the time they will just set a single CSS property). und-css comes with a simple utility class generator that can be fully configured to suit your needs (and file size). By default only commonly used utility classes are provided.

Motivation

und-css was created as an internal tool to be used in personal and und Pohlen frontend projects. It is a structured approach to the way I write CSS—that is more from a graphic designer’s perspective and less from a developer’s perspective.

und-css combines my CSS experiences with the good parts of frameworks I’ve worked with over the years. Honorable mentions include: InuitCSS, TailwindCSS and Every Layout.

Why SASS?

The answer is quite pragmatic: Because it’s the Preprocessor I am most familiar with. SASS isn’t my dream choice for this project, but given my experience with it, it provided a quick and easy way to get a first version of this framework done. In the future I plan to move the codebase to a more contemporary tooling like PostCSS.

Cross Browser Compatibility

und-css is built to be future proof with modern browsers in mind. It makes heavy use of modern CSS technologies such as custom properties and CSS calculations.

und-css makes no assumption about the browsers you want to target, as it is a meta-framework, that you can use to build your own CSS on top. By default und-css will not work in legacy browsers including IE11 and very old versions of Edge. However, this can be fixed in your build step.

Build Step Strategies

If you have good reason to target a legacy browser (maybe because you're designing a website for a conservative german SME) you can transform your CSS code to something that will work in legacy browsers. It might not have all the sparkle, but it won't look broken either.

Custom Properties

The biggest hurdle are CSS custom properties as these aren't natively supported in IE11. To make things work, you need to do two things:

You could also look into Post CSS Variables and configure your build step to generate and serve different bundles to modern and legacy browsers.

CSS Calculations

While CSS Calculations are generally supported by IE11, but there are some issues with nested calculations. So using PostCSS calc might be a good idea if you need full IE11 support.

Compatibility of Objects

und-css' objects make use of modern CSS Features such as flexbox or grid to create intrinsic and robust layouts. See the object documentation for more information on browser compatibility per object.

Print Stylesheets

By default und-css comes with a crude CSS Reset for printing situations. This will try to reset most of your screen styles, to ensure everything can be printed nicely.

See globals/print.globals.scss for more information on the included resets.

If—for some reason—you do not want this print reset in your built styles you can set $globals--print-reset to false in your custom settings files.

Namespacing

Why use namespaces

When working at scale a lot of our time is spent reading existing code trying to understand what it does. Naming conventions such as BEM help to clearly distinguish parts of a component in relation to the other parts of a component.

Namespaces take this a step further by prefixing CSS classes according to their function in the global sense. A namespace can help us to quickly understand what a certain class does in absolute terms. They help to easily understand what existing codes does and how it might be altered to achieve a desired change in design. Namespaces greatly reduce the urge to create new selectors.

If you want to know more about the motivation behind using namespaced CSS check out Harry Roberts’ article on namespaced CSS.

Default Namespaces

By default und-css uses two different namespaces to distinguish the classes it provides and generates.

  • o-: Signifies that a class belongs to an object. Objects may be used in any number of non related contexts. Objects provide abstractions of common layouts. They don’t come with any cosmetic styling.
  • u-: Signifies a utility class. Utility classes have a very specific role (mostly just providing one CSS rule). They are commonly used to provide quick access to design tokens.

If you build your own layout objects or utility styles on top of und-css it is recommended that you follow the same namespace convention.

Recommended Namespaces

As und-css only provides layout objects and utility classes it does not cover how you handle and name your custom component styles. To distinguish your components from objects and utilities it is recommended to introduce a new namespace.

  • c-: Should signify a component style in your custom CSS. A component is a specific implementation of UI. Changes made to a component style only affect instances of this component but nothing else in your design.

Changing / Removing Namespaces

und-css default namespaces are a suggestion rather than a convention. You can ovveride them in your _settings.scss.

  • $utilities--prefix: Sets the prefix of your utility classes. Defaults to u-, set to an empty String if you don’t want a prefix.
  • $objects--prefix: Sets the prefix of object classes. Default to o-, set to an ampty String if you don’t want any prefix.