Skip to content

Commit

Permalink
Properties (#45)
Browse files Browse the repository at this point in the history 
* Element meta-mixins
  • Loading branch information
@kgcreative @sherakama
kgcreative authored and sherakama committed May 17, 2017
1 parent 4bff9cc commit dd27900
Show file tree
Hide file tree
Showing 98 changed files with 10,829 additions and 9,191 deletions.
36 changes: 35 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ module.exports = function(grunt) {
autofill: ['requires', 'throws'],
exclude: [
'vendors/*',
'base/*'
],
display: {
sort: [
Expand All @@ -35,6 +34,33 @@ module.exports = function(grunt) {
'file',
],
},
groups: {
'_variables|__decanter': 'Decanter Settings',
'_variables|_bourbon': 'Bourbon Settings',
'_variables|_neat': 'Neat Settings',
'_variables|animations': 'Animation & Transition Variables',
'_variables|borders': 'Border Variables',
'_variables|breakpoint-boundaries': 'Breakpoint Variables',
'_variables|grid-media': 'Grid Media Variables',
'_variables|buttons': 'Button Variables',
'_variables|colors': 'Color Variables',
'_variables|containers': 'Container Variables',
'_variables|forms': 'Form Variables',
'_variables|typography': 'Typography Variables',
'_variables|vertical-rhythm': 'Vertical Rhythm Variables',
'font-management': 'Font Loading & Management',
'functions': 'Functions',
'mixins': 'Mixins',
'base|_documentation': 'Documentation for Base',
'base|box-model': 'Box Model',
'base|body': 'Body',
'base|typography': 'Typography',
'base|forms': 'Forms',
'base|lists': 'Lists',
'base|tables': 'Tables',
'base|media-elements': 'Media Elements',
'base|buttons': 'Buttons',
},
},
},
base: {
Expand All @@ -52,7 +78,15 @@ module.exports = function(grunt) {
],
},
groups: {
'base|_documentation': 'Documentation for Base',
'base|box-model': 'Box Model',
'base|body': 'Body',
'base|typography': 'Typography',
'base|forms': 'Forms',
'base|lists': 'Lists',
'base|tables': 'Tables',
'base|media-elements': 'Media Elements',
'base|buttons': 'Buttons',
},
},
},
Expand Down
127 changes: 99 additions & 28 deletions core/base/_body.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,117 @@
////
/// Root html element styles for the body and main elements.
/// Style placement and basic settings for the top level html elements.
///
/// @group base|body
///
/// @type map
///
/// @see $group__element--default
/// @see $group__element
////

// ---------------------------------------------------------------------------------------------------------------------
/// - Default body element styling
///
/// Body defaults
///
/// @example scss - Used in `base/_body.scss` by the `body` element
/// body {
/// @include properties($body__body--default, $body__body);
/// }
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
$body__body--default: (
min-height: 100vh,
display: flex,
flex-direction: column,
overflow-x: hidden,
margin: 0,
) !default;

$body__body: () !default;

body {
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
margin: 0;
@include properties($body__body--default, $body__body);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Set up source order for mobile first approach
///
/// @example scss - Used in `base/_body.scss` by the `body > header` element
/// body > header {
/// @include properties($body__body-header--default, $body__body-header);
/// }
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
$body__body-header--default: (
order: -50
) !default;

$body__body-header: () !default;

body > header {
@include properties($body__body-header--default, $body__body-header);
}

/// We rely on source order for mobile-first approach
/// in this case:
// ---------------------------------------------------------------------------------------------------------------------
/// - Set up source order for mobile first approach
///
/// -50 header
/// -40 nav
/// 1 main
/// 50 footer
/// @example scss - Used in `base/_body.scss` by the `body > nav` element
/// body > nav {
/// @include properties($body__body-nav--default, $body__body-nav);
/// }
///
body > header { order: -50; }
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
$body__body-nav--default: (
order: -40,
) !default;

/// Nav html element.
body > nav { order: -40; }
$body__body-nav: () !default;

/// Main html element of body.
body > main { order: 1; }
body > nav {
@include properties($body__body-nav--default, $body__body-nav);
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Set up source order for mobile first approach
/// - Set up basic properties for the `main` element
///
/// @example scss - Used in `base/_body.scss` by the `body > main, body > #main` elements
/// body > main {
/// @include properties(body__body-main--default, body__body-main);
/// }
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
$body__body-main--default: (
order: 1,
overflow: hidden,
background-color: color(background),
flex: 1,

'@media print': (
background: transparent,
),
) !default;

// footer html element of body.
body > footer { order: 50; }
$body__body-main: () !default;

body > main,
body > #main {
@include properties( $body__body-main--default, $body__body-main );
}

// ---------------------------------------------------------------------------------------------------------------------
/// - Set up source order for mobile first approach
///
/// @example scss - Used in `base/_body.scss` by the `body > footer` element
/// body > main {
/// @include properties(body__body-footer--default, body__body-footer);
/// }
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
$body__body-footer--default: (
order: 50,
) !default;

/// Main html element.
main {
overflow: hidden;
background-color: color(background);
flex: 1;
$body__body-footer: () !default;

@media print {
background: transparent;
}
body > footer {
@include properties($body__body-footer--default, $body__body-footer );
}
55 changes: 39 additions & 16 deletions core/base/_box-model.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,52 @@

////
/// Box model default styles.
///
/// @group base|box-model
///
/// @type map
///
/// @see $group__element--default
/// @see $group__element
////

/// Set up a decent box model on the root element.
// ---------------------------------------------------------------------------------------------------------------------
/// - Set up box model for the root element
///
/// @example scss - Used in `base/_box-model.scss` by the `html` root element
/// html {
/// box-sizing: border-box;
/// }
///
/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
$box-model__html--default: (
box-sizing: border-box,
)!default;

$box-model__html: ()!default;

html {
font-size: 62.5%; // 1rem = 10px;
box-sizing: border-box;
@include properties( $box-model__html--default, $box-model__html );
}

/// Make all elements from the DOM inherit from the parent box-sizing
/// Since `*` has a specificity of 0, it does not override the `html` value
/// making all elements inheriting from the root box-sizing value
/// See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
// ---------------------------------------------------------------------------------------------------------------------
/// - Make all elements from the DOM inherit from the parent box-sizing
/// - Since `*` has a specificity of 0, it does not override the `html` value,
/// making all elements inheriting from the root box-sizing value
///
/// @example scss - Used in `base/_box-model.scss` by the `*, *::before, *::after` elements
/// *, *::before, *::after {
/// @include properties(box-model__box-sizing--default, box-model__box-sizing);
/// }
///
/// @link https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
///
$box-model__box-sizing--default: (
box-sizing: inherit,
) !default;

*, *::before, *::after {
box-sizing: inherit;
}
$box-model__box-sizing: ()!default;

/// Set the base body font size.
/// @require {function} em Relative unit function
/// @require {variable} $base-font-size Base font size

body {
@include font-size($base-font-size, $root-font-size);
*, *::before, *::after {
@include properties($box-model__box-sizing--default, $box-model__box-sizing);
}
101 changes: 17 additions & 84 deletions core/base/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,104 +3,37 @@
////
/// Button base styles.
/// @group base|buttons
/// @group buttons
///
/// @type map
///
/// @see $group__element--default
/// @see $group__element
////

/// Generic Button Styles.
/// @require {function} color Returns a color from the color map.
/// @require {function} em normalized relative values.
/// @require {mixin} material-shadow adds a shadow.
/// @require {variable} $base-font-family The default base font styles.
/// @require {variable} $base-line-height Base line height setting.
/// @require {variable} $base-transition Base transition setting.
/// @require {variable} $small-spacing Base small space setting.
/// @require button
/// @require $base-button
%button__generic {
$_font-family: $base-font-family;
$_line-height: $base-line-height;
$_transition: $base-transition;
$_spacing: $small-spacing;

@include material-shadow(flat);

appearance: none;
background-color: color(action);
border: none;
color: color(reverse-text);
cursor: pointer;
display: inline-block;
font-family: $_font-family;
font-size: inherit;
-webkit-font-smoothing: antialiased;
font-weight: inherit;
line-height: $_line-height;
padding: em(6px) em($_spacing) em(7px);
text-align: center;
text-decoration: none;
user-select: none;
vertical-align: middle;
transition: $_transition;

&:hover,
&:focus,
&:active {
background-color: color(action--active);
color: color(reverse-text--active);
text-decoration: none;
}

&:disabled,
&.disabled {
background-color: color(action);
color: color(reverse-text);
cursor: not-allowed;
opacity: .5;

&:hover {
cursor: not-allowed;
}
}
@include button($base-button);
}

/// Primary Button Styles.
/// @require {function} em normalized relative values.
/// @require {function} color Returns a color from the color map.
/// @require {placeholder} button__generic
/// @require {variable} $base-spacing
/// @require %button__generic
/// @require button
/// @require $primary-button
%button__primary {
$_spacing: $base-spacing;

@extend %button__generic;

background-color: color(action);
color: color(reverse-text);
font-weight: 600;
padding: em(10px) em($_spacing) em(12px);

@include on-event {
background-color: color(action--active);
color: color(reverse-text);
}
@include button($primary-button);
}

/// Secondary Button Styles.
/// @require {function} em normalized relative values.
/// @require {function} color Returns a color from the color map.
/// @require {placeholder} button__generic
/// @require {variable} $base-spacing
/// @require %button__generic
/// @require button
/// @require $secondary-button
%button__secondary {
$_spacing: $base-spacing;

@extend %button__generic;
background-color: inherit;
border: $base-border;
color: color(text);
font-weight: 600;
padding: em(7px) em($_spacing) em(9px);

@include on-event {
background-color: inherit;
border-color: color(action);
color: color(action);
}
@include button($secondary-button);
}

/// Apply all button styles.
Expand Down
Loading

0 comments on commit dd27900

Please sign in to comment.