ITCSS improvements and automatics style guide generation

generators/app/templates/styles/itcss/components/_components.buttons.scss

@@ -0,0 +1,60 @@
+/* ==========================================================================
+   #BUTTONS
+   ========================================================================== */
+
+/**
+ * This is an example component. Extend inuitcss by building your own components
+ * that make up your UI. Component classes are prefixed with a `c-`.
+ */
+
+/**
+ * 1. Allow us to style box model properties.
+ * 2. Line different sized buttons up a little nicer.
+ * 3. Make buttons inherit font styles (often necessary when styling `input`s as
+ *    buttons).
+ * 4. Reset/normalize some styles.
+ * 5. Force all button-styled elements to appear clickable.
+ */
+
+.c-btn {
+  display: inline-block; /* [1] */
+  vertical-align: middle; /* [2] */
+  font: inherit; /* [3] */
+  text-align: center; /* [4] */
+  margin: 0; /* [4] */
+  cursor: pointer; /* [5] */
+  padding: 0.5rem 1rem;
+  transition: $global-transition;
+  border-radius: $global-radius;
+}
+
+/* Style variants
+   ========================================================================== */
+
+.c-btn--primary {
+  background-color: $color-link;
+
+  &,
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none; /* [4] */
+    color: $color-white;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-hover;
+  }
+}
+
+/* Size variants
+   ========================================================================== */
+
+.c-btn--small {
+  padding: 0.25rem 0.5rem;
+}
+
+.c-btn--large {
+  padding: 0.75rem 1.5rem;
+}

generators/app/templates/styles/itcss/components/_components.footer.scss

@@ -0,0 +1,10 @@
+/* ==========================================================================
+   #FOOTER
+   ========================================================================== */
+
+.c-footer {
+  border-top: 1px solid $color-border;
+  font-size: 0.875rem;
+  margin-top: 2rem;
+  padding-top: 0.5em;
+}

generators/app/templates/styles/itcss/components/_components.style-guide.scss

@@ -0,0 +1,55 @@
+/* ==========================================================================
+   #STYLEGUIDE
+   ========================================================================== */
+
+$style-guide-color-medium: #666;
+$style-guide-color-light: #999;
+$style-guide-color-border: #ccc;
+
+.c-style-guide__intro {
+  border: 1px solid $style-guide-color-border;
+  border-bottom-width: 2px;
+  border-right-width: 2px;
+  margin: 2em 0 1em 0;
+  padding: 2em;
+}
+
+.c-style-guide__title {
+  color: $style-guide-color-medium;
+  font-size: 1.25rem;
+  font-weight: normal;
+  margin: 0 0 0.25em 0;
+  text-transform: uppercase;
+}
+
+.c-style-guide__desc {
+  color: $style-guide-color-medium;
+  margin: 0;
+}
+
+.c-style-guide__section {
+  @include clearfix();
+  padding: 1rem 0;
+}
+
+.c-style-guide__section-title {
+  border-bottom: 1px solid $style-guide-color-border;
+  clear: both;
+  color: $style-guide-color-medium;
+  font-size: 1.25rem;
+  font-weight: normal;
+  padding-bottom: 0.5em;
+  text-transform: uppercase;
+  width: 50%;
+}
+
+.c-style-guide__section-subtitle {
+  border-left: 6px solid $style-guide-color-border;
+  clear: both;
+  color: $style-guide-color-light;
+  font-size: 1.125rem;
+  font-weight: normal;
+  margin: 2em 0;
+  padding-left: 1em;
+  text-transform: uppercase;
+}

generators/app/templates/styles/itcss/elements/_elements.headings.scss

@@ -0,0 +1,33 @@
+/* ==========================================================================
+   #HEADINGS
+   ========================================================================== */
+
+/**
+ * Simple default styles for headings 1 through 6. Anything more opinionated
+ * than simple font-size changes should likely be applied via classes (see:
+ * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
+ */
+
+h1 {
+  font-size: 2.25rem;
+}
+
+h2 {
+  font-size: 1.75rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+h5 {
+  font-size: 1.125rem;
+}
+
+h6 {
+  font-size: 1rem;
+}

generators/app/templates/styles/itcss/elements/_elements.hr.scss

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   #HR
+   ========================================================================== */
+
+hr {
+  display: block;
+}

generators/app/templates/styles/itcss/elements/_elements.images.scss

@@ -0,0 +1,28 @@
+/* ==========================================================================
+   #IMAGES
+   ========================================================================== */
+
+/**
+ * 1. Fluid images for responsive purposes.
+ * 2. Offset `alt` text from surrounding copy.
+ * 3. Setting `vertical-align` removes the whitespace that appears under `img`
+ *    elements when they are dropped into a page as-is. Safer alternative to
+ *    using `display: block;`.
+ */
+
+img {
+  font-style: italic; /* [2] */
+  max-width: 100%; /* [1] */
+  vertical-align: middle; /* [3] */
+}
+
+
+/**
+ * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
+ *    not make the image fluid.
+ */
+
+img[width], /* [1] */
+img[height] {  /* [1] */
+  max-width: none;
+}

generators/app/templates/styles/itcss/elements/_elements.links.scss

@@ -0,0 +1,12 @@
+/* ==========================================================================
+   #LINKS
+   ========================================================================== */
+
+a {
+  color: $color-link;
+  text-decoration: underline;
+
+  &:hover {
+    color: $color-hover;
+  }
+}

generators/app/templates/styles/itcss/elements/_lists.scss → generators/app/templates/styles/itcss/elements/_elements.lists.scss

@@ -1,4 +1,6 @@
-// Lists
+/* ==========================================================================
+   #LISTS
+   ========================================================================== */
 
 li {
   margin-bottom: 0.5rem;

generators/app/templates/styles/itcss/elements/_elements.page.scss

@@ -0,0 +1,37 @@
+/* ==========================================================================
+   #PAGE
+   ========================================================================== */
+
+/**
+ * Simple page-level setup.
+ *
+ * 1. Set the default `font-size` and `line-height` for the entire project.
+ * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
+ *    navigating between pages that do/do not have enough content to produce
+ *    scrollbars naturally.
+ * 3. Ensure the page always fills at least the entire height of the viewport.
+ */
+
+html {
+  background: $color-bg;
+  color: $color-text;
+  font-family: $font-sans-serif;
+  font-size: 0.8125rem; /* [1] */ /* 13px */
+  line-height: 1.5; /* [1] */
+  min-height: 100%; /* [3] */
+  overflow-y: scroll; /* [2] */
+  padding: 1rem;
+
+  @include bp-medium {
+    font-size: 0.875em; /* 14px */
+  }
+
+  @include bp-large {
+    font-size: 0.9375em; /* 15px */
+  }
+
+  @include bp-full {
+    font-size: 1em; /* 16px */
+  }
+}
+

generators/app/templates/styles/itcss/elements/_elements.tables.scss

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   #TABLES
+   ========================================================================== */
+
+/**
+ * 1. Ensure tables fill up as much space as possible.
+ */
+
+table {
+  width: 100%; /* [1] */
+}

generators/app/templates/styles/itcss/generic/_generic.box-sizing.scss

@@ -0,0 +1,20 @@
+/* ==========================================================================
+   #BOX-SIZING
+   ========================================================================== */
+
+/**
+ * More sensible default box-sizing:
+ * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+ */
+
+html {
+  box-sizing: border-box;
+}
+
+* {
+  &,
+  &:before,
+  &:after {
+    box-sizing: inherit;
+  }
+}

generators/app/templates/styles/itcss/generic/_generic.normalize.scss

@@ -0,0 +1,5 @@
+/* ==========================================================================
+   #NORMALIZE
+   ========================================================================== */
+
+@import 'normalize-scss/sass/normalize/import-now';