View on GitHub

itscss

Starter SCSS boilerplate utilizing the ITCSS pattern

Inverted Triangle CSS Visualization

ITSCSS

Travis CI Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

A starter boilerplate based on the ITCSS (Inverted Triangle CSS) methodology.

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

About

ITSCSS is a mobile-first, responsive, battle-tested SCSS framework based on the ITCSS methodology utilizing the BEM methodology.

This boilerplate is intented to be used as a starting point in your application. You should use this as a foundation for your CSS and build on top of it.

If you want to use the full capabilities of this boilerplate such as variables, mixins, etc., then you should include it in your SCSS files.

You can also use the plain CSS version which lacks mixins and other useful tools.

Install

# Via NPM
npm i itscss

# Via Yarn
yarn add itscss

Usage

If you are using a module bundler (such as Webpack, Parcel, Browserify):

# In your SCSS entrypoint
@import 'itscss';

# Or if the above does not resolve, try
@import 'itscss/index.scss';

There are several predefined variables which you can overwrite:

/* Color Variables */
$color-base: #333;
$color-white: #fff;
$color-black: #000;
$color-action: #ef4c23;

/* Text Variables */
$font-sans-serif: sans-serif;
$font-serif: serif;
$font-monospace: monospace;

$font-size-base: 1rem;
$line-height-base: 1.35;

$font-size-h1: 2rem;
$font-size-h2: 1.75rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.25rem;
$font-size-h5: $font-size-base;
$font-size-h6: 0.75rem;

/* Transition Variables */
$timing: 0.4s;
$easing: ease-in-out;

/* Spacing between grid items */
$gap: 0.5rem;

/* Number of columns in the grid */
$columns: 12;

/* The maximum width of the shell container */
$shell-width: 75rem;

/* The left and right padding of the shell container */
$shell-gap: 1rem;

/* Responsive breakpoints */
$small-desktop: 1439px;
$tablet-landscape: 1279px;
$tablet-portrait: 1023px;
$mobile: 767px;

/*
	A map of breakpoints used to create
	the grid columns rules and
	the responsive utility classnames
*/
$breakpoints: (
	xs: (
		min: 0,
		max: $mobile
	),
	sm: (
		min: $mobile + 1,
		max: $tablet-portrait
	),
	md: (
		min: $tablet-portrait + 1,
		max: $tablet-landscape
	),
	lg: (
		min: $tablet-landscape + 1,
		max: $small-desktop
	),
	xl: (
		min: $small-desktop + 1
	)
);

/* A list of display properties */
$displays: 'block', 'inline', 'inline-block', 'flex', 'inline-flex';

/* A list of text alignment properties */
$alignments: 'center', 'right', 'left', 'justify';

/*
	A map of elements used to define z-index property.
	See Functions section below for more details.
*/
$z-indexes: (
	header: (),
	main: (
		alert: (),
		content: (
			title,
			inner,
			overlay
		),
		aside: ()
	),
	footer: (),
	modal: ()
);

You should place the overwriting variables before the @import statement.

Supported browsers

The combined and built version of this boilerplate has been tested and works in all evergreen browsers (Chrome, Firefox, Edge, Opera, Safari, Brave, Vivaldi, iOS Safari, Chrome on Android, Samsung Internet) and IE 10+.

Available files, selectors, variables and their usage

Settings

Tools

Generic

Elements

Objects

Components

Utilities

LICENSE

MIT


Connect with me:


                     

Support and sponsor my work: