datcss

Better typography, better websites.

Usage no npm install needed!

<script type="module">
  import datcss from 'https://cdn.skypack.dev/datcss';
</script>

README

Dat CSS npm version Dependency Status

A stylesheet for text-first, responsive websites.

Principles

Unobtrusive

At its heart, web design should be about words. Dat CSS is deliberately built to highlight the quality of the text, and does it's best to conform to IA's 100% Easy-2-Read Standard.

By default, HTML is responsive and attractive. Dat CSS provides a minimal set of styles that augments, rather than mask, the benefits natively provided by browsers. Rather than rewriting everything from scratch, Dat CSS serves as a layer on top of what already exists.

Dat CSS is extremely lightweight, clocking at only XXKb.

Understandable

Dat CSS was developed to be modified and extended. The codebase is simple, modular, and well-commented so that Developers can get up and running quickly.

In the spirit of simplicity Dat CSS relies on NPM for builds.

Dat CSS is post-processed, meaning that Developers need only write native CSS, rather than learning any of the preprocessed languages such as SASS, LESS, or Stylus.

Maintainable

Dat CSS is heavily modularized, meaning components can be easily swapped in and out as required.

Dat CSS makes heavy use of Object-Oriented CSS, which we've found dramatically benefits maintainability, especially across large, collaborative codebases.

Usage

Install NPM.

npm install datcss

Include the following in your <head>

<link rel='stylesheet' href='/node_modules/datcss/index.css'>

Variables

Modify src/index/css.

The following variables can be changed.

    /* TYPOGRAPHY */
    --ms3: ;
    --ms2: ;
    --ms1: ;
    --ms0: ;
    --copy-font:	;
    --copy-font-weight: ;
    --copy-font-color:	;
    --heading-font: ;
    --heading-font-color: ;
    --heading-font-weight: ;
    --monospace-font: ;
    --line-height: ;
    --font-weight-light: ;
    --font-weight-book:	;
    --font-weight-medium: ;
    --font-weight-semibold: ;
    --font-weight-bold: ;
    --font-weight-black: ;

    /* LINKS */
    --link-color: ;
    --link-color-hover: ;

    /* LAYOUT */	
    --container-width: ;

Inspiration