Tyfy - Modules

Tyfy mixins make it easier to use the some of the framework’s styles and effects.

tybutton

Use this mixin to display an HTML element as a button. The button’s text color will be black or white – whichever provides the best contrast with the button’s background color. To apply the mixin to a link, use the [href] attribute selector. See the links and utility documentation for more information.

Arguments

$color_default: optional; Default value is $tycolor-link-default; Default button color; must be rgb, named color, or hexidecimal.
$color_active: optional; Default value is $tycolor-link-active; Hovered and active button color; must be rgb, named color, or hexidecimal.
$border_radius: optional; Default value is $tyradius-border; Border radius of the button.

Example

tag.button {
  @include tybutton;
}
a.button[href] {
  @include tybutton(red,blue,0px);
}

tybutton-outline

Use this mixin to display an HTML element as an outlined button. In the default state, the button background color is transparent and the button text color is the default color. In the active state, the button background color is the active color and the text color is either black or white – whichever provides the best contrast with the background color. To apply the mixin to a link, use the [href] attribute selector. See the links and utility documentation for more information.

Arguments

$color_default: optional; Default value is $tycolor-link-default; The default button color; must be rgb, named color, or hexidecimal.
$color_active: optional; Default value is $tycolor-link-active; Hovered and active button color; must be rgb, named color, or hexidecimal.
$border_radius: optional; Default value is $tyradius-border; Border radius of the button.

Example

tag.button-outline {
  @include tybutton-outline;
}
a.button-outline[href] {
  @include tybutton-outline(red,blue,0px);
}

tyclear

Use this mixin to clear floats within an element. This mixin does not accept any arguments. Code comes from HTML5 Boilerplate.

Example

tag.class {
  @include tyclear;
}

tyfadein

Use this mixin to apply a non-looping fade in animation to an element with the given animation duration.

Arguments

$duration: optional; Default value is tyduration(1x); The duration of the animation in seconds or milliseconds.

Example

tag.class {
  @include tyfadein(2s);
}

tyhidden

Use this mixin to visually hide an element, but allow screen readers and search engines to read the element’s content. The default true argument hides the element. The false argument is used to reverse the default styles. Code is adapted from HTML5 Boilerplate

Arguments

$state: optional; Default value is true; Allowed values are true or false.

Example

tag.hide-me {
  @include tyhidden;
  &.show-me {
    @include tyhidden(false);
  }
}

tymargins-size

Use this mixin to set the size of adjacent sibling margins for all children of the selected elements. For more information, see the Margins documentation.

Arguments

$context: optional; Default value is all; Allowed values are all, once, headings, or lists. The all context sets the value for all tags; the once context sets the margin value only for immediate desendants; the headings context sets the value only for headings; the lists context sets the value only for children of ordered, unordered, and definition lists.
$measure: optional; Default value is $tyspacing-md; A rem-unit size of the adjacent sibling margins to apply in the given context.

Example

tag.class {
  @include tymargins-size(all,tygrid(1));
}

tymargins

Use this mixin to turn adjacent sibling margins on or off for children of the selected elements. If the state is on, the margins are set to the Tyfy default values. To override with specific values, use the tymargins-size mixin.

Arguments

$state: optional; Default value is on; Allowed values are on, once, skip, or off. The skip option eliminates the adjacent sibling margins only on immediate descendants; once applies the adjacent sibling margins only to immediate descendants.

Example

tag.class {
  @include tymargins(off);
}