datcss

Better typography, better websites.

0.0.16
latest
Source
npm

Version published: 10 years ago

Weekly downloads: 19; increased by26.67%

Maintainers: 1

Weekly downloads

Created: 10 years ago

Source

Dat CSS

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

Keywords

FAQs

What is datcss?

Is datcss popular?

Is datcss well maintained?

Package last updated on 03 Jan 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install