Inverted Triangle CSS Visualization


GitHub release GitHub issues GitHub last commit Build Status npm npm Analytics

A starter boilerplate based on the ITCSS (Inverted Triangle CSS) 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.


# Via NPM
npm i itscss

# Via Yarn
yarn add itscss


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;

/* Misc Variables */
$shell-width: 75rem;

$small-desktop: 1439px;
$tablet-landscape: 1279px;
$tablet-portrait: 1023px;
$mobile: 767px;

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 CSS selectors and their purpose


  • _colors.scss - contains all colors and theme Settings
  • _text.scss - contains all text settings (font-size, font-family, etc)
  • _transitions.scss - contains the default transition duration and timing function
  • _variables.scss - contains all other variables


  • _chevron.scss - a mixin for a directional arrow icon
  • _flexbox.scss - a mixin for flex container
  • _media-queries.scss - mixins for all supported media queries
  • _mixins.scss - all other mixins


  • _form-elements.scss - default styles for form elements
  • _reset.scss - additional browser reset and normalize (normalize.scss is also included)
  • _transitions.scss - default transitions for focusable/active elements


  • _document.scss - default styles for the body element
  • _headings.scss - default styles for all h* (h1 - h6) tags
  • _links.scss - default styles for anchors
  • _texts.scss - default styles for text elements


  • _grid.scss - a grid system
  • _main.scss - styles for the main element
  • _shell.scss - styles for the site container
  • _wrapper.scss - styles for the site wrapper


  • _btn.scss - default styles for the buttons
  • _list.scss - default styles for lists


  • _align.scss - alignment class utilities
  • _fullsize-background.scss - helper for background image
  • _hidden.scss - helper class/attribute for hidden elements
  • _responsive-utilities.scss - helpers for showing/hiding elements on different resolutions
  • _text-align.scss - text alignment utilities