Clean up, more components and elements (#97)

#97 - Clean up KSS Adds KSS comments everywhere setting the structure for the styleguide navigation.
SU-SWS · Apr 18, 2018 · 61e0264 · 61e0264
1 parent 85f8fec
commit 61e0264
Show file tree

Hide file tree

Showing 471 changed files with 36,445 additions and 7,292 deletions.
diff --git a/css/decanter.css b/css/decanter.css
diff --git a/scss/elements/_buttons.scss → scss/components/atoms/_buttons.scss b/scss/elements/_buttons.scss → scss/components/atoms/_buttons.scss
@@ -5,12 +5,14 @@
 //
 // Simple button element to aid in creating interactive design.
 //
-// Markup: ../../templates/elements/buttons/buttons.html.twig
+// .decanter-button--secondary - Secondary button
+// .decanter-button--big - Big button
+// .decanter-button--unstyled - Unstyled button
 //
-// Style guide: Core.Elements.Buttons
+// Markup: ../../templates/components/atoms/buttons/buttons.html.twig
+//
+// Style guide: Atoms.Buttons
 //
-
-// Primary button (default).
 .decanter-button,
 a.decanter-button,
 button,
@@ -21,19 +23,16 @@ button,
   @include button-primary;
 }
 
-// Secondary button.
 .decanter-button--secondary,
 a.decanter-button--secondary {
   @include button-secondary;
 }
 
-// Big button.
 .decanter-button--big,
 a.decanter-button--big {
   @include button-big;
 }
 
-// For removing styling from buttons.
 .decanter-button--unstyled,
 a.decanter-button--unstyled {
   @include button-unstyled;

diff --git a/scss/components/atoms/_media-block.scss b/scss/components/atoms/_media-block.scss
@@ -3,12 +3,13 @@
 //
 // Media Block Image
 //
-// TODO: Describe what this does.
+// Floats an image to the left and provides a specified margin right. To be used
+// when floating images alongside other content.
 //
 // Markup:
 // <img class="decanter-media-block__img" src="../../../img/circle.png" alt="Alt text">
 //
-// Styleguide: Components.Atoms.MediaBlockImg
+// Style guide: Atoms.MediaBlockImg
 //
 .decanter-media-block__img {
   @include media-block-img;
@@ -17,16 +18,17 @@
 //
 // Media Block Body
 //
-// TODO: Describe what this does. Does this really need to exist?
+// Allows for text that is next to a floated media block image to flow within
+// the grid without dropping to a new line prematurely.
 //
 // Markup:
 // <div class="decanter-media-block__body">
 //  <h2>Lorem ipsum dolor sit</h2>
 //  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 // </div>
 //
-// Styleguide: Components.Atoms.MediaBlockBody
+// Style guide: Atoms.MediaBlockBody
 //
 .decanter-media-block__body {
-  overflow: hidden;
+  @include overflow;
 }
diff --git a/scss/components/atoms/_skipnav.scss b/scss/components/atoms/_skipnav.scss
@@ -9,7 +9,7 @@
 //
 // Markup: ../../templates/components/atoms/skipnav/skipnav.html.twig
 //
-// Styleguide: Components.Atoms.Skipnav
+// Style guide: Atoms.Skipnav
 //
 .decanter-skipnav {
   @include skipnav;

diff --git a/scss/components/atoms/index.scss b/scss/components/atoms/index.scss
@@ -5,5 +5,6 @@
 ///
 
 @import
+  'buttons',
   'media-block',
   'skipnav';
diff --git a/scss/components/index.scss b/scss/components/index.scss
@@ -1,10 +1,5 @@
 @charset "UTF-8";
 
-//
-// Components
-//
-// Style guide: Components
-
 // Atoms
 //
 // Atoms are the basic building blocks of matter. Applied to web interfaces,
@@ -15,7 +10,9 @@
 // their own. However, they’re good as a reference in the context of a pattern
 // library as you can see all your global styles laid out at a glance.
 //
-// Style guide: Components.Atoms
+// Weight: -1
+// 
+// Style guide: Atoms
 
 // Molecules
 //
@@ -27,7 +24,9 @@
 // but combine them together as a form and now they can actually do something
 // together.
 //
-// Style guide: Components.Molecules
+// Weight: -1
+//
+// Style guide: Molecules
 
 // Organisims
 //
@@ -48,9 +47,20 @@
 // again. Building up from molecules to organisms encourages creating
 // standalone, portable, reusable components.
 //
-// Style guide: Components.Organisims
+// Weight: -1
+//
+// Style guide: Organisims
+
+//
+// Templates
+//
+// Weight: -1
+//
+// Style guide: Templates
+//
 
 @import
   'atoms/index',
   'molecules/index',
-  'organisms/index';
+  'organisms/index',
+  'templates/index';
diff --git a/scss/components/molecules/_alerts.scss b/scss/components/molecules/_alerts.scss
@@ -14,7 +14,7 @@
 //
 // Markup: ../templates/components/molecules/alerts/alerts.html.twig
 //
-// Style guide: Components.Molecules.Alerts
+// Style guide: Molecules.Alerts
 //
 .decanter-alert {
   @include alerts;

diff --git a/scss/components/molecules/_icon-grid.scss b/scss/components/molecules/_icon-grid.scss
@@ -7,7 +7,7 @@
 //
 // Markup: ../../templates/components/molecules/icon-grid/icon-grid.html.twig
 //
-// Style guide: Components.Molecules.IconGrid
+// Style guide: Molecules.IconGrid
 //
 .decanter-icon-grid {
   @include icon-grid;

diff --git a/scss/components/molecules/_main-menu.scss b/scss/components/molecules/_main-menu.scss
@@ -7,7 +7,7 @@
 //
 // Markup: ../../../templates/components/molecules/main-menu/main-menu.html.twig
 //
-// Styleguide: Components.Molecules.MainMenu
+// Style guide: Molecules.MainMenu
 //
 .decanter-main-menu {
   @include main-menu;

diff --git a/scss/components/molecules/_mega-menu.scss b/scss/components/molecules/_mega-menu.scss
@@ -3,11 +3,13 @@
 //
 // Mega Menu
 //
-// This is a mega menu.
+// An expandable menu in which choices are displayed in a two-dimensional
+// dropdown layout. Excellent design choice for accommodating a large number of
+// options or for revealing lower-level site pages at a glance.
 //
 // Markup: <h2>Hello</h2>
 //
-// Style guide: Components.Molecules.Mega Menu
+// Style guide: Molecules.Mega Menu
 //
 .decanter-megamenu {
   @include megamenu;

diff --git a/scss/components/molecules/_sidenav.scss b/scss/components/molecules/_sidenav.scss
@@ -1,9 +1,14 @@
 @charset "UTF-8";
 
 //
-// SIDENAV COMPONENT
+// Sidenav
+//
+// A side navigation component.
+//
+// Markup: ../../templates/components/molecules/sidenav/sidenav.html.twig
+//
+// Style guide: Molecules.Sidenav
 //
-
 .decanter-sidenav__list {
   @include sidenav-list;
 }

diff --git a/scss/components/organisms/_accordions.scss b/scss/components/organisms/_accordions.scss
@@ -11,7 +11,7 @@
 //
 // Markup: ../../templates/components/organisms/accordions/accordions.html.twig
 //
-// Styleguide: Components.Organisims.Accordion
+// Style guide: Organisims.Accordion
 //
 .decanter-accordion {
   @include accordion-list;

diff --git a/scss/components/organisms/_hero-banner.scss b/scss/components/organisms/_hero-banner.scss
diff --git a/scss/components/organisms/index.scss b/scss/components/organisms/index.scss
@@ -5,5 +5,4 @@
 ///
 
 @import
-  'accordions',
-  'hero-banner';
+  'accordions';
diff --git a/scss/components/templates/index.scss b/scss/components/templates/index.scss
@@ -1,5 +1,8 @@
-//
-// Templates
-//
-// Style guide: Templates
-// 
+@charset "UTF-8";
+
+///
+/// ROLL UP
+///
+
+// @import
+//   'template-file-name';
diff --git a/scss/core/index.scss b/scss/core/index.scss
@@ -7,14 +7,20 @@
 
 // Fonts
 //
+// Markup: ../../templates/core/fonts/fonts.html.twig
+//
 // Style guide: Core.Fonts
 
 // Grid
 //
+// Markup: ../../templates/core/grid/grid.html.twig
+//
 // Style guide: Core.Grid
 
 // Colors
 //
+// Markup: ../templates/core/colors/colors.html.twig
+//
 // Style guide: Core.Colors
 
 @import

diff --git a/scss/elements/_embed.scss b/scss/elements/_embed.scss
@@ -3,10 +3,13 @@
 //
 // Embed
 //
-
 // Responsive embed container to ensure that contents scale to the
 // width of parent element while retaining an aspect ratio of 16:9.
-
+//
+// Markup: ../../templates/elements/embed/embed.html.twig
+//
+// Style guide: Elements.EmbedContainer
+//
 .decanter-embed-container {
   @include embed-container($aspect-height, $aspect-width);
 }
diff --git a/scss/elements/_links.scss b/scss/elements/_links.scss
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+//
+// Links
+//
+// Default link styling, as well as special link treatment styling.
+//
+// .decanter-external-link  - External Link
+// .decanter-more-link      - More Link
+//
+// Markup: ../../templates/elements/links/links.html.twig
+//
+// Style guide: Elements.Links
+//
+a {
+  @include link;
+}
+
+.decanter-external-link {
+  @include external-link(external-link, external-link-hover);
+}
+
+.decanter-more-link {
+  @include more-link(more-link, more-link-hover);
+}
diff --git a/scss/elements/_list.scss b/scss/elements/_list.scss
@@ -1,9 +1,14 @@
 @charset "UTF-8";
 
 //
-// List
+// Lists
+//
+// Default styling for lists, including ordered and unordered lists.
+//
+// Markup: ../../templates/elements/lists/lists.html.twig
+//
+// Style guide: Elements.Lists
 //
-
 ul,
 ol {
   @include margin(1em null);

diff --git a/scss/elements/_table.scss b/scss/elements/_table.scss
@@ -1,9 +1,18 @@
 @charset "UTF-8";
 
 //
-// Table
+// Tables
+//
+// Default styling for tables. For displaying tabular data that best lends
+// itself to being layed out in columns and rows.
+// Modifier class available to remove tables borders.
+//
+// .decanter-table--borderless  - Borderless Table
+//
+// Markup: ../../templates/elements/tables/tables.html.twig
+//
+// Style guide: Elements.Tables
 //
-
 table {
   @include tables;
 }

diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss
@@ -3,7 +3,20 @@
 //
 // Typography
 //
-
+// Default typography styling for base HTML typography elements, including
+// paragraphs and headings. Also includes special type treatment classes such as
+// splash font and lead font.
+//
+// .decanter-font-lead          - Lead Font
+// .decanter-font-splash        - Splash Font
+// .decanter-short-line-length  - Short Line Length
+// .decanter-caption            - Caption Font
+// .decanter-credits            - Credits Font
+//
+// Markup: ../../templates/elements/font-styles/font-styles.html.twig
+//
+// Style guide: Elements.Typography
+//
 html {
   font-family: $font-sans;
   font-size: $em-base;
@@ -20,18 +33,6 @@ p {
   @include margin(1em null);
 }
 
-a {
-  @include link;
-}
-
-.decanter-external-link {
-  @include external-link(external-link, external-link-hover);
-}
-
-.decanter-more-link {
-  @include more-link(more-link, more-link-hover);
-}
-
 h1,
 h2,
 h3,