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 itscssIf 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.
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+.
_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 thebodyelement_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 themainelement_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
MIT
