https://github.com/aarongarciah/itcss-sample

A simple ITCSS structure sample
https://github.com/aarongarciah/itcss-sample

css itcss sass

Last synced: 6 days ago
JSON representation

A simple ITCSS structure sample

• Host: GitHub
• URL: https://github.com/aarongarciah/itcss-sample
• Owner: aarongarciah
• Created: 2018-05-17T08:43:49.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-10T22:56:15.000Z (almost 5 years ago)
• Last Synced: 2023-03-02T17:02:48.583Z (over 1 year ago)
• Topics: css, itcss, sass
• Language: CSS
• Size: 36.1 KB
• Stars: 56
• Watchers: 2
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ▽ ITCSS Sample

A simple ITCSS folder structure sample.

## What is ITCSS?

> ITCSS stands for _Inverted Triangle CSS_ and it helps you to organize your project CSS files in such way that you can better **deal with** (not always easy-to-deal with) CSS specifics like **global namespace, cascade and selectors specificity**.

>

> — Lubos Kmetko, in [ITCSS: Scalable and Maintainable CSS Architecture](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)

It was created by [Harry Roberts](https://csswizardry.com/) and it works very well with methodologies like [BEM](https://en.bem.info/methodology/css/), [SMACSS](https://smacss.com/) or [OOCSS](https://github.com/stubbornella/oocss/wiki).

Check out [INUITCSS](https://github.com/inuitcss/inuitcss) to see the best example of ITCSS.

 

![ITCSS Layers](img/itcss-layers.png)

 

## Learn more about ITCSS

* [📄 Manage large CSS projects with ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528), Harry Roberts - Creative Bloq

* [📺 Managing CSS Projects with ITCSS](https://youtu.be/1OKZOV-iLj4), Harry Roberts - YouTube

* [:octocat: INUITCSS Project](https://github.com/inuitcss/inuitcss), Harry Roberts - GitHub