Skip to content

Commit

Permalink
documentation improving
Browse files Browse the repository at this point in the history
  • Loading branch information
Black Mirror committed May 2, 2018
1 parent 07e5a00 commit acc2ac9
Show file tree
Hide file tree
Showing 5 changed files with 212 additions and 61 deletions.
10 changes: 5 additions & 5 deletions docs/index.html
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions scss/mixins/_background.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ $background-position-vertical-modes: array-concat((top, center, bottom), $css-de
/// @param {string | array} $bp - the background position value/values
/// @link https://www.w3schools.com/cssref/pr_background-position.asp W3Schools background-position docs
/// @requires {function} nth-value
/// @requires {function} is-size
/// @requires {function} is-percentage
/// @requires {function} array-contains
/// @requires {variable} background-position-horizontal-modes
/// @requires {variable} background-position-vertical-modes
/// @return {boolean}
@function is-background-position($bp) {
@if is-defined($bp) {
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_margin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $margin-modes: array-concat((auto), $css-default-modes);
}

@mixin margin($m) {
$margin-top: nth-value($m, 1, 0);
$margin-top: nth-value($m, 1, 0);
@include margin-top($margin-top);

$margin-right: nth-value($m, 2, $margin-top);
Expand Down
33 changes: 33 additions & 0 deletions scss/mixins/_overflow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,45 @@
/// @author blackmirror1980
////

/// Overflow modes
///
/// @type list
/// @access private
$overflow-modes: array-concat((visible, hidden, scroll, overlay, unset, auto), $css-default-modes);

/// Checks if something is a supported overflow mode
///
/// @access public
/// @param {string} $o - the overflow mode
/// @return {boolean}
@function is-overflow-mode($o) {
@return is-defined($o) and array-contains($overflow-modes, $o);
}

/// Overflow mixin
///
/// @param {string} $o - the overflow mode
/// @example scss - Usage
/// .overflow-element {
/// @include overflow(hidden);
/// }
///
/// @example css - Output
/// .overflow-element {
/// overflow-x: hidden;
/// overflow-y: hidden;
/// }
///
/// @example scss - Usage
/// .overflow-element {
/// @include overflow(hidden scroll);
/// }
///
/// @example css - Output
/// .overflow-element {
/// overflow-x: hidden;
/// overflow-y: scroll;
/// }
@mixin overflow($o) {
$overflow-x: nth-value($o, 1);

Expand Down
223 changes: 168 additions & 55 deletions scss/mixins/_text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,176 @@
/// @author blackmirror1980
////

@function is-font-family($ff) {
@return is-defined($ff) and (is-string($ff) or is-array($ff));
/// Font size modes
///
/// @type list
/// @access private
$font-size-modes: array-concat((medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger), $css-default-modes);

/// Checks if something is a supported font-size value
///
/// @access public
/// @param {size | percentage | font-size-mode} $fs - the font-size value
/// @link https://www.w3schools.com/cssref/pr_font_font-size.asp - W3Schools font-size docs
/// @return {boolean}
@function is-font-size($fs) {
@return is-defined($fs) and (is-size($fs) or is-percentage($fs) or array-contains($font-size-modes, $fs));
}

/// Font size mixin
///
/// @param {size | percentage | font-size-mode} $fs - the font-size value
/// @example scss - Usage
/// .font-size-element {
/// @include font-size(1.8rem);
/// }
///
/// @example css - Output
/// .font-size-element {
/// font-size: 1.8rem;
/// }
@mixin font-size($fs) {
@if is-font-size($fs) {
font-size: $fs;
}
@else {
@warn '`font-size: #{$fs}` is not a valid font-size value';
}
}

$font-weight-modes: array-concat((normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900), $css-default-modes);
/// Line height modes
///
/// @type list
/// @access private
$line-height-modes: array-concat((normal), $css-default-modes);

@function is-font-weight($fw) {
@return array-contains($font-weight-modes, $fw);
/// Checks if something is a supported line-height value
///
/// @access public
/// @param {size | percentage | line-height-mode} $lh - the line-height value
/// @link https://www.w3schools.com/cssref/pr_dim_line-height.asp - W3Schools line-height docs
/// @return {boolean}
@function is-line-height($lh) {
@return is-defined($lh) and (is-size($lh) or is-percentage($lh) or array-contains($line-height-modes, $lh));
}

/// Line height mixin
///
/// @param {size | percentage | line-height-mode} $lh - the line-height value
/// @example scss - Usage
/// .line-height-element {
/// @include line-height(2.5rem);
/// }
///
/// @example css - Output
/// .line-height-element {
/// line-height: 2.5rem;
/// }
@mixin line-height($lh) {
@if is-line-height($lh) {
line-height: $lh;
}
@else {
@warn '`line-height: #{$lh}` is not a valid line-height value';
}
}

$font-modes: array-concat((medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger), $css-default-modes);

@function is-font-size($fs) {
@return is-size($fs) or array-contains($font-modes, $fs);
/// Checks if something is a supported font-family value
///
/// @access public
/// @param {string | array | list} $ff - the font-family value
/// @link https://www.w3schools.com/cssref/pr_font_font-family.asp - W3Schools font-family docs
/// @return {boolean}
@function is-font-family($ff) {
@return is-defined($ff) and (is-string($ff) or is-array($ff));
}

$line-height-modes: array-concat((normal), $css-default-modes);

@function is-line-height($s) {
@return is-size($s) or array-contains($line-height-modes, $s);
/// Font family mixin
///
/// @param {string | array | list} $ff - the font-family value
/// @example scss - Usage
/// .font-family-element {
/// @include font-family('Source Sans Pro');
/// }
///
/// @example css - Output
/// .font-family-element {
/// font-family: 'Source Sans Pro';
/// }
///
/// @example scss - Usage
/// .font-family-element {
/// @include font-family('Source Sans Pro', Verdana, sans-serif);
/// }
///
/// @example css - Output
/// .font-family-element {
/// font-family: 'Source Sans Pro', Verdana, sans-serif;
/// }
@mixin font-family($ff) {
@if is-font-family($ff) {
font-family: #{$ff};
}
@else {
@warn '`font-family: #{$ff}` is not a valid font-family value';
}
}

/// font weight modes
///
/// @type list
/// @access private
$font-weight-modes: array-concat((normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900), $css-default-modes);

/// Checks if something is a supported font-weight value
///
/// @access public
/// @param {string | integer} $fw - the font-weight value
/// @link https://www.w3schools.com/cssref/pr_font_weight.asp - W3Schools font-weight docs
/// @return {boolean}
@function is-font-weight($fw) {
@return is-defined($fw) and array-contains($font-weight-modes, $fw);
}

/// Font weight mixin
///
/// @param {string | integer} $fw - the font-weight value
/// @example scss - Usage
/// .font-weight-element {
/// @include font-weight(bold);
/// }
///
/// @example css - Output
/// .font-weight-element {
/// font-weight: bold;
/// }
@mixin font-weight($fw) {
@if is-font-weight($fw) {
font-weight: $fw;
}
@else {
@warn '`font-weight: #{$fw}` is not a valid font-weight';
}
}

/// Font mixin
///
/// @param {object | map} $options - the options
/// @param {size | percentage | font-size-mode} $options.size [1rem] - the font-size value
/// @param {size | percentage | line-height-mode} $options.height [1rem] - the line-height value
/// @param {string | array | list} $options.family [null] - the font-family value
/// @param {string | integer} $options.weight [normal] - the font-weight value
/// @param {color} $options.color [null] - the color value
/// @example scss - Usage
/// .font-element {
/// @include font(1.5rem 2.5rem);
/// }
///
/// @example css - Output
/// .font-element {
/// font-size: 1.5rem;
/// line-height: 2.5rem;
/// }
@mixin font($options) {
$settings: (size: 1rem, height: 1rem, family: null, weight: normal, color: null);

Expand Down Expand Up @@ -69,56 +217,31 @@ $line-height-modes: array-concat((normal), $css-default-modes);
$font-size: map-get($settings, size);

@if is-defined($font-size) {
@if is-font-size($font-size) {
font-size: $font-size;
}
@else {
@warn '`font-size: #{$font-size}` is not a valid css size';
}
@include font-size($font-size);
}

$line-height: map-get($settings, height);

@if is-defined($line-height) {
@if is-line-height($line-height) {
line-height: $line-height;
}
@else {
@warn '`line-height: #{$line-height}` is not a valid line-height value';
}
@include line-height($line-height);
}

$font-family: map-get($settings, family);

@if is-defined($font-family) {
@if is-font-family($font-family) {
font-family: #{$font-family};
}
@else {
@warn '`font-family: #{$font-family}` is not a valid font-family value';
}
@include font-family($font-family);
}

$font-weight: map-get($settings, weight);

@if is-defined($font-weight) {
@if is-font-weight($font-weight) {
font-weight: $font-weight;
}
@else {
@warn '`font-weight: #{$font-weight}` is not a valid font-weight';
}
@include font-weight($font-weight);
}

$font-color: map-get($settings, color);

@if is-defined($font-color) {
@if is-css-color($font-color) {
color: $font-color;
}
@else {
@warn '`color: #{$font-color}` is not a valid css color';
}
@include box-color($font-color null);
}
}

Expand Down Expand Up @@ -175,23 +298,13 @@ $vertical-align-modes: array-concat((baseline, sub, super, top, text-top, middle
$h: get($settings, h);

@if is-defined($h) {
@if is-text-align($h) {
text-align: $h;
}
@else {
@warn '`text-align: #{$h}` is not a valid text-align value';
}
@include text-align($h);
}

$v: get($settings, v);

@if is-defined($v) {
@if is-vertical-align($v) {
vertical-align: $v;
}
@else {
@warn '`vertical-align: #{$v}` is not a valid vertical-align value';
}
@include vertical-align($v);
}
}

Expand Down

0 comments on commit acc2ac9

Please sign in to comment.