_CSS_Organization_Project_Intro.md

UI

The styles are broken down into a few different types by folder and included in the master application.scss manifest file:

1. Variables There is one master variables file that exists at the stylesheet root. This file provides you with standardized type, spacing, timing, colors, etc. Keep in mind these variables affect the whole site.
2. Tools Tools are mixins or functions. Please prefix each file with its type _mixin or _function.
3. Normalize Prevents initial style cross-browser inconsistencies...you know the drill.
4. @font-face
5. Base This file supplements any addition element styling that Normalize missed.
6. Components These are the meat and bones of our interface–anything visual on the page is a component. Component classes are constructed like this: .c-title, with child elements: .c-title__subtitle, style variants can be used like so: .c-title.c-title--small. Children elements of a component should never be nested inside of a different parent component, for example .c-title -> .c-tag -> .c-title__subtitle.
7. Utilities These special classes help "bully" components in one-off situations, for example: .c-title.u-float-right. Please take special note here, if a component uses the same utility class in more than 1 or 2 instances in the app it would be best to create a state class for that of that component instead. Also keep in mind that most layout issues can be solved with the .c-grid component.

Example Component Files

Please keep the file structure and naming conventions consistent and use scoped variables at the top of the file when possible.

---

// - components/_c.paragraph.scss

.c-paragraph {
  @include font(15px);
  color: $c-grey-dark;
  margin: 0 0 $s-regular;

  @media #{$bp-lap} {
    max-width: rem(520px);
  }

  .c-paragraph__link {
    transition: all $transition-speed ease;
    color: $c-grey-dark;
    border-bottom: 1px solid $c-primary-light;
    cursor: pointer;

    &:hover,
    &:active,
    &:focus {
      color: $c-grey-xdark;
      border-bottom-color: $c-primary;
      background: $c-primary-xlight;
    }
  }

  &--small {
    @include font(13px);
    color: $c-grey-medium;
    margin: 0 0 $s-small;

    .c-paragraph__link {
      color: $c-grey-medium;
    }

    @media #{$bp-lap} {
      max-width: rem(320px);
    }
  }

  &--on-dark {
    color: $c-grey-light;
  }
}

---

// - components/_c.list.scss

.c-list {
  margin: 0 0 $s-small;
  padding: 0;
  list-style-position: inside;

  .c-list__item {
    @include font(13px, regular, 1.9);
    color: $c-grey-medium;
    padding: 0;
  }

  .c-list__item-title {
    @include font(13px, medium, inherit);
    color: $c-grey-dark;
  }
}

---

// - components/_c.button.scss

.c-button {
  $active-classes: "&.c-button--active,
                    &:active,
                    &:focus,
                    &:hover";

  @include elevation(0);
  @include font(13px, medium);
  background: $c-white;
  border-radius: $border-radius;
  border: 1px solid $c-border;
  color: $c-grey-dark;
  padding: $s-tiny $s-small;
  text-align: center;
  transition: color $transition-speed ease,
              background $transition-speed ease,
              box-shadow $transition-speed ease;              
  cursor: pointer;
  display: inline-flex;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;

  #{$active-classes} {
    @include elevation(1);
    border-color: rgba($c-grey-xdark, 0.1);
    background: $c-white;
    color: $c-grey-dark;
  }

  &--small {
    @include font(12px, medium, 2.4);
    padding: 0 $s-tiny;
  }

  &--disabled,
  &[disabled] {
    color: $c-grey-medium !important;
    background: $c-grey-xlight !important;
    border-color: $c-border !important;
    cursor: not-allowed;

    #{$active-classes} {
      @include elevation(0);
    }
  }

  &--warning {
    color: $c-warning;
  }

  &--focal {
    background: $c-primary-light;
    color: $c-grey-xdark;

    #{$active-classes} {
      background: darken($c-primary-light, 5%);
    }
  }

  &--google {
    background: $c-vendor-google;
    color: $c-white;

    #{$active-classes} {
      background: darken($c-vendor-google, 5%);
      color: $c-white;
    }
  }

  &--full-width {
    display: block;
    text-align: center;
    width: 100%;
  }
}

application.scss

// -- Setup
@import "variables";
@import "tools/function.rem";
@import "tools/mixin.clearfix";
@import "tools/mixin.seo-text";
@import "tools/mixin.font";
@import "tools/mixin.elevation";

// -- Base
@import "normalize-css/normalize";
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,600|IBM+Plex+Mono');
@import "variables";
@import "base";

// -- Components
// Contain
@import "components/c.grid";
@import "components/c.container-page";
@import "components/c.container-devise";
@import "components/c.layout-standard";
@import "components/c.section";
@import "components/c.card";
@import "components/c.header";
@import "components/c.footer";

// Content
@import "components/c.title";
@import "components/c.paragraph";
@import "components/c.list";
@import "components/c.meta";
@import "components/c.notification";

// Input
@import "components/c.navigation";
@import "components/c.button";
@import "components/c.link";
@import "components/c.input";

// -- Vendor
@import "vendor/turbolinks";


// -- Utilities
@import "utilities/u.float";
@import "utilities/u.spacing";
@import "utilities/u.border";
@import "utilities/u.clearfix";
@import "utilities/u.hide";

variables.scss

// ---- Legend
// $w-  Width
// $h-  Height
// $s-  Spacing
// $z-  Z-Index
// $bp- Breakpoint
// $g-  Grid
// $c-  Color
// $ff- Typography related

// -- Width
$w-regular: 1700px;
$w-slim: 500px;

// -- Height
$h-header: 8vh;
$h-page: calc(100vh - #{$h-header});

// -- Spacing
$s-tiny: 9px;
$s-small: 18px;
$s-regular: 36px;
$s-large: 72px;

// -- Z-Index
$z-1: 10;
$z-2: 20;
$z-3: 30;
$z-4: 40;

// -- Breakpoints
$bp-lap: "(min-width: 601px)";
$bp-desk: "(min-width: 1001px)";

// -- Grid
$g-gutter: $s-large;
$g-gutter-tiny: $s-tiny;
$g-gutter-small: $s-small;
$g-widths: (1,2,3,4,5,6,7,8,9);
$g-breakpoints: (
  "lap":    $bp-lap,
  "desk":   $bp-desk
);

// -- Colors: Brand & UI
$c-primary: #ff9941;
$c-primary-light: #ffc663;
$c-primary-xlight: #fff4e3;

$c-grey-xdark: #272727;
$c-grey-dark: #343434;
$c-grey-medium: #737373;
$c-grey-light: #EEEFF1;
$c-grey-xlight: #f7f9fb;
$c-white: #ffffff;

// -- Colors: Element / Component Specific;
$c-warning: #e63f20;
$c-border: rgba($c-grey-xdark, 0.07);

// -- Vendor Brand Colors
$c-vendor-google: #4885ed;

// -- Type
$ff-primary: (
  family: "'IBM Plex Sans', Helvetica, Arial, sans-serif",
  light: 300,
  regular: 400,
  medium: 500,
  bold: 600,
);

$ff-mono: (
  family: "'IBM Plex Mono', monospace",
  regular: 400
);

$ff-baseline: 1.6;
$ff-base-size: 13px;

// -- Misc
$border-radius: 3px;
$transition-speed: 0.15s;