ITP CSS Framework

Why?

We have created this CSS framework in order to improve the way we author CSS. As our company grows we feel the need for a component-based system that consists out of modular, loosely coupled objects that will help us work more consistently and thus more efficiently. Our framework is built upon the following principles. Please keep these in mind when contributing and/or using this framework.

Low specificity

A single-depth-class-based architecture based on the BEM naming methodology serving CSS modules that play well with React, Ember, Angular and other component-based approaches to UI Development

Loosely decoupled

Avoid reliance on other bits.

• Separation of Concerns: let each piece of code solve its own problems
• Single Responsibility Principle: one thing, one thing only, one thing well
• Open/Closed Principle: add via extension, not modification

Highly composable

We build the bits that build the bits. Make everything opt-in and configurable through custom properties.

Usage

npm

$ npm install --save @inthepocket/itp-css

css¹:

@import '@inthepocket/itp-css/normalize.css';

js¹:

import '@inthepocket/itp-css/normalize.css';

css modules¹:

import styles from '@inthepocket/itp-css/modules/grid.module.css';

¹ See Framework structure for more info on what you can import.

cdn

https://www.jsdelivr.com/package/npm/@inthepocket/itp-css

Table of contents

• Naming conventions
• Framework structure
• Roadmap
• Development