ITCSS Boilerplate is an open-source CSS architecture boilerplate that scaffolds projects around Harry Roberts' Inverted Triangle CSS (ITCSS) methodology, providing a Gulp-powered build system for development and production-ready minified stylesheets.
What is ITCSS Boilerplate?
ITCSS Boilerplate is a starter template for front-end projects that organizes stylesheets using the Inverted Triangle CSS architecture popularized by Harry Roberts. It takes an empty project directory and adds a Gulp-based workflow where developers run yarn install, then use gulp to start a local server, gulp build for a development build, and gulp build --dist for a production build with minification. The project is hosted at userx.co.za and credits Harry Roberts and Normalize.css in its documentation.
Key Features
- ITCSS architecture — Stylesheets are separated into layered concerns, from generic reset rules to specific component styles, following the inverted triangle model.
- Gulp local server — The
gulpcommand starts a local development server for live previewing. - Development build —
gulp buildproduces an unminified development build for debugging. - Production build with minification —
gulp build --distoutputs minified assets for deployment. - Normalize.css integration — Includes Normalize.css to normalize browser default styles across modern browsers.
- Yarn package management — Dependencies are installed with
yarn install, making the setup reproducible.
Who should use ITCSS Boilerplate?
- Front-end developers who want to adopt ITCSS in their projects need a ready-made structure that enforces the methodology from the start.
- Development teams working on large codebases use the boilerplate's layered CSS organization to keep styles maintainable and scalable.
- Gulp users looking for a minimal build setup can use the provided tasks for serving, building, and minifying without configuring a pipeline from scratch.
- CSS educators can use the boilerplate as a hands-on example when teaching Inverted Triangle CSS concepts.
What can you do with ITCSS Boilerplate?
- Start a new project: Run
yarn installandgulpto spin up a local development server with ITCSS-structured styles ready to edit. - Prepare for deployment: Use
gulp build --distto generate minified production CSS for uploading to a web server. - Learn ITCSS: Inspect the layered directory structure and source files to see how the inverted triangle organizes CSS from generic to specific.
How does ITCSS Boilerplate work?
After cloning the repository, you install dependencies with yarn install. The gulp command launches a local server for development, gulp build creates a development build, and gulp build --dist produces a minified production build. The template relies on Gulp task automation to process the source styles and copy assets into a distributable folder.
FAQ
What is ITCSS?
Inverted Triangle CSS (ITCSS) is a CSS architecture created by Harry Roberts. It organizes stylesheets in a layered, inverted-triangle shape, starting with broad generic rules like resets and moving toward narrow, specific component styles.
What does the gulp command do?
The gulp command starts a local development server according to the boilerplate's setup instructions. It is intended for live development after running yarn install.
How do I create a production build?
Run gulp build --dist after installing dependencies. This command builds the project with minification enabled, producing files suitable for deployment.
