cacao-css 3.20.0 → 4.0.0

package/src/css/components/grid/README.md

@@ -1,107 +0,0 @@
-# Grid
-
-A CSS grid component. The grid makes use of `flexbox` to provide features that 
-float-based layouts cannot. 
-
-
-
-Basic visual tests are in [`test/modules/grid.html`](http://aptuitiv.github.io/cacao/test/modules/grid.html).
-
-**Note**: This component relies on particular dimensions being applied to cells in
-the grid via other classes. For example,
-[size utilities](https://github.com/aptuitiv/cacao/tree/master/lib/utils/size).
-
-
-## Features
-
-* Fluid layout.
-* Intelligent cell wrapping.
-* Evenly fit cell spacing
-* Equal height columns
-* Horizontal centering of cells.
-* Custom vertical alignment of cells (top, bottom, or middle).
-* Cell width is controlled independently of grid gutter.
-* Infinite nesting.
-
-
-## Available classes
-
-* `Grid`: core component
-* `Grid--alignCenter`: center-align all child `Grid-cell`
-* `Grid--alignRight`: right-align all child `Grid-cell`
-* `Grid--alignMiddle`: middle-align all child `Grid-cell`
-* `Grid--alignBottom`: bottom-align all child `Grid-cell`
-* `Grid--fit`: evenly distribute space amongst all child `Grid-cell`
-* `Grid--equalHeight`: all child `Grid-cell` match height of the tallest
-* `Grid--withGutter`: adds a gutter between cells
-* `Grid--withGutterSm`: adds a smaller gutter between cells
-* `Grid--withGutterLg`: adds a larger gutter between cells
-* `Grid-cell`: a child cell of `Grid` that wraps grid content
-* `Grid-cell--center`: center an individual `Grid-cell`
-
-
-
-## Configurable variables
-
-* `--Grid-cell-gutter`: the width of the gutter applied by the 
-  `Grid--withGutter` modifier class.
-
-
-## Use
-
-A simple grid is easy to create. A grid container can have any number of child
-cells. When used with `Grid--fit` space is evenly distributed without need for
-sizing utilities.
-
-```html
-<div class="Grid Grid--fit Grid--withGutter">
-  <div class="Grid-cell"></div>
-  <div class="Grid-cell"></div>
-  <div class="Grid-cell"></div>
-  <div class="Grid-cell"></div>
-</div>
-```
-
-For more granular control over layout make use of modifiers, sizing, and 
-position utilities.
-
-```html
-<div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fit|Grid--equalHeight]">
-  <div class="Grid-cell u-size1of2 u-lg-size6of12"></div>
-  <div class="Grid-cell u-size1of2 u-push1of2 u-lg-size4of12 u-lg-pushNone"></div>
-  <div class="Grid-cell u-size1of3 u-pull1of2 u-lg-size2of12 u-lg-pullNone"></div>
-  <div class="Grid-cell u-size1of3"></div>
-</div>
-```
-
-### Widths and offsets
-
-Cell widths and offsets, and column ordering can be controlled using the 
-[size utilities](https://github.com/aptuitiv/cacao/tree/master/lib/utils/size) 
-and [push](https://github.com/aptuitiv/cacao/tree/master/lib/utils/push) / 
-[pull](https://github.com/aptuitiv/cacao/tree/master/lib/utils/push),
-respectively.
-
-```html
-<div class="Grid Grid--withGutter">
-  <div class="Grid-cell u-size1of2 u-lg-size6of12"></div>
-  <div class="Grid-cell u-size1of2 u-push1of2 u-lg-size4of12 u-lg-pushNone"></div>
-  <div class="Grid-cell u-size1of3 u-pull1of2 u-lg-size2of12 u-lg-pullNone"></div>
-  <div class="Grid-cell u-size1of3"></div>
-</div>
-```
-
-You can nest grids in any context, but keep in mind that the dimensions will 
-be relative to the containing element's width.
-
-```html
-<div class="Grid Grid--alignCenter">
-  <div class="Grid-cell u-size2of3">
-    <div class="Grid Grid--withGutter">
-      <div class="Grid-cell u-size1of2"> <!-- 50% width of the parent Grid -->
-        {{>partial}}
-      </div>
-    </div>
-  </div>
-</div>
-```

package/src/css/components/grid/grid.css

@@ -1,150 +0,0 @@
-/* ==========================================================================
-   Grid
-   ========================================================================== */
-
-/** @define Grid */
-
-/**
- * Flex-box grid component
- *
- * Note: Relies on particular dimensions being applied to cells via
- * other classes. For example, `size` utilities.
- *
- * DO NOT apply dimension or offset utilities to the `Grid` element. All cell
- * widths and offsets should be applied to child grid cells.
- */
-
-:root {
-    --Grid-cell-gutter: 20px;
-}
-
-/* Grid container
-   ========================================================================== */
-
-/**
- * All content must be contained within child `Grid-cell` elements.
- *
- * 1. Account for browser defaults of elements that might be the root node of
- *    the component.
- */
-
-.Grid {
-    display: flex; /* 1 */
-    flex-flow: row wrap;
-    list-style: none; /* 1 */
-    margin: 0; /* 1 */
-    padding: 0; /* 1 */
-}
-
-/**
- * Modifier: center align all grid cells
- */
-
-.Grid--alignCenter {
-    justify-content: center;
-}
-
-/**
- * Modifier: right align all grid cells
- */
-
-.Grid--alignRight {
-    justify-content: flex-end;
-}
-
-/**
- * Modifier: middle-align grid cells
- */
-
-.Grid--alignMiddle {
-    align-items: center;
-}
-
-/**
- * Modifier: bottom-align grid cells
- */
-
-.Grid--alignBottom {
-    align-items: flex-end;
-}
-
-/**
- * Modifier: allow cells to equal distribute width
- *
- * 1. Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7
- *    Use `0%` to avoid bug in IE10/11 with unitless flex basis - http://git.io/vllWx
- */
-
-.Grid--fit > .Grid-cell {
-    flex: 1 1 0%; /* 1 */
-}
-
-/**
- * Modifier: all cells match height of tallest cell in a row
- */
-
-.Grid--equalHeight > .Grid-cell {
-    display: flex;
-}
-
-/**
- * Modifier: gutters
-*/
-
-.Grid--withGutter {
-    margin-left: calc(var(--Grid-cell-gutter) * -1);
-}
-
-.Grid--withGutter > .Grid-cell {
-    padding-left: var(--Grid-cell-gutter);
-}
-
-.Grid--withGutterSm {
-    margin-left: calc(var(--Grid-cell-gutter) / -2);
-}
-
-.Grid--withGutterSm > .Grid-cell {
-    padding-left: calc(var(--Grid-cell-gutter) / 2);
-}
-
-.Grid--withGutterLg {
-    margin-left: calc(var(--Grid-cell-gutter) * -2);
-}
-
-.Grid--withGutterLg > .Grid-cell {
-    padding-left: calc(var(--Grid-cell-gutter) * 2);
-}
-
-.Grid--withGutterXlg {
-    margin-left: calc(var(--Grid-cell-gutter) * -3);
-}
-
-.Grid--withGutterXlg > .Grid-cell {
-    padding-left: calc(var(--Grid-cell-gutter) * 3);
-}
-
-/* Grid cell
-   ========================================================================== */
-
-/**
- * Rely on combining `Grid-cell` with a dimension utility or a component
- * class that extends 'grid'.
- *
- * 1. Set flex items to full width by default
- */
-
-.Grid-cell {
-    flex: 0 0 100%; /* 1 */
-    margin: 0;
-    padding: 0;
-}
-
-/**
- * Modifier: horizontally center one unit
- * Set a specific unit to be horizontally centered. Doesn't affect
- * any other units. Can still contain a child `Grid` object.
- */
-
-.Grid-cell--center {
-    margin: 0 auto;
-}

package/src/css/components/grid/index.css

@@ -1 +0,0 @@
-@import './grid';

package/src/css/components/header/index.css

@@ -1 +0,0 @@
-@import './header.css';

package/src/css/components/image/README.md

@@ -1,66 +0,0 @@
-# Image
-
-Generic component that applies common treatments to `<img>` elements.
-
-Basic visual tests are in [`test/modules/image.html`](http://aptuitiv.github.io/cacao/test/modules/image.html).
-
-## Image
-
-### Available classes
-
-* `Image`: Base component.
-* `Image--left`: Float image left.
-* `Image--right`: Float image right.
-
-
-### Configurable variables
-
-* `--Image-spacing`: Spacing applied to bottom of images.
-
-
-### Usage
-
-```html
-<p>
-  <img class="Image Image--right" src="{ src }">
-  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-</p>
-```
-
-## Image Wrapper
-
-Provides styles to display an image on a page centered, floated left or floated right along with other content like a caption.
-
-### Available Classes
-
-* `ImageWrapper`: Base component.
-* `ImageWrapper--left`: Float image left.
-* `ImageWrapper--center`: Align the image center.
-* `ImageWrapper--right`: Float image right.
-
-### Usage
-
-```html
-<div class="ImageWrapper ImageWrapper--right">
-    <img src="/path/to/image.jpg" alt="Image" width="200" height="120">
-</div>
-```
-
-## Image Caption
-
-Provides styles for an image caption to be displayed below the image.
-
-The ImageCaption class works best when paired with the ImageWrapper classes.
-
-### Available classes
-
-* `ImageCaption`: Base component.
-
-### Usage
-
-```html
-<div class="ImageWrapper ImageWrapper--right">
-    <img src="/path/to/image.jpg" alt="Image" width="200" height="120">
-    <div class="ImageCaption">Image Caption Here</div>
-</div>
-```

package/src/css/components/image/caption.css

@@ -1,13 +0,0 @@
-/* =========================================================================== *\
-    Image Caption
-\* =========================================================================== */
-
-
-/* @define ImageCaption */
-
-.ImageCaption {
-    font-size: .9em;
-    font-style: italic;
-    padding: 2px 8px 4px;
-    text-align: center;
-}

package/src/css/components/image/image.css

@@ -1,59 +0,0 @@
-/* ==========================================================================
-   Image
-   ========================================================================== */
-
-/** @define Image; weak */
-
-/**
- * Commonly used image treatments to use on bare <img> tags.
- */
-
-:root {
-    --Image-spacing: 10px;
-}
-
-/**
- * Base
- */
-
-.Image {
-    height: auto;
-    margin-bottom: var(--Image-spacing);
-    max-width: 100%;
-}
-
-/**
- * Floated images inside content
- *
- * 1. Make sure image does not take up too much space.
- */
-
-.Image--left,
-.Image--right {
-    max-width: 40%; /* 1 */
-}
-
-.Image--left {
-    float: left;
-    margin-right: 1em;
-}
-
-.Image--right {
-    float: right;
-    margin-left: 1em;
-}
-
-.Image--fullWidth {
-    width: 100%;
-}
-
-@media (--c-bp-sm) {
-    .Image--left,
-    .Image--right {
-        display: block;
-        float: none;
-        margin-left: 0;
-        margin-right: 0;
-        max-width: 100%;
-    }
-}

package/src/css/components/image/index.css

@@ -1,3 +0,0 @@
-@import './caption';
-@import './image';
-@import './wrapper';

package/src/css/components/image/wrapper.css

@@ -1,44 +0,0 @@
-/* =========================================================================== *\
-    Image wrapper for floating images left/right with other content like a caption
-\* =========================================================================== */
-
-
-/* @define ImageWrapper */
-
-.ImageWrapper {
-    margin-bottom: var(--Image-spacing);
-}
-
-.ImageWrapper--default {
-    display: inline-block;
-}
-
-.ImageWrapper--left,
-.ImageWrapper--right {
-    max-width: 40%;
-}
-
-.ImageWrapper--left {
-    float: left;
-    margin-right: 1em;
-}
-
-.ImageWrapper--right {
-    float: right;
-    margin-left: 1em;
-}
-
-.ImageWrapper--center {
-    text-align: center;
-}
-
-@media (--c-bp-sm) {
-    .ImageWrapper--left,
-    .ImageWrapper--right {
-        display: block;
-        float: none;
-        margin-left: 0;
-        margin-right: 0;
-        max-width: 100%;
-    }
-}

package/src/css/components/index.css

@@ -1,17 +0,0 @@
-@import './breadcrumb';
-@import './button';
-@import './constrain';
-@import './container';
-@import './content';
-@import './flexembed';
-@import './footer';
-@import './form';
-@import './grid';
-@import './header';
-@import './image';
-@import './list';
-@import './media';
-@import './message';
-@import './navigation';
-@import './pagination';
-@import './triangle';

package/src/css/components/list/README.md

@@ -1,36 +0,0 @@
-# List
-
-Generic list component that applies common treatments to `<ul>` and 
-`<ol>` elements.
-
-Basic visual tests are in [`test/modules/list.html`](http://aptuitiv.github.io/cacao/test/modules/list.html).
-
-
-## Available classes
-
-* `List`: Base component.
-* `List--inline`: Inline layout
-* `List--spaced`: Spaced inline layout.
-* `List--gutter`: Inline layout with gutters.
-* `List--gutterLg`: Inline layout with larger gutters.
-* `List--barred`: Bar separated inline layout.
-* `List--dotted`: Dot separated inline layout.
-
-
-## Configurable variables
-
-* `--List-barred-spacing`: Spacing between bars and list items.
-* `--List-dotted-spacing`: Spacing between dots and list items.
-* `--List-gutter-spacing`: Size of list gutters.
-* `--List-spaced-spacing`: Size of spaced list spaces.
-
-
-## Usage
-
-```html
-<ul class="List List--dotted">
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ul>
-```

package/src/css/components/list/columns.css

@@ -1,42 +0,0 @@
-/* =========================================================================== *\
-    Column Lists
-    Convert a ul/ol into columns
-\* =========================================================================== */
-
-
-/* @define ColumnList */
-
-.ColumnList {
-    column-gap: 50px;
-}
-
-.ColumnList--noStyle {
-    list-style: none;
-    padding-left: 0;
-}
-
-.ColumnList--2column {
-    column-count: 2;
-}
-
-.ColumnList--3column {
-    column-count: 3;
-}
-
-.ColumnList--4column {
-    column-count: 4;
-}
-
-@media (--c-bp-md) {
-    .ColumnList--4column {
-        column-count: 2;
-    }
-}
-
-@media (--c-bp-sm) {
-    .ColumnList--2column,
-    .ColumnList--3column,
-    .ColumnList--4column {
-        column-count: 1;
-    }
-}

package/src/css/components/list/index.css

@@ -1,2 +0,0 @@
-@import './columns';
-@import './list';