diff --git a/.gitignore b/.gitignore index 86b73e2..4b11432 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ .sass-cache .DS_Store -codekit-config.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 2025d40..6f14309 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,25 +1,1414 @@ -## 1.3.1 -**July 4, 2013** +Changelog +========= + +3.5.0 - 2016-04-05 +------------------- + +### Added + +- List Reset mixin +- Stretch mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + +3.4.0 - 2015-09-30 +------------------ + +### Added + +- `pin--xcenter` and `pin--ycenter` + +### Removed + +- Nothing + +### Fixed + +- Updated Pin Component position modifier names + +3.3.0 - 2015-06-05 +------------------- + +### Added + +- Handle Component +- Select Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +3.2.1 - 2015-04-29 +------------------ + +### Added + +- Opacity tool + +### Removed + +- Nothing + +### Fixed + +- Sector Component dimensions + +3.1.1 - 2015-04-29 +------------------ + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Better opacity tool class names + +3.1.0 - 2015-04-29 +------------------ + +### Added + +- Pin Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +3.0.0 - 2015-04-22 +------------------ + +### Added + +- Underline Component + +### Removed + +- `highlight--bordered` modifier + +### Fixed + +- Nothing + +2.31.2 - 2015-04-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- The Highlight Component hover color + +2.31.1 - 2015-04-22 +------------------- + +### Added + +- Additional variable for the Highlight Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.31.0 - 2015-04-22 +------------------- + +### Added + +- `highlight--bordered` variant to Highlight Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.30.2 - 2015-04-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Set the `border-bottom` instead of `border` on the Highlight Component + +2.30.1 - 2015-04-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- The Highlight Component hover color + +2.30.0 - 2015-04-22 +------------------- + +### Added + +- Highlight Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.29.2 - 2015-04-02 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Collection structure margin right +- Flexbox Collection structure margin right + +2.29.1 - 2015-03-20 +------------------- + +### Added + +- `.form-help` flush margin + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.29.0 - 2015-03-11 +------------------- + +### Added + +- `strip-unit` function + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.28.1 - 2015-03-11 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Move `z-index` function to `_functions.sass` + +2.28.0 - 2015-03-11 +------------------- + +### Added + +- Link Structure + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.27.1 - 2015-03-10 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `.btn--warning--bordered` class + +2.27.0 - 2015-03-10 +------------------- + +### Added + +- `width` Tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.26.1 - 2015-03-10 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Collection structure `padding-right` property name + +2.26.0 - 2015-03-10 +------------------- + +### Added + +- Collection gutter and margin standarization +- Collection CodePen link +- Flexbox Collection structure + +### Removed + +- Nothing + +### Fixed + +- Flexbox Sector width magic number +- Collection dependency syntax + +2.25.1 - 2015-03-09 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Button Component `--borderd` modifier classes + +2.25.0 - 2015-03-07 +------------------- + +### Added + +- `+action` mixin +- Better Button Component (additional variants, better organization) + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.24.1 - 2015-03-05 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `$b-fontSize-m` in Form Component + +2.24.0 - 2015-03-05 +------------------- + +### Added + +- Additional scaffolding to Form Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.23.0 - 2015-03-05 +------------------- + +### Added + +- `table--enclosed` modifier to the Table Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.22.1 - 2015-02-26 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Tool negative position values should end with `n` + +2.22.0 - 2015-02-25 +------------------- + +### Added + +- Animate Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.21.1 - 2015-02-19 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Typo in Foundation Tools list name + +2.21.0 - 2015-02-06 +------------------- + +### Added + +- Small modifier to the Table Component + +### Removed + +- Nothing + +### Fixed + +- Style update to the Table Component + +2.20.2 - 2015-02-05 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Spacing standards + +2.20.1 - 2015-02-04 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- The Sass comment Haml template documentation + +2.20.0 - 2015-01-21 +------------------- + +### Added + +- Range Component + +### Removed + +- `.form-field` horizontal margins when used on `fieldset` elements + +### Fixed + +- Encapsulate Video Structure descendant elements + +2.19.0 - 2015-01-21 +------------------- + +### Added + +- `zi` Mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.18.1 - 2015-01-21 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- More consistent comment structure across Extends, Functions, and Mixins + +2.18.0 - 2015-01-21 +------------------- + +### Added + +- `shade` and `tint` Functions + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.17.0 - 2015-01-15 +------------------- + +### Added + +- Foundation Tools for small-number pixel positioning values +- Foundation Tools for setting background colors based on palette +- Foundation Tools for setting text colors based on palette + +### Removed + +- Nothing + +### Fixed + +- Update Foundation Tools comment heading to 'Vertical Alignment' + +2.16.0 - 2015-01-14 +------------------- + +### Added + +- Additional Foundation Tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.15.2 - 2015-01-14 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Update spacing of `+state` mixin + +2.15.1 - 2015-01-13 +------------------- + +### Added + +- Additional variables to Foundation Base + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.15.0 - 2015-01-13 +------------------- + +### Added + +- Additional Foundation Tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.14.3 - 2015-01-01 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Update spacing across files + +2.14.2 - 2014-12-10 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Remove accidental code duplication in Flex Sector + +2.14.1 - 2014-12-09 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Update Bar Component positioning modifiers + +2.14.0 - 2014-12-03 +------------------- + +### Added + +- Nothing + +### Removed + +- Progress Component `boxSizing` helper +- `keyframe-animation` mixin +- `middle` extend vendor prefixes + +### Fixed + +- Nothing + +2.13.2 - 2014-11-24 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Changed inline operations to use trailing figures +- Changed Card Rows to use verbose `north` and `south` modifiers + +2.13.1 - 2014-11-07 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Flexbox Split Component vertical alignment + +2.13.0 - 2014-11-03 +------------------- + +### Added + +- Flexbox Bucket Component +- Flexbox Split Component + +### Removed + +- Split Component `img` element handling + +### Fixed + +- Split Component `.split--divided` modifier top padding + + +2.12.3 - 2014-10-31 +------------------- + +### Added + +- CodePen comments to relevant modules +- Sticker component `authored` modifier + +### Removed + +- Sticker Component number modifiers + +### Fixed + +- Moved Sector and Flexbox Sector Component colors to variables + +2.12.2 - 2014-10-24 +------------------- + +### Added + +- Sticker Component Haml template + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.12.1 - 2014-10-23 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `$sticker-borderColor` variable + +2.12.0 - 2014-10-22 +------------------- + +### Added + +- Video Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.11.2 - 2014-10-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Moved `components/_flexSector.sass` to new `components/flexbox` directory. + +2.11.1 - 2014-10-21 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Cleaned up the Card Component + +2.11.0 - 2014-10-15 +------------------- + +### Added + +- Sticker Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.10.0 - 2014-10-12 +------------------- + +### Added + +- Base (Foundation) starter + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.9.0 - 2014-10-10 +------------------- + +### Added + +- Sector Component +- Flex Sector Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.8.0 - 2014-10-08 +------------------- + +### Added + +- State mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.7.6 - 2014-09-13 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Collection Structure clearfixing when using multiple modifiers + +2.7.5 - 2014-09-03 +------------------- + +### Added + +- Nothing + +### Removed + +- `docs/patterns/bash-mvcss.md` file + +### Fixed + +- Nothing + +2.7.4 - 2014-08-28 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Table Component heading alignment in IE + +2.7.3 - 2014-08-25 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Missing `!default` flag in Card Component + +2.7.2 - 2014-08-21 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Minor cleanup of Dropdown Component + +2.7.1 - 2014-08-21 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `z-index` on Dropdown Component + +2.7.0 - 2014-08-20 +------------------- + +### Added + +- Dropdown Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.6.0 - 2014-08-18 +------------------- + +### Added + +- Column Component +- `structures` directory +- Collection Structure +- `respond-within` mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.5.2 - 2014-08-13 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Better variable setup for Button Component +- Better comments for Components + +2.5.1 - 2014-08-06 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Comments for the `+caret` Mixin +- Replace need for `+stretch` Compass Mixin in `+caret` Mixin + +2.5.0 - 2014-07-30 +------------------- + +### Added + +- `.lr` Extend (list reset) + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.4.1 - 2014-07-30 +------------------- + +### Added + +- Nothing + +### Removed + +- Duplicate property on `.card-row` + +### Fixed + +- Nothing + +2.4.0 - 2014-07-30 +------------------- + +### Added + +- Card Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.3.2 - 2014-07-30 +------------------- + +### Added + +- `position: relative` to Bar Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.3.1 - 2014-07-29 +------------------- + +### Added + +- Nothing + +### Removed + +- The `line-height` from the Bar Component + +### Fixed + +- Nothing + +2.3.0 - 2014-07-29 +------------------- + +### Added + +- New Bar Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.2.3 - 2014-07-29 +------------------- + +### Added + +- Nothing + +### Removed + +- `boxSizing` extend in Panel Component + +### Fixed + +- Nothing + +2.2.2 - 2014-07-28 +------------------- + +### Added + +- Nothing + +### Removed + +- `boxSizing` extend in Form Component + +### Fixed + +- Nothing + +2.2.1 - 2014-07-28 +------------------- + +### Added + +- First and last-child selectors to `split-cell` + +### Removed + +- `split-cell` modifiers + +### Fixed + +- Nothing + +2.2.0 - 2014-07-23 +------------------- + +### Added + +- `size` mixin + +### Removed + +- `retina-image` mixin + +### Fixed + +- Nothing + +2.1.1 - 2014-07-19 +------------------- + +### Added + +- `opposite-position()` function + +### Removed + +- Nothing + +### Fixed + +- Added `opposite-position()` function to panel Component + +2.1.0 - 2014-07-02 +------------------- + +### Added + +- Pillar Component +- Split variables + +### Removed + +- Nothing + +### Fixed + +- `.list--bordered` now `.list-divided` + +2.0.4 - 2014-07-01 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Better defaults for the panel Component + +2.0.3 - 2014-07-01 +------------------- + +### Added + +- Better comments for tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.0.2 - 2014-07-01 +------------------- + +### Added + +- Better comments for components + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.0.1 - 2014-07-01 +------------------- + +### Added + +- Bordered list style to the list component + +### Removed + +- Nothing + +### Fixed + +- Nothing + +2.0.0 - 2014-07-01 +------------------- + +### Added + +- **Foundation** functions, extends, helpers +- Several **Components** + +### Removed + +- JS components + +### Fixed + +- Rename **Helpers** to **Foundation** +- Rename **Modules** to **Components** + +1.4.1 - 2014-07-30 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Security vulnerability in hash URLs component by sanitizing `window.location.hash` + +1.4.0 - 2014-07-10 +------------------- + +### Added + +- New **Helpers - Extends** file + +### Removed + +- Nothing + +### Fixed + +- Nothing + +1.3.1 - 2014-07-04 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Refactor hash URL component -## 1.3.0 -**July 4, 2013** +1.3.0 - 2014-07-04 +------------------- + +### Added - Add new bucket module -## 1.2.1 -**June 27, 2013** +### Removed + +- Nothing + +### Fixed + +- Nothing + +1.3.0 - 2014-06-27 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Update to MVCSS v3.0.1 (new comment hierarchy) -## 1.2.0 -**May 17, 2013** +1.2.0 - 2014-05-17 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Convert $.hashURLs to a HashURLs CoffeeScript class -## 1.1.0 -**May 16, 2013** +1.1.0 - 2014-05-16 +------------------- + +### Added - Better defaults for **Modules - Button** - Better defaults for **Modules - Flag** @@ -29,47 +1418,121 @@ - Better defaults for **Modules - Tab** - Remove `.tab-content` from **Modules - Tab** - Better defaults for **Modules - Table** + +### Removed + - Remove `border-collapse` and `border-spacing` from **Modules - Table** because those are set in `Normalize` -## 1.0.0 -**May 15, 2013** +### Fixed + +- Nothing + +1.0.0 - 2014-05-16 +------------------- + +### Added -- Strip full application down to `modules`, `components`, and `helpers` -- Remove placeholder modules - Add default variables to all modules - Add new flag module -## 0.9.0 -**March 8, 2013** +### Removed + +- Strip full application down to `modules`, `components`, and `helpers` +- Remove placeholder modules + +### Fixed + +- Nothing + +0.9.0 - 2014-03-08 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Fix incorrect version -## 0.8.2 -**March 8, 2013** +0.8.2 - 2014-03-08 +------------------- + +### Added - Add `retina-image` mixin - Comment headings for the mixins + +### Removed + - Remove unnecessary context font size on the base paragraphs -## 0.8.1 -**March 6, 2013** +### Fixed + +- Nothing + +0.8.1 - 2014-03-08 +------------------- + +### Added - Add `.is-active` state to `.list--block` modifier + +### Removed + +- Nothing + +### Fixed + - Update `.list` variables -## 0.8.0 -**March 6, 2013** +0.8.1 - 2014-03-06 +------------------- + +### Added - Add a `.list--block` modifier to the `.list` module - Add a **Typography** module -- Fix an incorrect comment heading -## 0.7.1 -**March 1, 2013** +### Removed + +- Nothing + +### Fixed + +- Incorrect comment heading + +0.7.1 - 2014-03-01 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Adjust the `.grid` module to account for a bug in WebKit -## 0.7.0 -**February 22, 2013** +0.7.0 - 2014-02-22 +------------------- + +### Added - Initial version applied + +### Removed + +- Nothing + +### Fixed + +- Nothing + diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..6aaa6fb --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Drew Barontini + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 2af647c..615cf14 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,211 @@ -# MVCSS Library +MVCSS Library +============= -**Version 1.3.1** +Foundation +---------- -## Modules/Helpers +Choose the Sass extends, functions, and mixins from `/foundation` to include in your [MVCSS](http://mvcss.github.io/) project. -Choose the Sass modules you want from `/modules` to include in your [MVCSS](http://mvcss.github.io/) project. +### Authoring Example -Choose the Sass extends, functions, mixins, and general helpers from `/helpers` to include in your [MVCSS](http://mvcss.github.io/) project. +**Extends** -## Components +```sass +// ----- Extend Name ----- // -Choose the JS components you want from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. +.extend + // ... +``` -## Documentation +**Functions** + +```sass +// ----- Function Name ----- // +// -> Description +// +// $arg - the argument description + +@function name($arg) + // ... +``` + +**Mixins** + +```sass +// ----- Mixin Name ----- // +// -> Description +// +// $arg - the argument description + +=name($arg) + // ... +``` + +**Tools** + +```sass +// ------------------------------------- +// Tool Section Name +// ------------------------------------- + +.name + // ... +``` + +Components +---------- + +Choose the Sass components from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. + +### Authoring Example + +```sass +// ************************************* +// +// Component +// -> Description +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-context +// +// .component[modifier](state) +// +// .component-scaffolding +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ... + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +// ... (with the !default flag) + +// ----- Sizing ----- // + +// ... (with the !default flag) + +// ------------------------------------- +// Base +// ------------------------------------- + +.component + // ... + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Modifier Name ----- // + +.component--modifier + // ... + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Scaffolding Name ----- // + +.component-scaffolding + // ... +``` + +Structures +---------- + +Choose the Sass structures from `/structures` to include in your [MVCSS](http://mvcss.github.io/) project. + +### Authoring Example + +```sass +// ************************************* +// +// Structure +// -> Description +// +// ------------------------------------- +// Dependencies +// ------------------------------------- +// +// - components/grid +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-context +// +// .structure[modifier](state) +// +// .structure-scaffolding +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ... + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +// ... (with the !default flag) + +// ----- Sizing ----- // + +// ... (with the !default flag) + +// ------------------------------------- +// Base +// ------------------------------------- + +.component + // ... + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Modifier Name ----- // + +.component--modifier + // ... + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Scaffolding Name ----- // + +.structure-scaffolding + // ... +``` + +Documentation +------------- The documentation, for anything that requires more full documentation than the source file, is included in `/docs`. + +Contributing +------------ + +We use [Semantic Versioning](http://semver.org) for all versioning. When you make a **Major**, **Minor**, or **Patch** update, you'll need to the do the following: + +- Update the `CHANGELOG.md` file +- Add the new tag locally +- Push the tag (along with your commit(s)) diff --git a/components/_animate.sass b/components/_animate.sass new file mode 100644 index 0000000..cd5c900 --- /dev/null +++ b/components/_animate.sass @@ -0,0 +1,188 @@ +// ************************************* +// +// Animate +// -> Movement and effects +// CodePen: http://codepen.io/drewbarontini/pen/vErBjO +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .animate[fadeIn|slideDown|... infinite 1|2|3...] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Settings ----- // + +$animate-duration: 1s !default +$animate-effects-basic: fadeIn, fadeOut, scaleDown, scaleUp, slideDown, slideUp !default +$animate-effects-fancy: bounce, fadeInDown, fadeInUp, flash, shake, tada !default +$animate-steps: 4 !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.animate + animation-duration: $animate-duration + animation-fill-mode: both + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Effects ----- // + +// Basic + +@each $effect in $animate-effects-basic + + .animate--#{$effect} + animation-name: $effect + +// Fancy + +@each $effect in $animate-effects-fancy + + .animate--#{$effect} + animation-name: $effect + +// ----- Infinite ----- // + +.animate--infinite + animation-iteration-count: infinite + +// ----- Steps ----- // + +@for $i from 1 through $animate-steps + + .animate--#{$i} + animation-delay: ($animate-duration * $i) - $animate-duration + +// ------------------------------------- +// Animations: Basic +// ------------------------------------- + +// ----- Fade In ----- // + +@keyframes fadeIn + from + opacity: 0 + to + opacity: 1 + +// ----- Fade Out ----- // + +@keyframes fadeOut + from + opacity: 1 + to + opacity: 0 + +// ----- Scale Down ----- // + +@keyframes scaleDown + from + transform: scale(2) + to + transform: scale(1) + +// ----- Scale Up ----- // + +@keyframes scaleUp + from + transform: scale(0) + to + transform: scale(1) + +// ----- Slide Down ----- // + +@keyframes slideDown + from + transform: translateY(-100%) + to + transform: translateY(0) + +// ----- Slide Up ----- // + +@keyframes slideUp + from + transform: translateY(100%) + to + transform: translateY(0) + +// ------------------------------------- +// Animations: Fancy (Animate.css) +// -> Credit: http://daneden.github.io/animate.css/ +// ------------------------------------- + +// ----- Bounce ----- // + +@keyframes bounce + 0%, 20%, 53%, 80%, 100% + transform: translate3d(0,0,0) + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) + 40%, 43% + transform: translate3d(0, -30px, 0) + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060) + 70% + transform: translate3d(0, -15px, 0) + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060) + 90% + transform: translate3d(0,-4px,0) + +// ----- Fade In Down ----- // + +@keyframes fadeInDown + 0% + opacity: 0 + transform: translate3d(0, -100%, 0) + 100% + opacity: 1 + transform: none + +// ----- Fade In Up ----- // + +@keyframes fadeInUp + 0% + opacity: 0 + transform: translate3d(0, 100%, 0) + 100% + opacity: 1 + transform: none + +// ----- Flash ----- // + +@keyframes flash + 0%, 50%, 100% + opacity: 1 + 25%, 75% + opacity: 0 + +// ----- Shake ----- // + +@keyframes shake + 0%, 100% + transform: translate3d(0, 0, 0) + 10%, 30%, 50%, 70%, 90% + transform: translate3d(-10px, 0, 0) + 20%, 40%, 60%, 80% + transform: translate3d(10px, 0, 0) + +// ----- Tada ----- // + +@keyframes tada + 0% + transform: scale3d(1, 1, 1) + 10%, 20% + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) + 30%, 50%, 70%, 90% + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) + 40%, 60%, 80% + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) + 100% + transform: scale3d(1, 1, 1) diff --git a/components/_bar.sass b/components/_bar.sass new file mode 100644 index 0000000..4943695 --- /dev/null +++ b/components/_bar.sass @@ -0,0 +1,87 @@ +// ************************************* +// +// Bar +// -> Sticky bar +// CodePen: http://codepen.io/drewbarontini/pen/zuchq +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-bar[context] +// +// .bar[north|south|east|west header|footer fixed] +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$bar-background: #333 !default + +// ----- Sizing ----- // + +$bar-height: 50px !default +$bar-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.bar + background: $bar-background + box-sizing: border-box + height: $bar-height + padding: 0 $bar-space + position: absolute + width: 100% + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Fixed ----- // + +.bar--fixed + position: fixed + +// ----- Positioning ----- // + +.bar--north + top: 0 + +.bar--south + bottom: 0 + +.bar--east + right: 0 + +.bar--west + left: 0 + +// ----- Types ----- // + +.bar--header + @extend .bar--north + @extend .bar--east + @extend .bar--west + +.bar--footer + @extend .bar--south + @extend .bar--east + @extend .bar--west + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-bar + padding-top: $bar-height + position: relative + +.has-bar--content + margin-top: $bar-space diff --git a/components/_button.sass b/components/_button.sass new file mode 100644 index 0000000..9f44a57 --- /dev/null +++ b/components/_button.sass @@ -0,0 +1,250 @@ +// ************************************* +// +// Button +// -> Clickable control +// CodePen: http://codepen.io/drewbarontini/pen/yAveh +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-btn +// +// .btn[a|b s|l block bordered|rounded danger|success|error] +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ----- Mixins ----- // + +// ----- Action ----- // +// -> Sets clickable element defaults + +=action + border: 1px solid transparent + cursor: pointer + display: inline-block + text-align: center + text-decoration: none + white-space: nowrap + +// ----- Button Variant ----- // +// -> Creates button variations (modifiers) +// +// $background - background-color value +// $color - color value +// $borderColor - border-color value +// $bordered - bordered button (boolean) +// $scale-type - 'darken' or 'lighten' +// $scale-percent - 'darken' or 'lighten' percentage + +=btn-variant($background, $color, $borderColor, $bordered: false, $scale-type: 'darken', $scale-percent: 10%) + background-color: $background + border: $btn-borderWidth $btn-borderStyle $borderColor + color: $color + + &:hover, + &:focus, + &:active + @if $scale-type == 'darken' + background-color: darken($background, $scale-percent) + border-color: darken($borderColor, $scale-percent) + @if $scale-type == 'lighten' + background-color: lighten($background, $scale-percent) + border-color: lighten($borderColor, $scale-percent) + @if $bordered + @if $scale-type == 'darken' + color: darken($color, $scale-percent) + @if $scale-type == 'lighten' + color: lighten($color, $scale-percent) + @else + color: $color + +// ----- Button Size ----- // +// -> Creates button size variations (modifiers) +// +// $fontSize - font-size value +// $lineHeihgt - line-height value +// $padding - padding value + +=btn-size($fontSize: $btn-fontSize, $lineHeight: $btn-lineHeight, $padding: $btn-space) + font-size: $fontSize + line-height: $lineHeight + padding: 0 $padding + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Palette ----- // + +$brandy: #c6b781 +$leaf: #84b582 +$plum: #4e4e5b +$pearl: #c3c3cc +$rose: #bc6f82 +$white: #fff + +// ----- Borders ----- // + +$btn-borderWidth: 2px !default +$btn-borderStyle: solid !default +$btn-border: $btn-borderWidth $btn-borderStyle $plum !default +$btn-borderRadius: 3px !default +$btn-borderRadius-l: 20px !default + +// ----- Typography ----- // + +$btn-fontSize: 100% !default +$btn--s-fontSize: 90% !default +$btn--l-fontSize: 110% !default +$btn-lineHeight: 2.5 !default + +// ----- Sizing ----- // + +$btn-space: 2.5em !default +$btn-space-xs: $btn-space * 0.25 !default +$btn-space-s: $btn-space * 0.5 !default +$btn-space-l: $btn-space * 2 !default + +// ----- Variants ----- // + +// Primary + +$btn--a-background: $plum !default +$btn--a-color: $white !default +$btn--a-border: transparent !default + +// Secondary + +$btn--b-background: $pearl !default +$btn--b-color: $plum !default +$btn--b-border: transparent !default + +// States: Danger + +$btn--danger-background: $rose !default +$btn--danger-color: $white !default +$btn--danger-border: $rose !default + +// States: Success + +$btn--success-background: $leaf !default +$btn--success-color: $white !default +$btn--success-border: $leaf !default + +// States: Warning + +$btn--warning-background: $brandy !default +$btn--warning-color: $white !default +$btn--warning-border: $brandy !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.btn + +action + +btn-size + border-radius: $btn-borderRadius + transition: 0.2s ease-in-out + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Behavior ----- // + +.btn--block + display: block + +// ----- Hierarchy ----- // + +// Primary + +.btn--a + +btn-variant($btn--a-background, $btn--a-color, $btn--a-border) + +// Primary: Bordered + +.btn--a--bordered + +btn-variant(transparent, $btn--a-background, $btn--a-background, true, 'lighten', 30%) + +// Secondary + +.btn--b + +btn-variant($btn--b-background, $btn--b-color, $btn--b-border) + +// Secondary: Bordered + +.btn--b--bordered + +btn-variant(transparent, $btn--b-background, $btn--b-background, true, 'darken', 20%) + +// ----- Sizes ----- // + +// Small + +.btn--s + +btn-size($btn--s-fontSize, $btn-lineHeight, $btn-space-s) + +// Large + +.btn--l + +btn-size($btn--l-fontSize, $btn-lineHeight, $btn-space-l) + +// ----- Theme ----- // + +// Bordered + +.btn--bordered + +btn-variant(transparent, inherit, $plum) + +// Rounded + +.btn--rounded + border-radius: $btn-borderRadius-l + +// States: Danger + +.btn--danger + +btn-variant($btn--danger-background, $btn--danger-color, transparent) + +// States: Danger: Bordered + +.btn--danger--bordered + +btn-variant(transparent, $btn--danger-background, $btn--danger-background, true, 'darken', 20%) + +// States: Success + +.btn--success + +btn-variant($btn--success-background, $btn--success-color, transparent) + +// States: Success: Bordered + +.btn--success--bordered + +btn-variant(transparent, $btn--success-background, $btn--success-background, true, 'darken', 20%) + +// States: Warning + +.btn--warning + +btn-variant($btn--warning-background, $btn--warning-color, transparent) + +// States: Warning: Bordered + +.btn--warning--bordered + +btn-variant(transparent, $btn--warning-background, $btn--warning-background, true, 'darken', 20%) + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-btn + + .btn + margin-right: $btn-space-xs + + &:last-child + margin-right: 0 diff --git a/components/_card.sass b/components/_card.sass new file mode 100644 index 0000000..932581b --- /dev/null +++ b/components/_card.sass @@ -0,0 +1,172 @@ +// ************************************* +// +// Card +// -> Individual style container +// CodePen: http://codepen.io/drewbarontini/pen/HtEAJ +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-card-item|card-row|card-section +// +// .card[a|b f|xs|s|l] +// +// .card-row[north|south] +// +// .card-section +// +// .card-item +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$card-background: #fff !default +$card-borderColor: #dedede !default +$card-row-background: #dedede !default + +// ----- Borders & Box Shadows ----- // + +$card-borderStyle: solid !default +$card-borderWidth: 1px !default +$card-border: $card-borderWidth $card-borderStyle $card-borderColor !default +$card-borderRadius: 3px !default +$card-boxShadow: 0 2px 0 rgba(#000, 0.15) !default + +// ----- Sizing ----- // + +$card-space: 1.25em !default +$card-space-xs: $card-space * 0.25 !default +$card-space-s: $card-space * 0.5 !default +$card-space-l: $card-space * 2 !default + +$card-sizes: 'xs', 's', 'l' !default +$card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.card + border-radius: $card-borderRadius + padding: $card-space + position: relative + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Sizes ----- // + +.card--f + padding: 0 + +@for $i from 1 through length($card-sizes) + .card--#{nth($card-sizes, $i)} + padding: nth($card-size-vars, $i) + + > .card-row + margin-left: -#{nth($card-size-vars, $i)} + margin-right: -#{nth($card-size-vars, $i)} + + > .card-row--north + margin-top: -#{nth($card-size-vars, $i)} + + > .card-row--south + margin-bottom: -#{nth($card-size-vars, $i)} + + > .card-section + margin-bottom: nth($card-size-vars, $i) + padding-top: nth($card-size-vars, $i) + + &::after + bottom: -#{nth($card-size-vars, $i)} + left: -#{nth($card-size-vars, $i)} + right: -#{nth($card-size-vars, $i)} + +// ----- Theme ----- // + +.card--a + background: $card-background + box-shadow: $card-boxShadow + +.card--b + background: none + border: $card-border + box-shadow: none + +// ------------------------------------- +// Context +// ------------------------------------- + +// ----- Item ----- // + +.has-card-item + padding-bottom: $card-space * 3 + +// ----- Row ----- // + +.has-card-row + overflow: hidden + +// ----- Section ----- // + +.has-card-section + padding-top: 0 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Item ----- // + +.card-item + bottom: $card-space + left: $card-space + position: absolute + right: $card-space + +// ----- Row ----- // + +.card-row + background: $card-row-background + margin-bottom: $card-space + margin-left: -$card-space + margin-right: -$card-space + padding: $card-space-s $card-space + +.card-row--north + border-bottom: $card-border + margin-top: -$card-space + +.card-row--south + border-top: $card-border + margin-bottom: -$card-space + margin-top: $card-space + +// ----- Section ----- // + +.card-section + margin-bottom: $card-space + padding-top: $card-space + position: relative + + &:last-child + margin: 0 + + &::after + background: none + + &::after + background: $card-borderColor + bottom: -$card-space + content: '' + height: $card-borderWidth + left: -$card-space + position: absolute + right: -$card-space diff --git a/components/_column.sass b/components/_column.sass new file mode 100644 index 0000000..57f5985 --- /dev/null +++ b/components/_column.sass @@ -0,0 +1,47 @@ +// ************************************* +// +// Column +// -> Adjacent vertical blocks +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .column[1|2|3|...] +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$column-columns: 4 !default +$column-defaults: 's' 30em, 'm' 50em, 'l' 64em !default +$column-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.column + column-gap: $column-space + +// ------------------------------------- +// Setup +// ------------------------------------- + +=column-device-type($namespace: '') + @for $i from 1 through $column-columns + .column--#{$namespace}#{$i} + columns: $i + +// ------------------------------------- +// Creation +// ------------------------------------- + ++column-device-type() + +@each $device in $column-defaults + @media screen and (min-width: nth($device, 2)) + +column-device-type("#{nth($device, 1)}--") diff --git a/components/_dropdown.sass b/components/_dropdown.sass new file mode 100644 index 0000000..6025d8f --- /dev/null +++ b/components/_dropdown.sass @@ -0,0 +1,191 @@ +// ************************************* +// +// Dropdown +// -> Revealing menu +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .dropdown[center floating](active) +// +// %ul.dropdown-menu +// %li.dropdown-menu-item +// %a.dropdown-menu-item-link +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ----- Functions ----- // + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' + +// ----- Mixins ----- // + +=caret($side, $size, $color) + $opposite: opposite-position($side) + border: $size solid transparent + border-#{$opposite}: $size solid $color + border-#{$side}: 0 + bottom: auto + content: '' + display: block + height: 0 + left: 50% + margin: (-$size) 0 0 (-$size) + margin-#{$side}: 0 + position: absolute + right: auto + width: 0 + #{$side}: -$size + #{$opposite}: auto + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$dropdown-menu-background: #333 !default +$dropdown-menu-item-link-hover-background: #555 !default +$dropdown-text-invert: #fff !default + +// ----- Borders ----- // + +$dropdown-borderColor: #555 !default +$dropdown-borderStyle: solid !default +$dropdown-borderWidth: 1px !default +$dropdown-border: $dropdown-borderWidth $dropdown-borderStyle $dropdown-borderColor !default +$dropdown-borderRadius: 3px !default + +// ----- Typography ----- // + +$dropdown-menu-item-fontSize: 85% !default + +// ----- Sizing ----- // + +$dropdown-space: 1.25em !default +$dropdown-space-s: $dropdown-space * 0.5 !default +$dropdown-space-l: $dropdown-space * 2 !default +$dropdown-width: 250px !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.dropdown + position: relative + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Floating ----- // + +.dropdown--floating + + .dropdown-menu + border-radius: $dropdown-borderRadius + margin-top: $dropdown-space + transition: opacity 0.2s ease-in-out, top 0.3s ease-in-out + top: 65% + + &::before + +caret(top, 10px, $dropdown-menu-background) + left: $dropdown-space-l + z-index: 10 + + .dropdown-menu-item:first-child + + .dropdown-menu-item-link + border-top-left-radius: $dropdown-borderRadius + border-top-right-radius: $dropdown-borderRadius + +// ----- Position ----- // + +// Center + +.dropdown--center + display: inline-block + + .dropdown-menu + left: 50% + margin-left: -($dropdown-width * 0.5) + + &::before + left: 50% + +// ------------------------------------- +// States +// ------------------------------------- + +// ----- Active ----- // + +.dropdown.is-active + + .dropdown-menu + height: auto + opacity: 1 + overflow: visible + top: 100% + visibility: visible + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Menu ----- // + +.dropdown-menu + background: $dropdown-menu-background + border-bottom-left-radius: $dropdown-borderRadius + border-bottom-right-radius: $dropdown-borderRadius + height: 0 + list-style-type: none + margin: 0 + opacity: 0 + overflow: hidden + padding: 0 + position: absolute + top: 100% + transition: none + visibility: hidden + width: $dropdown-width + z-index: 10 + +// Scaffolding + +.dropdown-menu-item + font-size: $dropdown-menu-item-fontSize + margin: 0 + + &:not(:last-child) + border-bottom: $dropdown-border + + &:last-child + .dropdown-menu-item-link + border-bottom-left-radius: $dropdown-borderRadius + border-bottom-right-radius: $dropdown-borderRadius + +.dropdown-menu-item-link + border: 0 + color: $dropdown-text-invert + display: block + padding: $dropdown-space-s + transition: all 0.2s ease-in-out + + &:hover, + &:focus + background: $dropdown-menu-item-link-hover-background + color: $dropdown-text-invert diff --git a/components/_form.sass b/components/_form.sass new file mode 100644 index 0000000..859770a --- /dev/null +++ b/components/_form.sass @@ -0,0 +1,153 @@ +// ************************************* +// +// Form +// -> User input environment +// CodePen: http://codepen.io/drewbarontini/pen/mbIwj +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %form.form[s|l] +// +// %fieldset.form-field[checkbox|inline|radio] +// +// .form-field-item +// +// %label.form-label +// +// %input.form-input +// +// %select.form-select +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$form-input-background: #fff !default +$form-input-borderColor: #ddd !default +$form-input-focus-borderColor: #4e4e5b !default + +// ----- Borders ----- // + +$form-borderRadius: 2px !default +$form-input-border: 2px solid $form-input-borderColor !default + +// ----- Typography ----- // + +$form-fontSize: 100% !default +$form-fontSize-s: 90% !default + +// ----- Sizing ----- // + +$form-space: 1.25em !default +$form-space-xs: $form-space * 0.25 !default +$form-space-s: $form-space * 0.5 !default +$form-space-l: $form-space * 2 !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.form + margin-bottom: $form-space + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Sizes ----- // + +// Small + +.form--s + + .form-field + margin-bottom: $form-space-s + +// Large + +.form--l + + .form-field + margin-bottom: $form-space-l + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Field ----- // + +.form-field + border: 0 + margin: 0 0 $form-space + padding: 0 + +// Checkbox & Radio + +.form-field--checkbox, +.form-field--radio + + .form-input + display: inline-block + margin-right: $form-space-xs + width: auto + + .form-label + display: inline-block + +// Inline + +.form-field--inline + + .form-btn + display: block + line-height: 2.9 + min-width: 100% + +// Item + +.form-field-item + margin-bottom: $form-space-s + + &:last-child + margin-bottom: 0 + +// ----- Help ----- // + +.form-help + margin-bottom: 0 + +// ----- Input ----- // + +.form-input + background: $form-input-background + border: $form-input-border + border-radius: $form-borderRadius + box-sizing: border-box + font-size: $form-fontSize + padding: $form-space-s + position: relative + transition: border-color 0.2s ease-in-out + width: 100% + + &:focus + border-color: $form-input-focus-borderColor + outline: none + +// ----- Label ----- // + +.form-label + display: block + font-size: $form-fontSize-s + font-weight: bold + margin-bottom: $form-space-xs + +// ----- Select ----- // + +.form-select + min-width: 12.5em // ~200px diff --git a/components/_handle.sass b/components/_handle.sass new file mode 100644 index 0000000..b44adf3 --- /dev/null +++ b/components/_handle.sass @@ -0,0 +1,28 @@ +// ************************************* +// +// Handle +// -> Attached element +// CodePen: http://codepen.io/johndjameson/pen/toDwb +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-handle +// +// .handle +// +// ************************************* + +.handle + left: 50% + position: absolute + top: 50% + transform: translate(-50%, -50%) + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-handle + position: relative diff --git a/components/_highlight.sass b/components/_highlight.sass new file mode 100644 index 0000000..a647fd9 --- /dev/null +++ b/components/_highlight.sass @@ -0,0 +1,54 @@ +// ************************************* +// +// Highlight +// -> Highly stylized link background +// Credit: http://www.webdesignerdepot.com/ +// CodePen: http://codepen.io/drewbarontini/pen/vOYgwE +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %a.highlight +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Base ----- // + +$highlight-background: #f1c40f !default +$highlight-color: black !default + +// ----- Borders ----- // + +$highlight-border: 0 !default + +// ----- Settings ----- // + +$highlight-color-transition-speed: 0.5s !default + +// ----- Text ----- // + +$highlight-textDecoration: none !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.highlight + background-image: linear-gradient(to right, rgba(white, 0) 50%, $highlight-background 50%) + background-position: 0 0 + background-size: 200% auto + border-bottom: $highlight-border + color: $highlight-color + text-decoration: $highlight-textDecoration + transition: background-position $highlight-color-transition-speed ease-in-out + + &:active, + &:focus, + &:hover + background-position: -100% 0 + color: $highlight-color diff --git a/components/_list.sass b/components/_list.sass new file mode 100644 index 0000000..b8d62d2 --- /dev/null +++ b/components/_list.sass @@ -0,0 +1,113 @@ +// ************************************* +// +// List +// -> Enumeration of items +// CodePen: http://codepen.io/drewbarontini/pen/ouqil +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %ul.list[divided inline|object styled|styled--numbered] +// %li.list-item List Item +// %li.list-item List Item +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +.group::after + clear: both + content: '' + display: table + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Borders ----- // + +$list-border: 1px solid #ddd !default + +// ----- Sizing ----- // + +$list-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.list + list-style-type: none + margin: 0 + padding: 0 + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Divided ----- // + +.list--divided + + > .list-item + border-bottom: $list-border + padding-bottom: $list-space + + &:last-child + border-bottom: 0 + padding-bottom: 0 + +// ----- Inline ----- // + +.list--inline + + > .list-item + display: inline + margin-right: $list-space + + &:last-child + margin-right: 0 + +// ----- Object ----- // + +.list--object + @extend .group + + > .list-item + float: left + margin-right: $list-space + + &:last-child + margin-right: 0 + +// ----- Styled ----- // + +.list--styled + padding-left: $list-space + + > .list-item + display: list-item + list-style-type: disc + +// Numbered + +.list--styled--numbered + + > .list-item + list-style-type: decimal + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Item ----- // + +.list-item + display: block + margin-bottom: $list-space + + &:last-child + margin-bottom: 0 diff --git a/components/_panel.sass b/components/_panel.sass new file mode 100644 index 0000000..f2e6646 --- /dev/null +++ b/components/_panel.sass @@ -0,0 +1,146 @@ +// ************************************* +// +// Panel +// -> Sticky panel +// CodePen: http://codepen.io/drewbarontini/pen/Cxuit +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .panel[scroll top--1of2|...] +// +// .panel-content +// / ... +// +// ************************************* + +// ------------------------------------- +// Functions +// ------------------------------------- + +// ----- Opposite Position ----- // + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ----- Stretch ----- // + +.stretch + bottom: 0 + left: 0 + position: absolute + right: 0 + top: 0 + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Breakpoints ----- // + +$panel-s: 44em !default +$panel-m: 64em !default + +// ----- Settings ----- // + +$panel-defaults: 's' $panel-s, 'm' $panel-m !default +$panel-columns: 5 !default + +// ----- Sizing ----- // + +$panel-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.panel + @extend .stretch + box-sizing: border-box + overflow: hidden + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Scroll ----- // + +.panel--scroll + overflow: auto + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Content ----- // + +.panel-content + padding: $panel-space + +// ------------------------------------- +// Setup +// ------------------------------------- + +=panel-setup($side, $namespace: '') + + // ----- One Part ----- // + + .panel--#{$side}--#{$namespace}1of1 + #{opposite-position($side)}: 0 + + // ----- Two Parts ----- // + + .panel--#{$side}--#{$namespace}1of2 + #{opposite-position($side)}: 50% + + // ----- Three Parts ----- // + + @if $panel-columns >= 3 + .panel--#{$side}--#{$namespace}1of3 + #{opposite-position($side)}: 66.666% + .panel--#{$side}--#{$namespace}2of3 + #{opposite-position($side)}: 33.333% + + // ----- Four Parts ----- // + + @if $panel-columns >= 4 + .panel--#{$side}--#{$namespace}1of4 + #{opposite-position($side)}: 75% + .panel--#{$side}--#{$namespace}3of4 + #{opposite-position($side)}: 25% + + @if $panel-columns >= 5 + .panel--#{$side}--#{$namespace}1of5 + #{opposite-position($side)}: 80% + .panel--#{$side}--#{$namespace}2of5 + #{opposite-position($side)}: 60% + .panel--#{$side}--#{$namespace}3of5 + #{opposite-position($side)}: 40% + .panel--#{$side}--#{$namespace}4of5 + #{opposite-position($side)}: 20% + +// ------------------------------------- +// Creation +// ------------------------------------- + +$panel-sides: top, right, bottom, left + +@each $side in $panel-sides + +panel-setup($side) + +@each $device in $panel-defaults + @media screen and (min-width: nth($device, 2)) + @each $side in $panel-sides + +panel-setup($side, "#{nth($device, 1)}--") diff --git a/components/_pillar.sass b/components/_pillar.sass new file mode 100644 index 0000000..326b2ec --- /dev/null +++ b/components/_pillar.sass @@ -0,0 +1,41 @@ +// ************************************* +// +// Pillar +// -> Vertically capped container +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .pillar +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$pillar-borderColor: #9a9aa8 !default + +// ----- Borders & Box Shadow ----- // + +$pillar-borderStyle: solid !default +$pillar-borderWidth: 2px !default +$pillar-border: $pillar-borderWidth $pillar-borderStyle $pillar-borderColor !default + +// ----- Sizing ----- // + +$pillar-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.pillar + border-bottom: $pillar-border + border-top: $pillar-border + padding-bottom: $pillar-space + padding-top: $pillar-space diff --git a/components/_pin.sass b/components/_pin.sass new file mode 100644 index 0000000..e82ec8b --- /dev/null +++ b/components/_pin.sass @@ -0,0 +1,90 @@ +// ************************************* +// +// Pin +// -> Fastened element +// CodePen: http://codepen.io/drewbarontini/pen/jPPNdo +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// (.has-pin) +// +// .pin[ +// top|bottom|right|left +// top--s|bottom--s|right--s|left--s +// top--f|bottom--f|right--f|left--f +// top--out|bottom--out|right--out|left--out +// top--out--l|bottom--out--l|right--out--l|left--out--l +// xcenter|ycenter +// ] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Settings ----- // + +$pin-values: 'top', 'bottom', 'right', 'left' !default + +// ----- Sizing ----- // + +$pin-space: 20px !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.pin + position: absolute + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +@for $i from 1 through length($pin-values) + $side: nth($pin-values, $i) + + // ----- Base ----- // + + .pin--#{nth($pin-values, $i)} + #{$side}: $pin-space + + // ----- Small ----- // + + .pin--#{nth($pin-values, $i)}--s + #{$side}: ($pin-space / 2) + + // ----- Flush ----- // + + .pin--#{nth($pin-values, $i)}--f + #{$side}: 0 + + // ----- Out ----- // + + .pin--#{nth($pin-values, $i)}--out + #{$side}: -$pin-space + + // ----- Out Large ----- // + + .pin--#{nth($pin-values, $i)}--out--l + #{$side}: -($pin-space * 2) + +// ----- Axis Alignment ----- // + +.pin--xcenter + left: 50% + transform: translateX(-50%) + +.pin--ycenter + top: 50% + transform: translateY(-50%) + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-pin + position: relative diff --git a/components/_progress.sass b/components/_progress.sass new file mode 100644 index 0000000..20c61f8 --- /dev/null +++ b/components/_progress.sass @@ -0,0 +1,48 @@ +// ************************************* +// +// Progress +// -> Progress bar +// CodePen: http://codepen.io/drewbarontini/pen/tiorh +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .progress +// .progress-bar{ style: 'width: 65%;' } +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$progress-background: #fff !default +$progress-bar-background: #4e4e5b !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.progress + background: $progress-background + height: 10px + position: relative + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Bar ----- // + +.progress-bar + box-sizing: border-box + background: $progress-bar-background + bottom: 0 + left: 0 + max-width: 100% + position: absolute + top: 0 + z-index: 1 diff --git a/components/_range.sass b/components/_range.sass new file mode 100644 index 0000000..c4a934e --- /dev/null +++ b/components/_range.sass @@ -0,0 +1,132 @@ +// ************************************* +// +// Range +// -> Sliding user input +// CodePen: http://codepen.io/johndjameson/pen/MYmzGR/ +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %input.range{ type: 'range', min: 0, max: 100 } +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$range-thumb-background: #ddd !default +$range-track-background: #ccc !default + +// ----- Track ----- // + +// Borders & Box Shadows + +$range-track-border: 0 !default +$range-track-borderRadius: 0 !default +$range-track-boxShadow: inset 0 1px 1px rgba(#000, 0.3) !default + +// Sizing + +$range-track-height: 10px !default + +// ----- Range ----- // + +// Borders & Box Shadows + +$range-thumb-border: 0 !default +$range-thumb-borderRadius: 0 !default +$range-thumb-boxShadow: 0 1px 1px rgba(#000, 0.3) !default + +// Sizing + +$range-thumb-height: 30px !default +$range-thumb-width: $range-thumb-height !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.range + -webkit-appearance: none + background: transparent + display: block + margin: 0 + width: 100% + + &:focus + outline: 0 + +// ----- Webkit ----- // + +.range::-webkit-slider-runnable-track + background: $range-track-background + border-radius: $range-track-borderRadius + border: $range-track-border + box-shadow: $range-track-boxShadow + cursor: pointer + height: $range-track-height + width: 100% + +.range::-webkit-slider-thumb + -webkit-appearance: none + background: $range-thumb-background + border-radius: $range-thumb-borderRadius + border: $range-thumb-border + box-shadow: $range-thumb-boxShadow + cursor: pointer + height: $range-thumb-height + margin-top: ($range-track-height - $range-thumb-height) * 0.5 + width: $range-thumb-width + +// ----- Firefox ----- // + +.range::-moz-range-track + background: $range-track-background + border-radius: $range-track-borderRadius + border: $range-track-border + box-shadow: $range-track-boxShadow + cursor: pointer + height: $range-track-height + width: 100% + +.range::-moz-range-thumb + background: $range-thumb-background + border-radius: $range-thumb-borderRadius + border: $range-thumb-border + box-shadow: $range-thumb-boxShadow + cursor: pointer + height: $range-thumb-height + width: $range-thumb-width + +.range::-moz-focus-outer + border: 0 + +// ----- Internet Explorer ----- // + +.range::-ms-track + background: transparent + border-color: transparent + color: transparent + cursor: pointer + height: $range-track-height + width: 100% + +.range::-ms-fill-lower, +.range::-ms-fill-upper + background: $range-track-background + border-radius: $range-track-borderRadius + border: $range-track-border + box-shadow: $range-track-boxShadow + +.range::-ms-thumb + background: $range-thumb-background + border-radius: $range-thumb-borderRadius + border: $range-thumb-border + box-shadow: $range-thumb-boxShadow + cursor: pointer + height: $range-thumb-height + width: $range-thumb-width diff --git a/components/_sector.sass b/components/_sector.sass new file mode 100644 index 0000000..a5b5573 --- /dev/null +++ b/components/_sector.sass @@ -0,0 +1,62 @@ +// ************************************* +// +// Sector +// -> Adjacent bleed divisions +// CodePen: http://codepen.io/johndjameson/pen/IzdAe +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-sector +// +// .sector[a|b] +// .sector[a|b] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$sector--a-background: #ecf0f1 !default +$sector--b-background: #cfd9db !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.sector + position: relative + + &::before + content: '' + height: 1000% + left: 0 + position: absolute + top: 0 + width: 1000% + z-index: -1 + + &:first-child::before + left: auto + right: 0 + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Hierarchy----- // + +.sector--a::before + background: $sector--a-background + +.sector--b::before + background: $sector--b-background + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-sector + overflow: hidden diff --git a/components/_select.sass b/components/_select.sass new file mode 100644 index 0000000..81a0265 --- /dev/null +++ b/components/_select.sass @@ -0,0 +1,132 @@ +// ************************************* +// +// Select +// -> Menu input +// CodePen: http://codepen.io/johndjameson/pen/rVmaJq/ +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .select +// %select.select-input +// %option.select-input-option +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Color ----- // + +$select-background: #eee +$select-borderColor: #bbb +$select-focus-borderColor: #888 +$select-color: #333 + +// Caret + +$select-caret-color: rgba($select-color, 0.5) + +// ----- Borders ----- // + +$select-borderRadius: 6px +$select-borderStyle: solid +$select-borderWidth: 1px +$select-border: $select-borderWidth $select-borderStyle $select-borderColor + +// ----- Sizing ----- // + +$select-horizontalSpace: 1.25em +$select-verticalSpace: 0.625em + +// Caret + +$select-caret-size: 6px + +// ----- Typography ----- // + +$select-fontFamily: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif +$select-fontSize: 16px +$select-lineHeight: 1.5 + +// ------------------------------------- +// Base +// ------------------------------------- + +.select + color: $select-color + display: inline-block + font-family: $select-fontFamily + font-size: $select-fontSize + position: relative + + &::after + border-bottom: $select-caret-size solid transparent + border-left: $select-caret-size solid transparent + border-right: $select-caret-size solid transparent + border-top: $select-caret-size solid $select-caret-color + content: '' + display: inline-block + height: 0 + pointer-events: none + position: absolute + right: $select-horizontalSpace + top: calc(50% - #{$select-caret-size / 3}) + width: 0 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Input ----- // + +.select-input + -moz-appearance: none + -webkit-appearance: none + appearance: none + background-color: $select-background + border-radius: $select-borderRadius + border: $select-border + box-shadow: none + color: $select-color + cursor: pointer + display: inline-block + line-height: $select-lineHeight + margin: 0 + outline: 0 + padding-bottom: $select-verticalSpace + padding-left: $select-horizontalSpace + padding-right: calc(#{$select-horizontalSpace * 2} + #{$select-caret-size}) + padding-top: $select-verticalSpace + + &:focus + border-color: $select-focus-borderColor + + &:-moz-focusring + color: transparent + text-shadow: 0 0 0 $select-color + +// ------------------------------------- +// Browser Support +// ------------------------------------- + +// ----- Internet Explorer ----- // + +// IE9+ + +@media screen and (min-width:0\0) + + .select::after + display: none + +// IE10+ + +.select-input::-ms-expand + display: none + +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) + + .select::after + display: inline-block diff --git a/components/_split.sass b/components/_split.sass new file mode 100644 index 0000000..213fff4 --- /dev/null +++ b/components/_split.sass @@ -0,0 +1,83 @@ +// ************************************* +// +// Split +// -> Horizontally repellent content +// CodePen: http://codepen.io/johndjameson/pen/uvtCI +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %ul.split[divided] +// +// %li.split-item +// +// .split-cell +// / ... +// .split-cell +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$split-borderColor: #dddddd !default + +// ----- Borders & Box Shadow ----- // + +$split-borderStyle: solid !default +$split-borderWidth: 1px !default +$split-border: $split-borderWidth $split-borderStyle $split-borderColor !default + +// ----- Sizing ----- // + +$split-space: 0.75em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.split + list-style-type: none + margin: 0 + padding: 0 + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Divided ----- // + +.split--divided + + .split-item:not(:last-child) + border-bottom: $split-border + padding-bottom: $split-space + + .split-item:not(:first-child) + padding-top: $split-space + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Cell ----- // + +.split-cell + display: table-cell + + &:first-child + width: 10000px + + &:last-child + white-space: nowrap + +// ----- Item ----- // + +.split-item + display: table + width: 100% diff --git a/components/_sticker.sass b/components/_sticker.sass new file mode 100644 index 0000000..e4104c1 --- /dev/null +++ b/components/_sticker.sass @@ -0,0 +1,86 @@ +// ************************************* +// +// Sticker +// -> Enclosed icon +// CodePen: http://codepen.io/johndjameson/pen/HlzCd +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .sticker[authored|bordered s|m|l]{ data: { sticker: '...' } } +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// Colors + +$sticker-background: #eee !default +$sticker-borderColor: #278998 !default +$sticker-color: #278998 !default + +// Borders + +$sticker-borderRadius: 50% !default +$sticker-border: 2px solid $sticker-borderColor !default + +// Sizes + +$sticker-fontSize: 100% !default +$sticker-fontSize-s: $sticker-fontSize * 0.65 !default +$sticker-fontSize-m: $sticker-fontSize * 0.8 !default +$sticker-fontSize-l: $sticker-fontSize * 1.5 !default +$sticker-size: 3em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.sticker + background: $sticker-background + border-radius: $sticker-borderRadius + border: 0 + box-sizing: border-box + color: $sticker-color + display: inline-block + font-size: $sticker-fontSize + height: $sticker-size + position: relative + vertical-align: middle + width: $sticker-size + + &::before + left: 50% + position: absolute + top: 50% + transform: translate(-50%, -50%) + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Authored ----- // + +.sticker--authored + + &::before + content: attr(data-sticker) + +// ----- Bordered ----- // + +.sticker--bordered + border: $sticker-border + +// ----- Sizes ----- // + +.sticker--s + font-size: $sticker-fontSize-s + +.sticker--m + font-size: $sticker-fontSize-m + +.sticker--l + font-size: $sticker-fontSize-l diff --git a/components/_table.sass b/components/_table.sass new file mode 100644 index 0000000..1fbf94f --- /dev/null +++ b/components/_table.sass @@ -0,0 +1,127 @@ +// ************************************* +// +// Table +// -> Tabular data +// CodePen: http://codepen.io/drewbarontini/pen/uaBfq +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %table.table[s enclosed|striped] +// +// %thead.table-header +// +// %tr.table-row +// %th.table-head +// +// %tbody.table-body +// +// %tr.table-row +// %td.table-data +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$table-borderColor: #ddd !default +$table--striped-row-background: #eee !default + +// ----- Borders ----- // + +$table-borderStyle: solid !default +$table-borderWidth: 1px !default +$table-borderWidth-l: 2px !default +$table-border: $table-borderWidth $table-borderStyle $table-borderColor !default +$table-border-l: $table-borderWidth-l $table-borderStyle $table-borderColor !default + +// ----- Typography ----- // + +$table-fontSize: 16px !default +$table-fontSize-s: 90% !default +$table-lineHeight: 1.5 !default +$table-lineHeight-s: 1.2 !default + +// ----- Sizing ----- // + +$table-space: 1.25em !default +$table-space-s: $table-space * 0.5 !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.table + width: 100% + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Enclosed ----- // + +.table--enclosed + border: $table-border + + .table-data, + .table-head + border-right: $table-border + + .table-head + background: $table--striped-row-background + border-width: $table-borderWidth + +// ----- Sizes ----- // + +.table--s + + .table-data, + .table-header, + .table-head + font-size: $table-fontSize-s + line-height: $table-lineHeight-s + padding: $table-space-s + +// ----- Striped ----- // + +.table--striped + + .table-body .table-row:nth-child(odd) + background: $table--striped-row-background + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Shared ----- // + +.table-data, +.table-header + border-top: $table-border + font-size: $table-fontSize + line-height: $table-lineHeight + padding: $table-space-s $table-space + vertical-align: top + +// ----- Data ----- // + +.table-data + border-top-width: $table-borderWidth + +// ----- Header ----- // + +.table-header + border-top: 0 + text-align: left + +// ----- Head ----- // + +.table-head + border-bottom: $table-border-l + border-top: 0 + padding: $table-space-s $table-space + text-align: left diff --git a/components/_thumb.sass b/components/_thumb.sass new file mode 100644 index 0000000..60eb68f --- /dev/null +++ b/components/_thumb.sass @@ -0,0 +1,36 @@ +// ************************************* +// +// Thumb +// -> Media element +// CodePen: http://codepen.io/drewbarontini/pen/acGmE +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %img.thumb[m] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Borders ----- // + +$thumb-borderRadius: 4px !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.thumb + border-radius: 50% + display: block + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +.thumb--m + border-radius: $thumb-borderRadius diff --git a/components/_underline.sass b/components/_underline.sass new file mode 100644 index 0000000..1434126 --- /dev/null +++ b/components/_underline.sass @@ -0,0 +1,68 @@ +// ************************************* +// +// Underline +// -> Highly stylized link border +// CodePen: http://codepen.io/drewbarontini/pen/oXNWYw +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %a.underline +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Base ----- // + +$underline-borderColor: currentColor !default +$underline-cover-background: white !default +$underline-color: black !default + +// ----- Borders ----- // + +$underline-borderStyle: solid !default +$underline-borderWidth: 4px !default +$underline-border: $underline-borderWidth $underline-borderStyle $underline-borderColor !default + +// ----- Settings ----- // + +$underline-color-transition-speed: 0.5s !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.underline + border-bottom: $underline-border + position: relative + text-decoration: none + + &::after, + &::before + content: '' + height: $underline-borderWidth + left: 0 + position: absolute + top: 100% + width: 100% + + &::after + background: $underline-borderColor + + &::before + background: $underline-cover-background + transform: translateX(0) + transition: transform $underline-color-transition-speed ease-in-out + z-index: 1 + + &:active, + &:focus, + &:hover + background: none + + &::before + transform: translateX(100%) diff --git a/components/_video.sass b/components/_video.sass new file mode 100644 index 0000000..8ff2565 --- /dev/null +++ b/components/_video.sass @@ -0,0 +1,66 @@ +// ************************************* +// +// Video +// -> Responsive media embed +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .video +// %embed|iframe|object|video|.video-item +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$video-background: #000 !default + +// ----- Ratios ----- // + +$video-ratios: (16, 9), (4, 3) !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.video + background: $video-background + display: block + height: 0 + overflow: hidden + padding: 0 + position: relative + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Ratios ----- // + +@each $ratio in $video-ratios + + .video--#{nth($ratio, 1)}by#{nth($ratio, 2)} + padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1)) + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Item ----- // + +.video-item, +.video embed, +.video iframe, +.video object, +.video video + bottom: 0 + height: 100% + left: 0 + position: absolute + top: 0 + width: 100% diff --git a/modules/_bucket.sass b/components/flexbox/_bucket.sass similarity index 53% rename from modules/_bucket.sass rename to components/flexbox/_bucket.sass index 60077c8..305264c 100644 --- a/modules/_bucket.sass +++ b/components/flexbox/_bucket.sass @@ -1,8 +1,20 @@ // ************************************* // // Bucket -// -> Based on: -// * http://jsfiddle.net/necolas/rZvEF/ +// -> Media-supported content +// CodePen: http://codepen.io/johndjameson/pen/saEDx +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .bucket[flag] +// +// .bucket-media +// / ... +// +// .bucket-content +// / ... // // ************************************* @@ -10,47 +22,38 @@ // Variables // ------------------------------------- -$bucket-media-margin: 15px !default +$bucket-space: 1.25em !default // ------------------------------------- // Base // ------------------------------------- .bucket - @extend %group // Uses MVCSS clearfix + display: flex // ------------------------------------- // Modifiers // ------------------------------------- -// ----- Shared ----- // - -.bucket--bottom, -.bucket--middle - display: table - -// ----- Bottom ----- // - -.bucket--bottom .bucket-content - vertical-align: bottom +// ----- Flag ----- // -// ----- Middle ----- // - -.bucket--middle .bucket-content - vertical-align: middle +.bucket--flag + align-items: center // ------------------------------------- -// Submodules +// Scaffolding // ------------------------------------- +// ----- Content ----- // + +.bucket-content + flex-grow: 1 + // ----- Media ----- // .bucket-media - float: left - margin-right: $bucket-media-margin - -// ----- Content ----- // + flex-shrink: 0 + margin-right: $bucket-space -.bucket-content - display: table-cell - max-width: 10000px + > img + display: block diff --git a/components/flexbox/_sector.sass b/components/flexbox/_sector.sass new file mode 100644 index 0000000..8e892ce --- /dev/null +++ b/components/flexbox/_sector.sass @@ -0,0 +1,66 @@ +// ************************************* +// +// Sector +// -> Adjacent bleed divisions +// CodePen: http://codepen.io/johndjameson/pen/LaiKH +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-sector +// +// .sector +// .sector-item[a|b] +// .sector-item[a|b] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$sector-item--a-background: #ecf0f1 !default +$sector-item--b-background: #cfd9db !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.sector + display: flex + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-sector + overflow: hidden + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +.sector-item + position: relative + + &::before + bottom: 0 + content: '' + left: 0 + position: absolute + top: 0 + width: 100vw + z-index: -1 + + &:first-child::before + left: auto + right: 0 + +// Hierarchy + +.sector-item--a::before + background: $sector-item--a-background + +.sector-item--b::before + background: $sector-item--b-background diff --git a/components/flexbox/_split.sass b/components/flexbox/_split.sass new file mode 100644 index 0000000..f473e26 --- /dev/null +++ b/components/flexbox/_split.sass @@ -0,0 +1,37 @@ +// ************************************* +// +// Split +// -> Horizontally repellent content +// CodePen: http://codepen.io/johndjameson/pen/nKcep +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .split +// +// .split-cell +// / ... +// +// .split-cell +// / ... +// +// ************************************* + +.split + align-items: baseline + display: flex + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Cell ----- // + +.split-cell + + &:first-child + flex-grow: 1 + + &:last-child + flex-shrink: 0 diff --git a/components/hash_urls.coffee b/components/hash_urls.coffee deleted file mode 100644 index a5eff62..0000000 --- a/components/hash_urls.coffee +++ /dev/null @@ -1,29 +0,0 @@ -class @HashURLs - constructor: (@options) -> - @setup(@options) - - setup: (@options) -> - @getOrSetHash() - @showContent() - - @options.list.on 'click', (e) => - e.preventDefault() - elem = $(e.currentTarget) - hash = elem.attr('href') - window.location.hash = hash - - @options.list.removeClass('is-active') - @options.content.removeClass('is-active') - - elem.addClass('is-active') - $(hash).addClass('is-active') - - getOrSetHash: -> - if window.location.hash - @hash = window.location.hash - else - @hash = @options.list.first().attr('href') - - showContent: -> - @options.content.not(@hash).removeClass('is-active') - $("[data-hash=#{@hash}], #{@hash}").addClass('is-active') diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md new file mode 100644 index 0000000..e21c905 --- /dev/null +++ b/docs/components/dropdown.md @@ -0,0 +1,72 @@ +Dropdown +======== + +There are a few variants of the dropdown. + +Standard +-------- + +```html +
+ Button + +
+``` + +Floating +-------- + +```html +
+ Button + +
+``` + +### Centered + +```html +
+ Button + +
+``` + +JavaScript +---------- + +In CoffeeScript, you can use the following JavaScript to trigger your dropdown: + +```coffeescript +$('.js-dropdown-btn').on 'click', (event) -> + event.preventDefault() + event.stopPropagation() + $(@).closest('.js-dropdown').toggleClass('is-active') + +$(document).on 'click', -> + $('.js-dropdown').removeClass('is-active') +``` + +**Note**: This should go in a document ready call. + diff --git a/docs/components/panel.md b/docs/components/panel.md new file mode 100644 index 0000000..791691b --- /dev/null +++ b/docs/components/panel.md @@ -0,0 +1,105 @@ +Components - Panel +================== + +The `panel` Component is useful for layouts, such as web applications, that need absolutely positioned, sticky panels. + +Basic Usage +----------- + +```html +
+ +
+ +
+ +
+``` + +In its most basic form, you define a `panel` class alongside some class modifiers for the side (`top`, `right`, `bottom`, `left`), and then the sizing (`1of4`, `1of2`, etc.). Those modifier numbers correspond to the appropriate side's positioning values (`1/4 = 25%`, etc.). + +Content +------- + +If you want to add some spacing within a `panel`, use the `panel-content` scaffolding class, like so: + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +Responsiveness +-------------- + +If you want your panels to adapt responsively, you just need to add additional modifiers. For example: + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +Now, at the `m` breakpoint, which is defined in the variables (covered below), each `panel` will be sized at `50%` on their respective side. + +### Vertical & Horizontal Adjustments + +You can also make vertical and horizontal adjustments responsively. + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +Now we have a set of two panels that are 25/75 stacked horizontally until the `m` size, and then they convert to vertical 50/50. Simple as that. + +Customization +------------- + +There are variables at the top of the file that you can overwrite in your `_config.sass` Foundation file. + +```sass +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Breakpoints ----- // + +$panel-s: 44em !default +$panel-m: 64em !default + +// ----- Settings ----- // + +$panel-defaults: 's' $panel-s, 'm' $panel-m !default +$panel-columns: 5 !default + +// ----- Sizing ----- // + +$panel-space: 1.25em !default +``` + diff --git a/docs/grid.md b/docs/grid.md deleted file mode 100644 index b99822c..0000000 --- a/docs/grid.md +++ /dev/null @@ -1,49 +0,0 @@ -# Modules - Grid - -## Basic Grid - -**Haml** - -```haml -.grid - .grid-box.grid-box--1of1 - %p 1/1 - -.grid - .grid-box.grid-box--1of2 - %p 1/2 - .grid-box.grid-box--1of2 - %p 1/2 -``` - -### Silent Classes - -If you don't want to explicitly call any of the `.grid` classes in your HTML, you can set the `$grid-silent` variable to true to use Sass placeholder selectors, like so: - -**Sass** - -```sass -.main - @extend %grid - .content, - .sidebar - @extend %grid-box - .content - @extend %grid-box--2of3 - .sidebar - @extend %grid-box--1of3 -``` - -## Responsive Grid - -In order to set up breakpoints for the grid, you'll need to set the `$grid-defaults` variable for your specified breakpoints. Then, either in your HTML or through `@extends` (when using `$grid-silent`), you'll do something like this: - -**Haml** - -```haml -.grid - .grid-box.grid-box--desk--1of2.grid-box--lap--1of1 - %p 1/2 - .grid-box.grid-box--desk--1of2.grid-box--lap--1of1 - %p 1/2 -``` diff --git a/docs/hash_urls.md b/docs/hash_urls.md deleted file mode 100644 index 5cb1189..0000000 --- a/docs/hash_urls.md +++ /dev/null @@ -1,41 +0,0 @@ -# Component - Hash URLs - -## Markup - -**Haml** - -```haml -%ul.sectionList - %li - %a(href="#example-01" data-hash="#example-01") Example 1 - %li - %a(href="#example-02" data-hash="#example-02") Example 2 - -.contentSection#example-01 - %h2 Example 01 -.contentSection#example-02 - %h2 Example 02 -``` - -## Styles - -**Sass** - -```sass -.contentSection - display: none - &.is-active - display: block -``` - -## How to call - -```javascript -$(function() { - options = { - list: $('.sectionList a'), - content: $('.contentSection') - }; - new HashURLs(options); -}); -``` diff --git a/docs/patterns/icons.md b/docs/patterns/icons.md new file mode 100644 index 0000000..ea98b6f --- /dev/null +++ b/docs/patterns/icons.md @@ -0,0 +1,124 @@ +Icons +===== + +Prerequisites +------------- + +Before getting started, you'll need [FontForge](http://fontforge.org). It's available on Homebrew: + + brew install fontforge --with-python --with-cairo --with-pango eot-utils + +Setup +----- + +In your `Gemfile`, add: + +```ruby +gem 'fontcustom' +``` + +Now, create a folder called `icons` in in `assets/fonts`. This will house Font Custom's configuration file, the Sass template, and the SVG files. + +`assets/fonts/icons/fontcustom.yml` + +```yml +# http://jaydenseric.com/blog/font-icons-like-a-boss-with-sass-and-font-custom +# https://github.com/FontCustom/fontcustom#configuration + +font_name: icons +no_hash: true +autowidth: true +output: + fonts: .. + _icon.sass: ../../stylesheets/components +templates: [_icon.sass] +``` + +`assets/fonts/icons/_icon.sass` + +```sass +// ************************************* +// +// Icon +// -> Based on: +// * http://jaydenseric.com/blog/font-icons-like-a-boss-with-sass-and-font-custom +// +// ************************************* + +@font-face + font-family: <%= font_name %> + src: font-url('<%= font_name %>.eot') + src: font-url('<%= font_name %>.eot?#iefix') format('embedded-opentype'), font-url('<%= font_name %>.woff') format('woff'), font-url('<%= font_name %>.ttf') format('truetype'), font-url('<%= font_name %>.svg#<%= font_name %>') format('svg') + font-weight: normal + font-style: normal + +i::before, +.icn::before + -moz-osx-font-smoothing: grayscale + -webkit-font-smoothing: antialiased + display: inline-block + font-family: "<%= font_name %>" + font-style: normal + font-weight: normal + speak: none + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +<% @glyphs.each do |name, value| %> +.icn--<%= name.to_s %>::before + content: "\<%= value[:codepoint].to_s(16) %>" +<% end %> +``` + +Note that this Sass file is treated like an ERB template - it'll compile into your `assets/stylesheets/components` directory, but changes and additions should be made to the root template file. + +`assets/stylesheets/application.sass` + +```sass +... + +// ------------------------------------- +// Components +// ------------------------------------- + +@import "components/icon" + +... + +``` + +SVG Guidelines +-------------- + +The best SVG files: + + * are placed on a **512 × 512** artboard (FontCustom will trim horizontal space for you, unless you tell it otherwise in your `fontcustom.yml` file.) + * are given a baseline of 448px from the top (cap height is at 64px from the top) + * have “squared” icons at a height of 384px and centered (i.e., flush with baseline & cap height) + * have circular icons at a height of *around* 432px (384 × 1.125) and centered *(this can be adjusted to taste according to the icon; see [Overshoot](http://en.wikipedia.org/wiki/Overshoot_(typography)))* + * do not exceed the edges of the artboard + * are fully *outlined* (meaning all overlapping shapes have been merged, no transparent shapes are present, all shapes are a solid color, and all strokes have been expanded + merged) + +Compile +------- + +Drop your SVG files into `assets/fonts/icons`. + +Navigate to your `assets/fonts/icons` directory in Terminal and run `fontcustom watch`. This'll keep an eye out for any changes or new additions, and recompile as necessary. + +Usage +----- + +With `arrow.svg`, you'd use this pattern: + +```haml +%i.icn--arrow{'aria-hidden' => 'true'} +``` + +or + +```haml +%h2.icn.icn--arrow A Header +``` diff --git a/docs/patterns/responsive-tools.md b/docs/patterns/responsive-tools.md new file mode 100644 index 0000000..3e99a49 --- /dev/null +++ b/docs/patterns/responsive-tools.md @@ -0,0 +1,83 @@ +Responsive Tools +================ + +As is the M.O. of the [Tools](http://mvcss.github.io/foundation/tools), we don't want to be forced to create too many new, unnecessary Structures for one-off alterations of styles. Additionally, with responsiveness, we have to make small one off changes at various viewport sizes. + +- Show a particular element until it hits a higher viewport, then hide it +- Float an element to a side once it gets to a higher viewport + +Etc. etc. + +Working Solution +---------------- + +As of now, we add responsive tool classes to handle this for us. For example: + +```sass +// ------------------------------------- +// Display +// ------------------------------------- + +.db + display: block +.di + display: inline +.dib + display: inline-block +.dn + display: none + +// ----- Responsive ----- // + ++respond-to($g-m) + + .db--m + display: block + ++respond-to($g-l) + + .db--l + display: block + +// ------------------------------------- +// Positioning +// ------------------------------------- + +// ----- Float ----- // + +.fl + float: left +.fr + float: right + +// Responsive + ++respond-to($g-m) + + .fr--m + float: right + ++respond-to($g-l) + + .fr--l + float: right +``` + +**Note**: This assumes you have `$g-m`, `$g-l`, and the `+respond-to` mixin set up in your project, which are set up in the base version of MVCSS. + +Usage +----- + +Now, in your markup, you can utilize these responsive tools, like so: + +```html +
+ +
+``` + +```html +
+ +
+``` diff --git a/docs/patterns/sticky-footer.md b/docs/patterns/sticky-footer.md new file mode 100644 index 0000000..25cdea2 --- /dev/null +++ b/docs/patterns/sticky-footer.md @@ -0,0 +1,34 @@ +Sticky Footer +============= + +http://mystrd.at/modern-clean-css-sticky-footer/ + +`foundation/_settings.sass` + +```sass +$b-whitespace: 1.25em +$footer-height: 12.5em // ~200px +``` + +`foundation/_base.sass` + +```sass +html + min-height: 100% + position: relative + +body + margin-bottom: $footer-height + $b-whitespace +``` + +`structures/_footer.sass` + +```sass +.footer + bottom: 0 + left: 0 + height: $footer-height + position: absolute + right: 0 + width: 100% +``` diff --git a/docs/patterns/z-index.md b/docs/patterns/z-index.md new file mode 100644 index 0000000..7ab911d --- /dev/null +++ b/docs/patterns/z-index.md @@ -0,0 +1,43 @@ +z-index +======= + +To manage your `z-index` using the `zi` mixin, you first need to create a `$zi-global` list. + +```sass +$zi-global: 'tooltip', 'popover', 'modal' +``` + +Next, in your styles, you can set the `z-index`. + +```sass +.tooltip + // ... + z-index: zi('tooltip') + +.popover + // ... + z-index: zi('popover') + +.modal + // ... + z-index: zi('modal') +``` + +If you want a new scope of ordering, you can create a new list. + +```sass +$zi-course: 'course-badge', 'course-content' +``` + +Then you can use your new list in your styles. + + +```sass +.course-badge + // ... + z-index: zi('course-badge', $zi-course) + +.course-content + // ... + z-index: zi('course-content', $zi-course) +``` diff --git a/foundation/_base.sass b/foundation/_base.sass new file mode 100644 index 0000000..c851349 --- /dev/null +++ b/foundation/_base.sass @@ -0,0 +1,182 @@ +// ************************************* +// +// Base +// -> Tag-level settings +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ----- Functions ----- // + +@function em($target, $context: $b-fontSize) + @if ($target == 0) + @return 0 + @else + @return ($target / $context) * 1em + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Palette ----- // + +$plum: #4e4e5b !default + +// ----- Base ----- // + +$c-background: #ecf0f1 !default +$c-border: lighten($plum, 30%) !default +$c-highlight: $plum !default +$c-selection: lighten( $plum, 50% ) !default +$c-subdue: lighten($plum, 40%) !default +$c-text-invert: #fff !default +$c-text: #444 !default + +// ----- Borders & Box Shadow ----- // + +$b-borderStyle: solid !default +$b-borderWidth: 2px !default +$b-border: $b-borderWidth $b-borderStyle $c-border !default + +// ----- Transitions ----- // + +$b-transition: 0.2s ease-in-out !default + +// ----- Typography ----- // + +$b-fontFamily-heading: sans-serif !default +$b-fontFamily-mono: monospace !default +$b-fontFamily: sans-serif !default +$b-fontSize: 16px !default +$b-fontSize-h1: 200% !default +$b-fontSize-h2: 150% !default +$b-fontSize-h3: 125% !default +$b-fontSize-h4: 110% !default +$b-lineHeight: 1.5 !default +$b-lineHeight-heading: 1.2 !default + +// ----- Sizing ----- // + +$b-space: em(20px) !default +$b-space-xs: 0.25 * $b-space !default +$b-space-s: 0.5 * $b-space !default + +// ------------------------------------- +// Document +// ------------------------------------- + +html + background: $c-background + color: $c-text + font-family: $b-fontFamily + font-size: $b-fontSize + line-height: $b-lineHeight + +body + font-size: 100% + +// ------------------------------------- +// Block Content +// ------------------------------------- + +// ----- Lists, Paragraphs ----- // + +dl, ol, ul, p + margin-bottom: $b-space + margin-top: 0 + +dd, li + margin-bottom: $b-space-s + margin-top: 0 + +dd + margin-left: 0 + +dt + font-weight: bold + +// ----- Headings ----- // + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4 + font-family: $b-fontFamily-heading + font-weight: bold + line-height: $b-lineHeight-heading + margin-bottom: $b-space-xs + margin-top: 0 + +h1, .h1 + font-size: $b-fontSize-h1 + +h2, .h2 + font-size: $b-fontSize-h2 + +h3, .h3 + font-size: $b-fontSize-h3 + +h4, .h4 + font-size: $b-fontSize-h4 + +// ----- Preformatted Text ----- // + +pre + font-family: $b-fontFamily-mono + +// ------------------------------------- +// Inline Content +// ------------------------------------- + +// ----- Links ----- // + +a + border-bottom: $b-border + color: $c-highlight + text-decoration: none + transition: $b-transition + + &:active, + &:focus, + &:hover + border-bottom-color: $c-highlight + color: $c-subdue + +// ----- Images ----- // + +img + height: auto + max-width: 100% + +// ----- Inputs ----- // + +input[type='email'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='text'], +textarea + -webkit-appearance: none + box-sizing: border-box + + &::placeholder + color: $c-subdue + +// ----- Text ----- // + +strong, b + font-weight: bold + +em, i + font-style: italic + +code + font-family: $b-fontFamily-mono + +// ----- Selection ----- // + +::selection + background: $c-selection diff --git a/foundation/_extends.sass b/foundation/_extends.sass new file mode 100644 index 0000000..676ee94 --- /dev/null +++ b/foundation/_extends.sass @@ -0,0 +1,65 @@ +// ************************************* +// +// Extends +// +// ************************************* + +// ----- Faux Hide ----- // + +.fauxHide + height: 0 + opacity: 0 + overflow: hidden + visibility: hidden + +// ----- Faux Hide ----- // + +.fauxShow + height: auto + opacity: 1 + overflow: visible + visibility: visible + +// ----- List Reset ----- // + +.lr + list-style-type: none + margin: 0 + padding: 0 + +// ----- Vertical/Horizontal Center ----- // + +.middle + left: 50% + position: absolute + top: 50% + transform: translate(-50%, -50%) + +// ----- Semantic Hide ----- // + +.srt + border: 0 + clip: rect(0 0 0 0) + height: 1px + margin: -1px + overflow: hidden + padding: 0 + position: absolute + width: 1px + +// ----- Stretch ----- // + +.stretch + bottom: 0 + left: 0 + position: absolute + right: 0 + top: 0 + +// ----- Vertical Align ----- // + +.valign + +transform(translateY(-50%)) + position: relative + top: 50% + diff --git a/foundation/_functions.sass b/foundation/_functions.sass new file mode 100644 index 0000000..17d5d72 --- /dev/null +++ b/foundation/_functions.sass @@ -0,0 +1,72 @@ +// ************************************* +// +// Functions +// +// ************************************* + +// ----- Opposite Position ----- // +// -> Returns the opposite side +// +// $side - the side to return the opposite of + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' + +// ----- Rem ----- // +// -> Converts a pixel value into a rem +// +// $size - the pixel size + +@function rem($size) + @return ($size / $b-fontSize) * 1rem + +// ----- Shade ----- // +// -> Slightly darken a color +// via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) +// +// $color - the color to shade +// $percentage - the percentage of black to add to `$color` + +@function shade($color, $percentage) + @return mix(black, $color, $percentage) + +// ----- Strip Unit ----- // +// -> Remove unit from number +// via: http://hugogiraudel.com/2013/08/12/sass-functions/ +// +// $value - the value to remove the unit from + +@function strip-unit($value) + @return $value / ($value * 0 + 1) + +// ----- Tint ----- // +// -> Slightly lighten a color +// Via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) +// +// $color - the color to tint +// $percentage - the percentage of white to add to `$color` + +@function tint($color, $percentage) + @return mix(white, $color, $percentage) + +// ----- z-index ----- // +// -> http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/ +// +// $element - the name of the element in the list +// $list - the name of the list (defaults to `$zi-global`) + +@function zi($element, $list: $zi-global) + $index: index($list, $element) + + @if $index + @return $index + + @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}' + @return null diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass new file mode 100644 index 0000000..76cba75 --- /dev/null +++ b/foundation/_mixins.sass @@ -0,0 +1,109 @@ +// ************************************* +// +// Mixins +// +// ************************************* + +// ----- Action ----- // +// -> Sets clickable element defaults + +=action + border: 1px solid transparent + cursor: pointer + display: inline-block + text-align: center + text-decoration: none + white-space: nowrap + +// ----- Caret ----- // +// -> Creates a caret (arrow) icon +// +// $side - the side the caret is on +// $size - the caret size +// $color - the caret color + +// Requires this function (replaces Compass) + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' + +=caret($side, $size, $color) + $opposite: opposite-position($side) + border: $size solid transparent + border-#{$opposite}: $size solid $color + border-#{$side}: 0 + bottom: auto + content: '' + display: block + height: 0 + left: 50% + margin: (-$size) 0 0 (-$size) + margin-#{$side}: 0 + position: absolute + right: auto + top: 50% + width: 0 + #{$side}: -$size + #{$opposite}: auto + +// ----- List Reset ----- // +// -> Removes default list styles + +=list-reset + list-style-type: none + margin: 0 + padding: 0 + +// ----- Respond-within ----- // +// -> Generates a media query within a range +// +// $min - the initial breakpoint size +// $max - the larger breakpoint size +// $media - the media type ('screen', 'print', etc.) +// @content - the generated content within the mixin + +=respond-within($min, $max, $media: screen) + @media #{$media} and (min-width: $min) and (max-width: $max) + @content + +// ----- Size ----- // +// -> Outputs width/height properties +// +// $width - the element width +// $height - the element height + +=size($width, $height: $width) + height: $height + width: $width + +// ----- State ----- // +// -> Combines state-related pseudo-classes +// +// $class - an optional state class ('is-active') + +=state($class: false) + @if $class + &:active, &:focus, &:hover, &.#{$class} + @content + @else + &:active, &:focus, &:hover + @content + +// ----- Stretch ----- // +// -> Fill container element +// +// $position - position property value (absolute, fixed, etc.) + +=stretch($position: absolute) + bottom: 0 + left: 0 + position: $position + right: 0 + top: 0 diff --git a/foundation/_tools.sass b/foundation/_tools.sass new file mode 100644 index 0000000..45cf065 --- /dev/null +++ b/foundation/_tools.sass @@ -0,0 +1,266 @@ +// ************************************* +// +// Tools +// -> Global utilities +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Palette ----- // + +$black: black +$blue: blue +$green: green +$yellow: yellow + +// ----- Borders ----- // + +$b-border: 2px solid #ddd !default + +// ----- Typography ----- // + +$b-fontSize-h1: 200% +$b-fontSize-h2: 150% +$b-fontSize-h3: 125% +$b-fontSize-h4: 110% + +// ----- Sizing ----- // + +$b-space: 1.25em !default + +// ----- Tools ----- // + +// Text + +$tool-background-names: 'black', 'green' !default +$tool-background-vars: $black, $green !default +$tool-color-names: 'blue', 'yellow' !default +$tool-color-vars: $blue, $yellow !default + +// Positioning + +$tool-position-values: 1, 2, 3, 4, 5 !default + +// Widths + +$tool-widths-max: 4 !default + +// ------------------------------------- +// Background +// ------------------------------------- + +// ----- Palette ----- // + +@for $i from 1 through length($tool-background-vars) + + .bc-#{nth($tool-background-names, $i)} + background: nth($tool-background-vars, $i) + +// ------------------------------------- +// Borders +// ------------------------------------- + +// ----- All ----- // + +.bdr + border: $b-border + +// ----- Sides ----- // + +.bdrb + border-bottom: $b-border +.bdrl + border-left: $b-border +.bdrr + border-right: $b-border +.bdrt + border-top: $b-border + +// ------------------------------------- +// Opacity +// ------------------------------------- + +.opf + opacity: 0 +.op-1of4 + opacity: 0.25 +.op-1of2 + opacity: 0.5 +.op-3of4 + opacity: 0.75 +.op-1of1 + opacity: 1 + +// ------------------------------------- +// Overflow +// ------------------------------------- + +.ovh + overflow: hidden +.ovv + overflow: visible + +// ------------------------------------- +// Positioning +// ------------------------------------- + +// ----- Bottom ----- // + +.pobxs + bottom: $b-space-xs +.pobs + bottom: $b-space-s +.pobm + bottom: $b-space +.pobl + bottom: $b-space-l +.pobsn + bottom: -$b-space-s +.pobmn + bottom: -$b-space +.pobln + bottom: -$b-space-l + +@each $value in $tool-position-values + + .pob#{$value} + bottom: #{$value}px + .pob#{$value}n + bottom: -#{$value}px + +// ----- Left ----- // + +.polxs + left: $b-space-xs +.pols + left: $b-space-s +.polm + left: $b-space +.poll + left: $b-space-l +.polsn + left: -$b-space-s +.polmn + left: -$b-space +.polln + left: -$b-space-l + +@each $value in $tool-position-values + + .pol#{$value} + left: #{$value}px + .pol#{$value}n + left: -#{$value}px + +// ----- Right ----- // + +.porxs + right: $b-space-xs +.pors + right: $b-space-s +.porm + right: $b-space +.porl + right: $b-space-l +.porsn + right: -$b-space-s +.pormn + right: -$b-space +.porln + right: -$b-space-l + +@each $value in $tool-position-values + + .por#{$value} + right: #{$value}px + .por#{$value}n + right: -#{$value}px + +// ----- Top ----- // + +.potxs + top: $b-space-xs +.pots + top: $b-space-s +.potm + top: $b-space +.potl + top: $b-space-l +.potsn + top: -$b-space-s +.potmn + top: -$b-space +.potln + top: -$b-space-l + +@each $value in $tool-position-values + + .pot#{$value} + top: #{$value}px + .pot#{$value}n + top: -#{$value}px + +// ------------------------------------- +// Text +// ------------------------------------- + +// ----- Alignment ----- // + +.tal + text-align: left +.tar + text-align: right + +// ----- Color ----- // + +// Palette + +@for $i from 1 through length($tool-color-vars) + + .tc-#{nth($tool-color-names, $i)} + color: nth($tool-color-vars, $i) + +// ----- Size ----- // + +// Headings + +.tsh1 + font-size: $b-fontSize-h1 +.tsh2 + font-size: $b-fontSize-h2 +.tsh3 + font-size: $b-fontSize-h3 +.tsh4 + font-size: $b-fontSize-h4 + +// ------------------------------------- +// Vertical Alignnment +// ------------------------------------- + +.vab + vertical-align: baseline +.vam + vertical-align: middle +.vat + vertical-align: top + +// ------------------------------------- +// Visibility +// ------------------------------------- + +.vih + visibility: hidden +.viv + visibility: visible + +// ------------------------------------- +// Widths +// ------------------------------------- + +@for $i from 1 through $tool-widths-max + + .w-1of#{$i} + width: percentage(1 / $i) diff --git a/helpers/_extends.sass b/helpers/_extends.sass deleted file mode 100644 index be7c5f9..0000000 --- a/helpers/_extends.sass +++ /dev/null @@ -1,25 +0,0 @@ -// ************************************* -// -// Extends -// -// ************************************* - -// ------------------------------------- -// Faux Hide -// ------------------------------------- - -%fauxHide - height: 0 - opacity: 0 - overflow: hidden - visibility: hidden - -// ------------------------------------- -// Faux Show -// ------------------------------------- - -%fauxShow - height: auto - opacity: 1 - overflow: visible - visibility: visible diff --git a/helpers/_mixins.sass b/helpers/_mixins.sass deleted file mode 100644 index 8dfddee..0000000 --- a/helpers/_mixins.sass +++ /dev/null @@ -1,37 +0,0 @@ -// ************************************* -// -// Mixins -// -// ************************************* - -// ------------------------------------- -// Caret -// ------------------------------------- - -// @import "compass" -> required - -=caret($side, $size, $color) - $opposite: opposite-position($side) - +stretch(50%, auto, auto, 50%) - border: $size solid transparent - border-#{$opposite}: $size solid $color - border-#{$side}: 0 - content: '' - display: block - height: 0 - margin: (-$size) 0 0 (-$size) - margin-#{$side}: 0 - width: 0 - #{$side}: -$size - #{$opposite}: auto - -// ------------------------------------- -// Retina-image -// ------------------------------------- - -// @import "compass" -> required - -=retina-image($img) - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) - background-image: image-url($img) - background-size: image-width($img) / 2 image-height($img) / 2 diff --git a/helpers/_sprite_icons.sass b/helpers/_sprite_icons.sass deleted file mode 100644 index 90d2c9b..0000000 --- a/helpers/_sprite_icons.sass +++ /dev/null @@ -1,37 +0,0 @@ -// ************************************* -// -// Sprite Icons -// -// ************************************* - -@import compass - -// ------------------------------------- -// Variables -// ------------------------------------- - -$icons: sprite-map("icons/*.png") -$icons-hd: sprite-map("icons-hd/*.png") - -// ------------------------------------- -// Base -// ------------------------------------- - -i - background: $icons - display: inline-block - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) - background: $icons-hd - +background-size(image-width(sprite-path($icons)) auto) - -// ------------------------------------- -// Setup -// ------------------------------------- - -@each $icon in sprite_names($icons) - .icn-#{$icon} - +sprite-dimensions($icons, $icon) - background-position: sprite-position($icons, $icon) - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) - $offset: nth(sprite-position($icons-hd, $icon), 2) / 2 - background-position: 0 $offset diff --git a/modules/_button.sass b/modules/_button.sass deleted file mode 100644 index dbd2a9f..0000000 --- a/modules/_button.sass +++ /dev/null @@ -1,85 +0,0 @@ -// ************************************* -// -// Button -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$btn-background: #4e4e5b !default -$btn-borderRadius: 2px !default -$btn--error-background: red !default -$btn-fontSize: 16px !default -$btn-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -%btn, .btn - border-radius: $btn-borderRadius - border: 0 - cursor: pointer - display: inline-block - font-size: $btn-fontSize - padding: ($btn-whitespace / 2) ($btn-whitespace + 10) - text-align: center - text-decoration: none - &:focus, - &:hover - text-decoration: none - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- A ----- // - -.btn--a - @extend %btn - background: $btn-background - color: #fff - &:focus, - &:hover - background: lighten($btn-background, 10%) - -// ----- B ----- // - -.btn--b - @extend %btn - background: lighten($btn-background, 30%) - color: $btn-background - &:focus, - &:hover - background: lighten($btn-background, 40%) - -// ----- Block ----- // - -.btn--block - -moz-box-sizing: border-box - box-sizing: border-box - display: block - width: 100% - -// ----- Large ----- // - -.btn--large - font-size: 150% - padding-left: 100px - padding-right: 100px - -// ----- Mini ----- // - -.btn--mini - font-size: 70% - letter-spacing: 1px - text-transform: uppercase - -// ----- Small ----- // - -.btn--small - font-size: 90% - letter-spacing: 1px - text-transform: uppercase diff --git a/modules/_flag.sass b/modules/_flag.sass deleted file mode 100644 index 997420a..0000000 --- a/modules/_flag.sass +++ /dev/null @@ -1,72 +0,0 @@ -// ************************************* -// -// Flag -// -> Based on the following: -// * http://csswizardry.com/2013/05/the-flag-object/ -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$flag-img-padding: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.flag - display: table - width: 100% - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Shared ----- // - -.flag--top - .flag-media, - .flag-body - vertical-align: top - -// ----- Bottom ----- // - -.flag--bottom - .flag-media, - .flag-body - vertical-align: bottom - -// ----- Reverse ----- // - -.flag--rev - .flag-media - padding-left: $flag-img-padding - padding-right: 0 - -// ------------------------------------- -// Submodules -// ------------------------------------- - -// ----- Shared ----- // - -.flag-media, -.flag-body - display: table-cell - vertical-align: middle - -// ----- Body ----- // - -.flag-body - width: 100% - -// ----- Media ----- // - -.flag-media - padding-right: $flag-img-padding - -// Object - -.flag-media-obj - display: block diff --git a/modules/_form.sass b/modules/_form.sass deleted file mode 100644 index b4f7812..0000000 --- a/modules/_form.sass +++ /dev/null @@ -1,106 +0,0 @@ -// ************************************* -// -// Form -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$form-border: 1px solid #ccc !default -$form-borderRadius: 2px !default -$form-color: #444 !default -$form-error-color: red !default -$form-fontFamily: sans-serif !default -$form-fontSize: 16px !default -$form-highlight-color: #4e4e5b !default -$form-input-background: #fff !default -$form-whitespace: 10px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.form - margin: 0 0 $form-whitespace - ul - margin: 0 - padding: 0 - ul li - list-style-type: none - padding-bottom: ($form-whitespace / 2) - &:last-child - padding-bottom: 0 - -// ------------------------------------- -// Submodules -// ------------------------------------- - -// ----- Field ----- // - -.form-field - border: 0 - margin: 0 0 ($form-whitespace * 2) - padding: 0 - -// Modifiers - -.form-field--submit - margin-top: ($form-whitespace * 4) - -// ----- Header ----- // - -.form-header - margin-bottom: $form-whitespace - -// ----- Input ----- // - -.form-input - background: $form-input-background - border: $form-border - border-radius: $form-borderRadius - -moz-box-sizing: border-box - box-sizing: border-box - font-family: $form-fontFamily - font-size: $form-fontSize - padding: $form-whitespace - width: 100% - &:focus - border-color: $form-highlight-color - outline: none - -// Modifiers - -.form-input--check, -.form-input--radio - margin-right: $form-whitespace - -// ----- Label ----- // - -.form-label - display: block - font-size: $form-fontSize - font-weight: bold - margin-bottom: 5px - em - color: $form-error-color - -// Modifiers - -.form-label--radio, -.form-label--check - font-size: 90% - font-weight: normal - -// ----- Note ----- // - -.form-note - color: lighten($form-color, 40%) - font-size: 90% - margin-top: 5px - -// ----- Select ----- // - -.form-select - width: 30% diff --git a/modules/_grid.sass b/modules/_grid.sass deleted file mode 100644 index 541bf67..0000000 --- a/modules/_grid.sass +++ /dev/null @@ -1,187 +0,0 @@ -// ************************************* -// -// Grid -// -> Based on the following: -// * https://github.com/necolas/suit-grid -// * https://github.com/csswizardry/csswizardry-grids -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$grid-columns: 12 !default -$grid-defaults: "lap" 480px, "desk" 800px !default -$grid-gutter: 20px !default -$grid-silent: false !default - -// ------------------------------------- -// Selector Type -// ------------------------------------- - -$grid-selector: if($grid-silent, unquote("%"), unquote(".")) - -// ------------------------------------- -// Base -// ------------------------------------- - -#{$grid-selector}grid - @extend %group // Uses MVCSS clearfix - display: block - margin-left: -$grid-gutter / 2 - margin-right: -$grid-gutter / 2 - -#{$grid-selector}grid-box - -moz-box-sizing: border-box - box-sizing: border-box - float: left - margin: 0 - padding-left: $grid-gutter / 2 - padding-right: $grid-gutter / 2 - width: 100% - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -#{$grid-selector}grid-box--center - display: block - float: none - margin: 0 auto - -// ------------------------------------- -// Setup -// ------------------------------------- - -=device-type($namespace: '') - - // ----- One Part ----- // - - #{$grid-selector}grid-box--#{$namespace}1of1 - width: 100% - - // ----- Two Parts ----- // - - #{$grid-selector}grid-box--#{$namespace}1of2 - width: 50% - - // ----- Three Parts ----- // - - @if $grid-columns >= 3 - #{$grid-selector}grid-box--#{$namespace}1of3 - width: 33.333% - #{$grid-selector}grid-box--#{$namespace}2of3 - width: 66.666% - - // ----- Four Parts ----- // - - @if $grid-columns >= 4 - #{$grid-selector}grid-box--#{$namespace}1of4 - width: 25% - #{$grid-selector}grid-box--#{$namespace}2of4 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}3of4 - width: 75% - - // ----- Five Parts ----- // - - @if $grid-columns >= 5 - #{$grid-selector}grid-box--#{$namespace}1of5 - width: 20% - #{$grid-selector}grid-box--#{$namespace}2of5 - width: 40% - #{$grid-selector}grid-box--#{$namespace}3of5 - width: 60% - #{$grid-selector}grid-box--#{$namespace}4of5 - width: 80% - - // ----- Six Parts ----- // - - @if $grid-columns >= 6 - #{$grid-selector}grid-box--#{$namespace}1of6 - width: 16.666% - #{$grid-selector}grid-box--#{$namespace}2of6 - @extend #{$grid-selector}grid-box--#{$namespace}1of3 - #{$grid-selector}grid-box--#{$namespace}3of6 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}4of6 - @extend #{$grid-selector}grid-box--#{$namespace}2of3 - #{$grid-selector}grid-box--#{$namespace}5of6 - width: 83.333% - - // ----- Eight Parts ----- // - - @if $grid-columns >= 8 - #{$grid-selector}grid-box--#{$namespace}1of8 - width: 12.5% - #{$grid-selector}grid-box--#{$namespace}2of8 - @extend #{$grid-selector}grid-box--#{$namespace}1of4 - #{$grid-selector}grid-box--#{$namespace}3of8 - width: 37.5% - #{$grid-selector}grid-box--#{$namespace}4of8 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}5of8 - width: 62.5% - #{$grid-selector}grid-box--#{$namespace}6of8 - @extend #{$grid-selector}grid-box--#{$namespace}3of4 - #{$grid-selector}grid-box--#{$namespace}7of8 - width: 87.5% - - // ----- Ten Parts ----- // - - @if $grid-columns >= 10 - #{$grid-selector}grid-box--#{$namespace}1of10 - width: 10% - #{$grid-selector}grid-box--#{$namespace}2of10 - @extend #{$grid-selector}grid-box--#{$namespace}1of5 - #{$grid-selector}grid-box--#{$namespace}3of10 - width: 30% - #{$grid-selector}grid-box--#{$namespace}4of10 - @extend #{$grid-selector}grid-box--#{$namespace}2of5 - #{$grid-selector}grid-box--#{$namespace}5of10 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}6of10 - @extend #{$grid-selector}grid-box--#{$namespace}3of5 - #{$grid-selector}grid-box--#{$namespace}7of10 - width: 70% - #{$grid-selector}grid-box--#{$namespace}8of10 - @extend #{$grid-selector}grid-box--#{$namespace}4of5 - #{$grid-selector}grid-box--#{$namespace}9of10 - width: 90% - - // ----- Twelve Parts ----- // - - @if $grid-columns >= 12 - #{$grid-selector}grid-box--#{$namespace}1of12 - width: 8.333% - #{$grid-selector}grid-box--#{$namespace}2of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of6 - #{$grid-selector}grid-box--#{$namespace}3of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of4 - #{$grid-selector}grid-box--#{$namespace}4of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of3 - #{$grid-selector}grid-box--#{$namespace}5of12 - width: 41.666% - #{$grid-selector}grid-box--#{$namespace}6of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}7of12 - width: 58.333% - #{$grid-selector}grid-box--#{$namespace}8of12 - @extend #{$grid-selector}grid-box--#{$namespace}2of3 - #{$grid-selector}grid-box--#{$namespace}9of12 - @extend #{$grid-selector}grid-box--#{$namespace}3of4 - #{$grid-selector}grid-box--#{$namespace}10of12 - @extend #{$grid-selector}grid-box--#{$namespace}5of6 - #{$grid-selector}grid-box--#{$namespace}11of12 - width: 91.666% - -// ------------------------------------- -// Creation -// ------------------------------------- - -+device-type() - -@each $device in $grid-defaults - @media screen and (min-width: nth($device, 2)) - +device-type("#{nth($device, 1)}--") diff --git a/modules/_list.sass b/modules/_list.sass deleted file mode 100644 index da3f205..0000000 --- a/modules/_list.sass +++ /dev/null @@ -1,94 +0,0 @@ -// ************************************* -// -// List -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$list--block-background: #4e4e5b !default -$list-border-color: #9a9aa8 !default -$list-border-size: 2px !default -$list-borderRadius: 2px !default -$list-color: #444 !default -$list-fontSize: 16px !default -$list-link-color: #ddd !default -$list--nav-color: #4e4e5b !default -$list-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.list - margin: 0 0 $list-whitespace - padding-left: $list-whitespace - li - font-size: $list-fontSize - margin-bottom: ($list-whitespace / 2) - &:last-child - margin-bottom: 0 - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Block ----- // - -.list--block - padding-left: 0 - li - list-style-type: none - margin-bottom: ($list-whitespace / 2) - a - background: $list--block-background - border-radius: $list-borderRadius - color: #fff - display: block - padding: 8px $list-whitespace - &:hover - background: lighten($list--block-background, 10%) - text-decoration: none - - // States - - .is-active a - background: $list-color - -// ----- Bulleted ----- // - -.list--bulleted li - list-style-type: square - -// ----- Nav ----- // - -.list--nav - padding-left: 0 - li - display: inline - margin-right: $list-whitespace - &:last-child - margin-right: 0 - - a - border-bottom: $list-border-size solid lighten($list-border-color, 10%) - color: $list--nav-color - &:hover - background: $list-link-color - border-bottom-color: $list-border-color - text-decoration: none - - // States - - &.is-active a - border-bottom: $list-border-size solid $list-border-color - color: $list-color - font-weight: bold - text-decoration: none - -// ----- Numbered ----- // - -.list--numbered li - list-style-type: decimal diff --git a/modules/_tab.sass b/modules/_tab.sass deleted file mode 100644 index a8710d5..0000000 --- a/modules/_tab.sass +++ /dev/null @@ -1,59 +0,0 @@ -// ************************************* -// -// Tab -// -> Note; -// * Replace the '.tabs:after' with -// your preferred clearfix -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$tab-border: 1px solid #ccc !default -$tab-borderRadius: 2px !default -$tab-color: #444 !default -$tab-fontSize: 16px !default -$tab-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.tab - list-style-type: none - float: left - font-size: $tab-fontSize - a - background: lighten($tab-color, 65%) - border: $tab-border - border-radius: $tab-borderRadius $tab-borderRadius 0 0 - color: $tab-color - display: block - margin-bottom: -1px - margin-right: ($tab-whitespace / 2) - padding: 8px $tab-whitespace - text-decoration: none - &:hover, - &:focus, - &.is-active - background: #fff - - // States - - &.is-active - border-bottom-color: transparent - -// ------------------------------------- -// Tabs -// ------------------------------------- - -.tabs - border-bottom: $tab-border - margin: 0 0 $tab-whitespace - padding: 0 - &:after - clear: both - content: '' - display: table diff --git a/modules/_table.sass b/modules/_table.sass deleted file mode 100644 index cb9f32a..0000000 --- a/modules/_table.sass +++ /dev/null @@ -1,49 +0,0 @@ -// ************************************* -// -// Table -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$table-border: 1px solid #999 !default -$table-color: #444 !default -$table-fontSize: 14px !default -$table-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.table - -moz-box-sizing: border-box - box-sizing: border-box - font-size: $table-fontSize - margin: 0 0 $table-whitespace - width: 100% - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Striped ----- // - -.table--striped - .table-body tr:nth-child(odd) - background: lighten($table-color, 65%) - -// ------------------------------------- -// Submodules -// ------------------------------------- - -// ----- Row ----- // - -.table-row - border-bottom: $table-border - th, td - padding: ($table-whitespace / 2) - th - font-weight: bold - text-align: left diff --git a/structures/_collection.sass b/structures/_collection.sass new file mode 100644 index 0000000..bdc3ffb --- /dev/null +++ b/structures/_collection.sass @@ -0,0 +1,79 @@ +// ************************************* +// +// Collection +// -> Accumulation of items +// CodePen: http://codepen.io/johndjameson/pen/EaeBZd +// +// Dependencies: .g +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .g.collection[s|m|l--1of1|...] +// +// .g-b[s|m|l--1of1|...].collection-item +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$collection-columns: 3 !default +$collection-defaults: 's' 30em, 'm' 50em, 'l' 64em !default +$collection-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.collection + margin-left: -$collection-space * 0.5 + margin-right: -$collection-space * 0.5 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +.collection-item + margin-bottom: $collection-space + padding-left: $collection-space * 0.5 + padding-right: $collection-space * 0.5 + +// ------------------------------------- +// Setup +// ------------------------------------- + +=collection-device-type($namespace: '', $breakpoint: null) + + @if $namespace != '' + @media screen and (min-width: #{$breakpoint}) + [class*='collection#{$namespace}'] + + > .collection-item:nth-child(n) + clear: none + + %collection-clear#{$namespace} + @if $breakpoint == null + clear: left + @else + @media screen and (min-width: #{$breakpoint}) + clear: left + + @for $i from 1 through $collection-columns + + .collection#{$namespace}--1of#{$i} + + > .collection-item:nth-child(#{$i}n + 1) + @extend %collection-clear#{$namespace} + +// ------------------------------------- +// Creation +// ------------------------------------- + ++collection-device-type() + +@each $device in $collection-defaults + +collection-device-type("--#{nth($device, 1)}", nth($device, 2)) diff --git a/structures/_link.sass b/structures/_link.sass new file mode 100644 index 0000000..273ad01 --- /dev/null +++ b/structures/_link.sass @@ -0,0 +1,85 @@ +// ************************************* +// +// Link +// -> Actionable text +// CodePen: http://codepen.io/drewbarontini/pen/qEJNPv +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .link[bordered|inverted|muted] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Base ----- // + +$link-color: #4a4ab5 !default +$link-hover-color: lighten($link-color, 20%) !default +$link--inverted-color: #fff !default +$link--inverted-hover-color: rgba(#fff, 0.65) !default +$link--muted-color: #999 !default +$link--muted-hover-color: #777 !default + +// ----- Borders ----- // + +$link-borderWidth: 2px !default +$link-borderStyle: solid !default +$link-border: $link-borderWidth $link-borderStyle !default + +// ----- Settings ----- // + +$link-transition: all 0.3s ease-in-out + +// ------------------------------------- +// Base +// ------------------------------------- + +.link + // Either use a placeholder selector to extend your base `a` tag + // styles, or create a mixin for the shared styling on your links. + // For this exampled, the styles will be inline, but you should use + // the global `a` tag styles you're using elsewhere. + // Ex: @extend %a + // Ex: +link + color: $link-color + text-decoration: none + transition: $link-transition + + &:active, + &:focus, + &:hover + color: $link-hover-color + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Bordered ----- // + +.link--bordered + border-bottom: $link-border currentColor + +// ----- Inverted ----- // + +.link--inverted + color: $link--inverted-color + + &:active, + &:focus, + &:hover + color: $link--inverted-hover-color + +// ----- Muted ----- // + +.link--muted + color: $link--muted-color + + &:active, + &:focus, + &:hover + color: $link--muted-hover-color diff --git a/structures/flexbox/_collection.sass b/structures/flexbox/_collection.sass new file mode 100644 index 0000000..198497f --- /dev/null +++ b/structures/flexbox/_collection.sass @@ -0,0 +1,45 @@ +// ************************************* +// +// Collection +// -> Accumulation of items +// CodePen: http://codepen.io/johndjameson/pen/dPqBjy +// +// Dependencies: .g +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .g.collection[s|m|l--1of1|...] +// +// .g-b[s|m|l--1of1|...].collection-item +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$collection-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.collection + display: flex + flex-wrap: wrap + margin-left: -$collection-space * 0.5 + margin-right: -$collection-space * 0.5 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Item ------ // + +.collection-item + margin-bottom: $collection-space + padding-left: $collection-space * 0.5 + padding-right: $collection-space * 0.5