@undercoatcss/framework NPM

Undercoat.css is a lightweight framework with no default theme out of the box. So you don't need to fight against it!

Travis (.org) GitHub release npm (scoped) npm

CAUTION! IT'S UNDER HEAVY DEVELOPMENT CURRENTLY! DON'T USE IT IN PRODUCTION!

Description

Undercoat.css or just Undercoat is ready to use out of the box because it's written on vanilla CSS and doesn't require building. The main advantages are:

flexible and predictable architecture based on BEM methodology;
no need to override the framework styles because there's no default theme provided;
SEO-friendly semantic HTML markup enriched with microdata;
mobile-friendly by virtue of following Google recommendations and using web standards capabilities;
WCAG 2.0 compliance markup and styles for developing inclusive web interfaces.

Installation

Please note, Undercoat is constantly in development! Try it out on your own risk!

NPM

npm i @undercoatcss/framework

Usage

After installation, you can link or import the CSS file into your project:

CDN

<link rel="stylesheet" href="https://unpkg.com/@undercoatcss/framework@latest/dist/framework.min.css">

Webpack

import '@undercoatcss/framework/framework.css';

Browser support

Undercoat is compatible with 2 recent desktop versions of:

Chrome
Edge
Firefox
Opera
Safari

and 2 recent mobile versions of:

Chrome
Safari

We support only recent browsers to keep our components' codebase clean and provide high performance.

The .browserlist config is provided.

Key concepts

Undercoat is based on the next main principles:

BEM methodology

Undercoat provides a set of common page components (breadcrumbs, cards, form elements etc.). Each component is logically and functionally independent block. Blocks allow for their re-use, as well as facilitating the project development and support process. Read more about blocks in official BEM documentation.

Undercoat follows BEM naming convention with the classic naming scheme, where the name of an entity is unique. The same BEM entity always has the same name in all technologies (CSS, JavaScript, HTML etc.).

Undercoat follows an alternative file structure approach to organizing the framework's file system. It's nested on the root level and flat on the component level.

Example

project
    common.blocks/
        input/                                # Directory for the input block 
            input_type_search.css             # CSS implementation of the input_type modifier 
            input__clear_visible.css          # CSS implementation of the input__clear_visible modifier 
            input__clear.css                  # CSS implementation of the input__clear element 
            input__clear.js                   # JavaScript implementation of the input__clear element 
            input.css                         # CSS implementation of the input block 
            input.js                          # JavaScript implementation of the input block

No default theme

Undercoat doesn't provide a default theme for the components. However, each component includes CSS code of the layout composition and not the appearance. So there's no need for a developer to override the framework styles. Just write (extend) your own code (add new properties) next to the component code following BEM's redefinition levels rules.

Example

project/
    common.blocks/       # redefinition level with framework's blocks 
        breadcrumbs/     # breadcrumbs block composition styles
    project.blocks/      # redefinition level with project blocks 
        breadcrumbs/     # breadcrumbs block project appereance styles

Just remember Undercoat doesn't impose design decisions that you have to fight to undo!

Mobile friendly

Following actual global trends, undercoat is based on the mobile-first approach.

Each component provides best practices for dealing with content images on different screen resolutions and image formats.

Example

<picture>
    <source 
        src="picture.webp"
        srcset="picture.webp 350w, picture.webp 650w" 
        sizes="(max-width: 600px) 300px, (min-width: 600px) 600px"
        alt="Picture description">
    <img 
        src="picture.jpg"
        srcset="picture.jpg 350w, picture.jpg 650w" 
        sizes="(max-width: 600px) 300px, (min-width: 600px) 600px"
        alt="Picture description">
</picture>

SEO friendly

HTML markup of all components was developed based on semantic of HTML5 tags. It gives a lot of benefits besides SEO. In addition to semantic markup Undercoat components are enriched with structured metadata using microdata for common cases (product cards, reviews, etc.).

These efforts lead to successful project indexing by search engines and enhance website "snippet" by making it "rich", or a short piece of quoted text shown when the page appears in search listings.

WCAG 2.0 compliance

SEO appropriate HTML markup semantics of Undercoat components improves the accessibility of the user interface.

Accessibility of components is improved by following WAI-ARIA Authoring Practices 1.1. All of the components will be polished to be WCAG 2.0 compliant.