ITCSS: Inverted Triangle CSS

****************   1. Settings (start your work here)
 **************    2. Tools
  ************     3. Generic
   **********      4. Elements
    ********       5. Objects
     ******        6. Components
      ****         7. Modules (most work will be done here)
       **          8. Utilities

1. Settings
   Global configuration and variables.
   Breakpoints, colors, spacing, utilities etc.

2. Tools
   Functions and mixins.

3. Generic
   Ground zero styles. No classes.

4. Elements
   Unclassed (bare) HTML element.
   H1, Ul, A etc.

5. Objects
   Common non-cosmetic structural design patterns.
   Containers, rows, grids, colums etc.

6. Components
   Specific cosmetic elements of UI.
   Buttons, forms etc.

7. Modules
   Multi-part components.
   Navbar, footer etc.

8. Utilities
   Helpers and overrides.

Shame
All the CSS, hacks and things we are not proud of.
                    

@include media-breakpoint-up(sm) {}
@include media-breakpoint-up(md) {}
@include media-breakpoint-up(lg) {}
@include media-breakpoint-up(xl) {}
@include media-breakpoint-up(xxl) {}

@include media-breakpoint-down(xs) {}
@include media-breakpoint-down(sm) {}
@include media-breakpoint-down(md) {}
@include media-breakpoint-down(lg) {}
@include media-breakpoint-down(xxl) {}

@include media-breakpoint-only(xs) {}
@include media-breakpoint-only(sm) {}
@include media-breakpoint-only(md) {}
@include media-breakpoint-only(lg) {}
@include media-breakpoint-only(xl) {}
@include media-breakpoint-only(xxl) {}

@include media-breakpoint-between(md, xl) {}
                    

// Colors
$color-base: #4a5568 !default;
$color-primary: #007bff !default;
$text-secondary: #7f19e6 !default;
$color-white: #fff !default;
$color-light: #f2f2f2 !default;
$color-dark: #343a40 !default;
$color-black: #000 !default;
$color-success: #00b300 !default;
$color-error: #c00 !default;

// Map used for generating CSS utility classes
$colors: (
  'base': $color-base,
  'primary': $color-primary,
  'secondary': $text-secondary,
  'white': $color-white,
  "light": $color-light,
  "dark": $color-dark,
  'black': $color-black,
  'success': $color-success,
  'error': $color-error
) !default;

// Links
$color-link-color: #007bff !default;
$color-link-color-hover: darken($color-link-color, 20%) !default;
                    

// Used for generating margin/padding CSS utility classes
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer * .75,
  4: $spacer * 1,
  5: $spacer * 1.25,
  6: $spacer * 1.5,
  8: $spacer * 2,
  12: $spacer * 3
  auto: auto,
) !default;
                    

// Font Family
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
$font-family-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-headings: $font-family-base;

// Font Size
$font-size-xs: .75rem !default;
$font-size-sm: .875rem !default;
$font-size-base: .875rem !default;
$font-size-lg: 1.125rem !default;
$font-size-xl: 1.25rem !default;

// Font Weight
$font-weight-hairline: 100 !default;
$font-weight-thin: 200 !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-extrabold: 800 !default;
$font-weight-black: 900 !default;

// Line Height
$line-height-none: 1 !default;
$line-height-xs: 1.25 !default;
$line-height-sm: 1.375 !default;
$line-height-base: 1.5 !default;
$line-height-lg: 1.625 !default;
$line-height-xl: 2 !default;

// Headings
$headings-margin-bottom: 1rem !default;
$headings-font-family: $font-family-headings !default;
$headings-font-weight: $font-weight-medium !default;
$headings-letter-spacing: normal !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
$headings-text-transform: inherit !default;

// Headings Responsive Size
$h1-font-size: ( xs: 20px, sm: 24px, md: 28px, lg: 32px, xl: 36px, xxl: 40px );
$h2-font-size: ( xs: 18px, sm: 20px, md: 24px, lg: 28px, xl: 32px, xxl: 36px );
$h3-font-size: ( xs: 16px, sm: 18px, md: 20px, lg: 24px, xl: 28px, xxl: 32px );
$h4-font-size: ( xs: 16px, sm: 16px, md: 18px, lg: 22px, xl: 26px, xxl: 30px );
$h5-font-size: ( xs: 16px, sm: 16px, md: 18px, lg: 20px, xl: 22px, xxl: 24px );
$h6-font-size: ( xs: 16px, sm: 16px, md: 16px, lg: 18px, xl: 20px, xxl: 20px );

// List
$list-margin-bottom: 1rem !default;

// Paragraph
$paragraph-margin-bottom: 1rem !default;
                    

$body-font-size: (
  xs: 10px,
  sm: 14px,
  md: 18px,
  lg: 22px,
  xl: 26px,
  xxl: 30px
);

$body-padding-top: (
  xs: 10px,
  sm: 20px,
  md: 30px,
  lg: 40px,
  xl: 50px,
  xxl: 60px
);

body {
  @include make-responsive(font-size, $body-font-size);
  @include make-responsive(padding-top, $body-padding-top);
}
                    

<div class="flex flex-wrap -mx-2">
  <div class="w-full md:w-1/3 px-2">
    <div class="bg-light p-2">1</div>
  </div>
  <div class="w-full md:w-1/3 px-2">
    <div class="bg-light p-2">2</div>
  </div>
  <div class="w-full md:w-1/3 px-2">
    <div class="bg-light p-2">3</div>
  </div>
</div>
                    

<ul class="list-none m-0 p-0">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>