@graupl/graupl 1.0.0-alpha.13 → 1.0.0-alpha.15

package/docs/content.md

@@ -0,0 +1,237 @@
+# Content
+
+## Table
+
+Default Values
+
+```jsx
+// Table selectors.
+$table-selector: "table" !default;
+$table-caption-selector: "caption" !default;
+$table-header-selector: "th" !default;
+$table-cell-selector: "td" !default;
+$table-row-selector: "tr" !default;
+$table-head-selector: "thead" !default;
+$table-body-selector: "tbody" !default;
+$table-foot-selector: "tfoot" !default;
+$table-theme-prefix-selector: "." !default;
+$table-bordered-selector: ".bordered" !default;
+$table-collapsed-selector: ".collapsed" !default;
+$table-striped-columns-selector: ".striped-columns" !default;
+$table-striped-rows-selector: ".striped-rows" !default;
+$table-hoverable-selector: ".hoverable" !default;
+$table-highlight-selector: ".highlight" !default;
+$table-responsive-selector: ".responsive-table" !default;
+
+// Table properties.
+$table-caption-side: bottom !default;
+
+// Table theme defaults.
+// This map is used to define the default colour shades for the
+// themed table bases.
+//
+// e.g.
+// Primary tables will use primary--700 as the header background,
+// and primary--100 as the header text colour.
+//
+// Secondary/tertiary tables will use the same shade for their respective colours.
+$base-table-theme-map: (
+  header-background: 700,
+  header-color: 100,
+  striped-background: 200,
+  striped-color: 900,
+  hover-background: 300,
+  hover-color: 900,
+  border-color: 900,
+  highlight-background: 500,
+  highlight-color: 100,
+);
+$custom-table-theme-map: () !default;
+$table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);
+```
+
+Table Caption Properties
+
+```jsx
+--#{root-defaults.$prefix}-table-caption-side
+--#{root-defaults.$prefix}-table-caption-padding-x
+--#{root-defaults.$prefix}-table-caption-padding-y
+```
+
+Table Header Properties
+
+```jsx
+--#{root-defaults.$prefix}-table-header-font-weight
+--#{root-defaults.$prefix}-table-header-padding-x
+--#{root-defaults.$prefix}-table-header-padding-y
+--#{root-defaults.$prefix}-table-header-background
+--#{root-defaults.$prefix}-table-header-color
+```
+
+Table Cell Properties
+
+```jsx
+--#{root-defaults.$prefix}-table-cell-padding-x
+--#{root-defaults.$prefix}-table-cell-padding-y
+--#{root-defaults.$prefix}-table-cell-background
+--#{root-defaults.$prefix}-table-cell-color
+```
+
+Table Border Properties
+
+```jsx
+--#{root-defaults.$prefix}-table-border-width
+--#{root-defaults.$prefix}-table-border-style
+--#{root-defaults.$prefix}-table-border
+--#{root-defaults.$prefix}-table-border-color
+```
+
+Table cell border properties
+
+```jsx
+--#{root-defaults.$prefix}-table-cell-border-width
+--#{root-defaults.$prefix}-table-cell-border-style
+--#{root-defaults.$prefix}-table-cell-border
+--#{root-defaults.$prefix}-table-cell-border-color
+```
+
+Table striped properties
+
+```jsx
+--#{root-defaults.$prefix}-table-striped-background
+--#{root-defaults.$prefix}-table-striped-color
+```
+
+Table hover properties
+
+```jsx
+--#{root-defaults.$prefix}-table-hover-background
+--#{root-defaults.$prefix}-table-hover-color
+```
+
+Table highlight properties
+
+```jsx
+--#{root-defaults.$prefix}-table-highlight-background
+--#{root-defaults.$prefix}-table-highlight-color
+```
+
+## Link
+
+Default Values
+
+```jsx
+// Link selectors.
+$link-selector: "a" !default;
+$stretched-link-selector: ".stretched" !default;
+$stretched-link-pseudo-selector: "before" !default;
+
+// Link properties.
+$link-text-decoration: underline !default;
+$link-visited-text-decoration: $link-text-decoration !default;
+$link-active-text-decoration: $link-text-decoration !default;
+$link-hover-text-decoration: $link-text-decoration !default;
+$link-focus-text-decoration: $link-text-decoration !default;
+$link-disabled-text-decoration: $link-text-decoration !default;
+$link-text-decoration-style: solid !default;
+$link-visited-text-decoration-style: $link-text-decoration-style !default;
+$link-active-text-decoration-style: $link-text-decoration-style !default;
+$link-hover-text-decoration-style: $link-text-decoration-style !default;
+$link-focus-text-decoration-style: $link-text-decoration-style !default;
+$link-disabled-text-decoration-style: $link-text-decoration-style !default;
+$link-transform: none !default;
+$link-visited-transform: $link-transform !default;
+$link-focus-transform: $link-transform !default;
+$link-hover-transform: $link-transform !default;
+$link-active-transform: $link-transform !default;
+$link-disabled-transform: $link-transform !default;
+$link-border-width: 0 !default;
+$link-border-color: transparent !default;
+$link-visited-border-color: $link-border-color !default;
+$link-focus-border-color: $link-border-color !default;
+$link-hover-border-color: $link-border-color !default;
+$link-active-border-color: $link-border-color !default;
+$link-disabled-border-color: $link-border-color !default;
+$link-background: transparent !default;
+$link-visited-background: $link-background !default;
+$link-focus-background: $link-background !default;
+$link-hover-background: $link-background !default;
+$link-active-background: $link-background !default;
+$link-disabled-background: $link-background !default;
+$link-min-width: auto;
+$link-min-height: auto;
+
+// Stretched link properties.
+$stretched-link-z-index: 5 !default;
+
+```
+
+Link Properties
+
+```jsx
+--#{root-defaults.$prefix}-link-text-decoration
+--#{root-defaults.$prefix}-link-visited-text-decoration
+--#{root-defaults.$prefix}-link-focus-text-decoration
+--#{root-defaults.$prefix}-link-hover-text-decoration
+--#{root-defaults.$prefix}-link-active-text-decoration
+--#{root-defaults.$prefix}-link-disabled-text-decoration
+--#{root-defaults.$prefix}-link-text-decoration-thickness
+--#{root-defaults.$prefix}-link-visited-text-decoration-thickness
+--#{root-defaults.$prefix}-link-focus-text-decoration-thickness
+--#{root-defaults.$prefix}-link-hover-text-decoration-thickness
+--#{root-defaults.$prefix}-link-active-text-decoration-thickness
+--#{root-defaults.$prefix}-link-disabled-text-decoration-thickness
+--#{root-defaults.$prefix}-link-text-decoration-style
+--#{root-defaults.$prefix}-link-visited-text-decoration-style
+--#{root-defaults.$prefix}-link-focus-text-decoration-style
+--#{root-defaults.$prefix}-link-hover-text-decoration-style
+--#{root-defaults.$prefix}-link-active-text-decoration-style
+--#{root-defaults.$prefix}-link-disabled-text-decoration-style
+--#{root-defaults.$prefix}-link-color
+--#{root-defaults.$prefix}-link-visited-color
+--#{root-defaults.$prefix}-link-focus-color
+--#{root-defaults.$prefix}-link-hover-color
+--#{root-defaults.$prefix}-link-active-color
+--#{root-defaults.$prefix}-link-disabled-color
+--#{root-defaults.$prefix}-link-text-decoration-color
+--#{root-defaults.$prefix}-link-visited-text-decoration-color
+--#{root-defaults.$prefix}-link-focus-text-decoration-color
+--#{root-defaults.$prefix}-link-hover-text-decoration-color
+--#{root-defaults.$prefix}-link-active-text-decoration-color
+--#{root-defaults.$prefix}-link-disabled-text-decoration-color
+--#{root-defaults.$prefix}-link-background
+--#{root-defaults.$prefix}-link-visited-background
+--#{root-defaults.$prefix}-link-focus-background
+--#{root-defaults.$prefix}-link-hover-background
+--#{root-defaults.$prefix}-link-active-background
+--#{root-defaults.$prefix}-link-disabled-background
+--#{root-defaults.$prefix}-link-padding-x
+--#{root-defaults.$prefix}-link-padding-y
+--#{root-defaults.$prefix}-link-padding
+--#{root-defaults.$prefix}-link-transition
+--#{root-defaults.$prefix}-link-transition-reduced-motion
+--#{root-defaults.$prefix}-link-transform
+--#{root-defaults.$prefix}-link-visited-transform
+--#{root-defaults.$prefix}-link-focus-transform
+--#{root-defaults.$prefix}-link-hover-transform
+--#{root-defaults.$prefix}-link-active-transform
+--#{root-defaults.$prefix}-link-disabled-transform
+--#{root-defaults.$prefix}-link-border-width
+--#{root-defaults.$prefix}-link-border-style
+--#{root-defaults.$prefix}-link-border
+--#{root-defaults.$prefix}-link-border-radius
+--#{root-defaults.$prefix}-link-border-color
+--#{root-defaults.$prefix}-link-visited-border-color
+--#{root-defaults.$prefix}-link-focus-border-color
+--#{root-defaults.$prefix}-link-hover-border-color
+--#{root-defaults.$prefix}-link-active-border-color
+--#{root-defaults.$prefix}-link-disabled-border-color
+--#{root-defaults.$prefix}-link-min-width
+--#{root-defaults.$prefix}-link-min-height
+```
+
+Stretch Link
+
+```jsx
+--#{root-defaults.$prefix}-stretched-link-z-index
+```

package/docs/defaults.md

@@ -0,0 +1,121 @@
+# Global Defaults and Variables
+
+## Defaults
+
+```sass
+// Prefix for custom properties and other naming conventions.
+$prefix: "graupl" !default;
+
+// Settings.
+$use-important: true !default;
+
+// Layout properties.
+$content-max-width: 96ch !default;
+
+// Screen sizes.
+$base-screen-sizes: (
+  xs: "(width <= 48ch)",
+  sm: "(48ch < width)",
+  md: "(72ch < width)",
+  lg: "(108ch < width)",
+  xl: "(156ch < width)",
+);
+$custom-screen-sizes: () !default;
+$screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes);
+$base-screen-size-triggers: (
+  navigation-collapse: "(width <= 72ch)",
+  navigation-expand: "(72ch < width)",
+  force-vertical-card: "(width <= 72ch)",
+);
+$custom-screen-size-triggers: () !default;
+$screen-size-triggers: map.merge(
+  $base-screen-size-triggers,
+  $custom-screen-size-triggers
+);
+
+// Spacing properties.
+$spacer: 1rem !default;
+$base-spacer-multipliers: (
+  0: 0,
+  1: 0.125,
+  2: 0.25,
+  3: 0.5,
+  4: 0.75,
+  5: 1,
+  6: 1.5,
+  7: 2,
+  8: 3,
+  9: 5,
+  10: 10,
+);
+$custom-spacer-multipliers: () !default;
+$spacer-multipliers: map.merge(
+  $base-spacer-multipliers,
+  $custom-spacer-multipliers
+);
+
+// Size properties.
+$interactive-min-width: 44px !default;
+$interactive-min-height: 44px !default;
+
+// Border properties.
+$border-radius: 0.125rem !default;
+$border-width: 2px !default;
+$border-style: solid !default;
+
+// Transition properties.
+$transition-duration-base: 100 !default;
+$transition-timing-function: ease !default;
+$base-transition-durations: (
+  fast: #{$transition-duration-base * 1.5}ms,
+  default: #{$transition-duration-base * 2.5}ms,
+  slow: #{$transition-duration-base * 3}ms,
+);
+$custom-transition-durations: () !default;
+$transition-durations: map.merge(
+  $base-transition-durations,
+  $custom-transition-durations
+);
+```
+
+## Variables
+
+The layout properties:
+
+```scss
+--#{defaults.$prefix}-content-max-width
+
+```
+
+The spacing properties:
+
+```scss
+--#{defaults.$prefix}-spacer
+--#{defaults.$prefix}-spacer-#{$key}
+
+```
+
+The border properties:
+
+```scss
+--#{defaults.$prefix}-border-radius
+--#{defaults.$prefix}-border-width
+--#{defaults.$prefix}-border-style
+
+```
+
+The transition duration properties:
+
+```scss
+--#{defaults.$prefix}-transition-duration-fast
+--#{defaults.$prefix}-transition-duration-default
+--#{defaults.$prefix}-transition-duration-slow
+
+```
+
+The transition timing function property:
+
+```scss
+--#{defaults.$prefix}-transition-timing-function
+
+```

package/docs/forms.md

@@ -0,0 +1,79 @@
+# Form
+
+Default Values
+
+```jsx
+// Form selectors.
+$input-selector: "input" !default;
+$textarea-selector: "textarea" !default;
+$select-selector: "select" !default;
+$label-selector: "label" !default;
+$fieldset-selector: "fieldset" !default;
+
+// Fieldset properties.
+$fieldset-direction: column !default;
+```
+
+Form Properties
+
+```jsx
+--#{root-defaults.$prefix}-input-padding-x
+--#{root-defaults.$prefix}-input-padding-y
+--#{root-defaults.$prefix}-input-padding
+--#{root-defaults.$prefix}-input-font-size
+--#{root-defaults.$prefix}-label-font-size
+--#{root-defaults.$prefix}-fieldset-direction
+--#{root-defaults.$prefix}-fieldset-gap
+--#{root-defaults.$prefix}-fieldset-padding-x
+--#{root-defaults.$prefix}-fieldset-padding-y
+--#{root-defaults.$prefix}-fieldset-padding
+--#{root-defaults.$prefix}-fieldset-font-size
+```
+
+Background Properties
+
+```jsx
+--#{root-defaults.$prefix}-input-background
+--#{root-defaults.$prefix}-fieldset-background
+```
+
+Text Properties
+
+```jsx
+--#{root-defaults.$prefix}-input-color
+--#{root-defaults.$prefix}-input-placeholder-color
+--#{root-defaults.$prefix}-label-color
+--#{root-defaults.$prefix}-fieldset-color
+--#{root-defaults.$prefix}-input-disabled-color
+--#{root-defaults.$prefix}-input-disabled-placeholder-color
+--#{root-defaults.$prefix}-label-disabled-color
+--#{root-defaults.$prefix}-fieldset-disabled-color
+```
+
+Border Properties
+
+```jsx
+--#{root-defaults.$prefix}-input-border-width
+--#{root-defaults.$prefix}-botton-border-style
+--#{root-defaults.$prefix}-input-border
+--#{root-defaults.$prefix}-input-border-radius
+--#{root-defaults.$prefix}-fieldset-border-width
+--#{root-defaults.$prefix}-fieldset-border-style
+--#{root-defaults.$prefix}-fieldset-border
+--#{root-defaults.$prefix}-fieldset-border-radius
+```
+
+Border Colour Properties
+
+```jsx
+--#{root-defaults.$prefix}-input-border-color
+--#{root-defaults.$prefix}-input-disabled-border-color
+--#{root-defaults.$prefix}-fieldset-border-color
+--#{root-defaults.$prefix}-fieldset-disabled-border-color
+```
+
+Accent Colour Properties
+
+```jsx
+--#{root-defaults.$prefix}-input-accent-color
+```

package/docs/functions.md

@@ -0,0 +1,9 @@
+# Functions
+
+A function to get the specific theme shades.
+
+`*@function* get($color, $shade)`
+
+A function to determine if the !important flag should be added to a property.
+
+`*@function* insert($value)`

package/docs/getting-started.md

@@ -0,0 +1 @@
+# Getting Started

package/docs/index.md

@@ -1,7 +1 @@
----
-layout: home
-
-hero:
-  name: "Graupl"
-  tagline: "A modular and modern CSS framework."
----
+# Welcome to Graupl

package/docs/introduction.md

@@ -1,5 +1,25 @@
+---
+layout: home
+
+hero:
+  name: "Graupl"
+  tagline: "A modular and modern CSS framework."
+---
+
 # Introduction
 
-Graupl is a collection of Sass utilities and components that can be used to build a website or web application. It is designed to be flexible and customizable, so you can use as much or as little of it as you need.
+Graupl is a collection of Sass utilities and components that can be used to build a website or web application. It is designed to be flexible and customizable, so you can use as much or as little of it as you need. Quickly get up to speed with [Compiling Graupl]( /compiling-graupl ), to get your project ready. Then check out the [Getting Started]( /getting-started ) page for the next steps. Or jump into the [Components]( /components/index ) section to get an idea of something you can build.
+
+## Table of Contents
 
-We need a lot more documentation, so sit tight!
+- [Compiling Graupl]( /compiling-graupl )
+- [Introduction]( /introduction )
+- [Layout]( /layout )
+- [Content]( /content )
+- [Forms]( /forms )
+- [Components]( /components/index )
+- [Functions]( /functions )
+- [Mixins]( /mixins )
+- [State]( /state )
+- [Theme]( /theme )
+- [Defaults]( /defaults )

package/docs/layout.md

@@ -0,0 +1,200 @@
+# Layout Documentation
+
+## Layout
+
+### Columns
+
+Default Values
+
+```jsx
+// Columns selectors.
+$columns-selector: ".columns" !default;
+$columns-count-selector-prefix: ".count-" !default;
+$columns-span-selector-prefix: ".span-" !default;
+
+// Columns properties.
+$columns-max-width: 1fr !default;
+$columns-count: 3 !default;
+$columns-min-count: 1 !default;
+$columns-max-count: 6 !default;
+$columns-span: 1 !default;
+```
+
+Variables
+
+The columns row and column gap properties:
+
+```scss
+--#{root-defaults.$prefix}-columns-row-gap
+--#{root-defaults.$prefix}-columns-column-gap
+
+```
+
+The columns count property:
+
+```scss
+--#{root-defaults.$prefix}-columns-count
+
+```
+
+The columns min-width property:
+
+```scss
+--#{root-defaults.$prefix}-columns-min-width
+
+```
+
+The columns max-width property:
+
+```scss
+--#{root-defaults.$prefix}-columns-max-width
+
+```
+
+The columns grid template columns property:
+
+```scss
+--#{root-defaults.$prefix}-columns-grid-template-columns
+
+```
+
+The columns span property:
+
+```scss
+--#{root-defaults.$prefix}-columns-span
+
+```
+
+### Container
+
+Defaults
+
+```jsx
+// Container selectors.
+$container-selector: ".container" !default;
+$container-breakout-selector: ".breakout" !default;
+$container-feature-selector: ".feature" !default;
+$container-full-width-selector: ".full-width" !default;
+
+// Container properties.
+$container-breakout-width: 15ch !default;
+$container-feature-width: 20ch !default;
+```
+
+Variables
+
+The container gap property:
+
+```scss
+--#{root-defaults.$prefix}-container-gap
+```
+
+The container content max width property:
+
+```scss
+--#{root-defaults.$prefix}-container-content-max-width
+```
+
+The container breakout max width property:
+
+```scss
+--#{root-defaults.$prefix}-container-breakout-max-width
+```
+
+The container breakout width property:
+
+```scss
+--#{root-defaults.$prefix}-container-breakout-width
+```
+
+The container feature max width property:
+
+```scss
+--#{root-defaults.$prefix}-container-feature-max-width
+```
+
+The container feature width property:
+
+```scss
+--#{root-defaults.$prefix}-container-feature-width
+```
+
+The container content section width property:
+
+```scss
+--#{root-defaults.$prefix}-container-content-section-width
+```
+
+The container full width section width property:
+
+```scss
+--#{root-defaults.$prefix}-container-full-width-section-width
+```
+
+The container breakout section width property:
+
+```scss
+--#{root-defaults.$prefix}-container-breakout-section-width
+```
+
+The container feature section width property:
+
+```scss
+--#{root-defaults.$prefix}-container-feature-section-width
+```
+
+### Flex Columns
+
+Defaults
+
+```jsx
+// Flex columns selectors.
+$flex-columns-selector: ".flex-columns" !default;
+$flex-columns-column-selector-prefix: ".col-" !default;
+$flex-columns-fill-selector: ".fill" !default;
+
+// Flex columns properties.
+$flex-columns-min-count: 1 !default;
+$flex-columns-max-count: 12 !default;
+$flex-columns-size: auto !default;
+$flex-columns-max-width: unset !default;
+```
+
+Variables
+
+```jsx
+--#{root-defaults.$prefix}-flex-columns-row-gap
+--#{root-defaults.$prefix}-flex-columns-column-gap
+--#{root-defaults.$prefix}-flex-columns-size
+--#{root-defaults.$prefix}-flex-columns-max-width
+```
+
+Markup
+
+```jsx
+    <div class="py-10 full-width container">
+      <h2>Flex columns</h2>
+      <div class="flex-columns py-5">
+        <div class="col-6 col-md-8 col-xl-9 py-7 bg-primary-700 text-primary-100 px-5">
+          <div class="flex-columns">
+            <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
+            <div class="col-6 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
+          </div>
+        </div>
+        <div class="col-6 col-md-4 col-xl-3 py-7 bg-primary-700 text-primary-100 px-5"></div>
+        <div class="col-12 py-7 bg-primary-700 text-primary-100 px-5">
+          <div class="flex-columns">
+            <div class="col-6 col-md-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
+            <div class="col-6 col-md-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
+          </div>
+        </div>
+        <div class="col-8 py-7 bg-primary-700 text-primary-100 px-5">
+          <div class="flex-columns">
+            <div class="col-3 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
+            <div class="col-9 py-7 bg-tertiary-700 text-primary-100 px-5"></div>
+          </div>
+        </div>
+        <div class="col-4 py-7 bg-primary-700 text-primary-100 px-5"></div>
+      </div>
+    </div>
+```