Trifecta

Trifecta is a bad and inaccurately-named CSS foundation consisting of four parts: a reset, a baseline, copy text fundamentals, and a modern web design framework.

Files

trifecta.scss – One file to call them all.
_reset.scss – Resets all styles to a boring and unuseable minimum.
_baseline.scss – Baselines all styles to a boring but useable minimum.
_copy.scss – Simple but smart typography for copy text.
_framework.scs – Things like containers and a responsive grid.
_template.scss – A blank template because standards.
trifecta.css – Compiled and compressed. Drop it into your project.

Overview

reset and baseline apply styles to HTML elements.

copy applies styles to HTML elements when you add the .copy class to a parent container.

<div class="copy">
    <!-- Your post content. -->
</div>

framework applies styles to some HTML elements but relies on special classes to activate its main features.

Installation

Trifecta is available as a Bower and NPM package.

Bower

bower install trifecta --save

NPM

npm install trifecta --save

Alternatively, download css/trifecta.css from GitHub.

Usage

Include Trifecta in your web document before other stylesheets are called.

<link rel="stylesheet" href="path/to/trifecta/css/trifecta.css">

References

• normalize.css
• HTML5 Boilerplate
• PureCSS
• CSS3 text decoration skip