Helpers
Trend Helpers are a combination of functions, mixins, variables, and class selectors to scaffold, prototype, or build out UI. For the most part, this package is used throughout all the individual packages.
- Installation
- Basic Usage
- Variables
- Background Helpers
- Border Helpers
- Display Helpers
- Flex Helpers
- Image Helpers
- Link Helpers
- List Helpers
- Layout Helpers
- Margin Helpers
- Padding Helpers
- Shadow Helpers
- Size Helpers
- Text Helpers
- Whitespace Helpers
- Mixins
- Functions
Installation
npm install @trend/helpers
Basic Usage
// Import entire package contents.
@import "@trend/helpers/styles";
// Import classes only.
@import "@trend/helpers/scss/helpers";
// Import specific pieces.
@import "@trend/helpers/scss/variables";
@import "@trend/helpers/scss/functions";
@import "@trend/helpers/scss/mixins";
// Import even more granular pieces.
@import "@trend/helpers/scss/functions/relative-units";
@import "@trend/helpers/scss/mixins/rtl";
@import "@trend/helpers/scss/addons/easing-variables";
Variables
Base package variables shared between indiviudal Helpers and also used for providing consistent values between other TREND component packages.
-
$tc-spacings
-map
of n (none), s (small), m (medium), l (large) -
$tc-breakpoints
-map
of xs, sm, md, lg, xl -
$tc-proportional-sizes
-list
of default proportional sizes
Variables
SCSS Variables
-
$tc-helper-variables
-map
of css variables to generate
CSS Variables
--tc-helper-transition-duration
--tc-helper-transition-timing-function
Variables
Base package variables shared between indiviudal Helpers and also used for providing consistent values between other TREND component packages.
-
$tc-spacings
-map
of n (none), s (small), m (medium), l (large) -
$tc-breakpoints
-map
of xs, sm, md, lg, xl -
$tc-proportional-sizes
-list
of default proportional sizes
Variables
SCSS Variables
-
$tc-helper-variables
-map
of css variables to generate
CSS Variables
--tc-helper-transition-duration
--tc-helper-transition-timing-function
Background Helpers
Variables
-
$tc-has-background
- Turn on/off available classes -
$tc-has-background-media
- Turn on/off media classes -
$tc-background-breakpoints
- List of breakpoints to generate media queries -
$tc-backgrounds
- Map of rulesets to generate, values can be a$tc-color-<color-map>
variable
Available classes
-
tc-background-transparent
- Background colortransparent
-
tc-background-<color>-<weight>
- Background color weight from color map
Border Helpers
Variables
-
$tc-has-border
- Turn on/off helper classes -
$tc-has-border-media
- Turn on/off media classes -
$tc-border-breakpoints
- List of breakpoints to generate media queries -
$tc-border-width
- Default width in pixels -
$tc-border-color
- Defaultcolor
type -
$tc-border-radius
- Default radius value in pixels -
$tc-borders
-map
ofborder-<position>
rulesets -
$tc-border-radii
-map
ofborder-<position>-radius
rulesets -
$tc-border-colors
-map
ofborder-color
rulesets
Available classes
tc-border
tc-border-<top|right|bottom|left|none>
tc-border-<top|right|bottom|left>-0
tc-border-round
tc-border-round-<top|right|bottom|left|none>
tc-border-round-top-<left|right>
tc-border-round-bottom-<right|left>
tc-border-rounded
tc-border-<color>-<weight>
Display Helpers
Variables
-
$tc-has-display
- Turn on/off available classes -
$tc-has-display-media
- Turn on/off media classes -
$tc-display-breakpoints
- List of breakpoints to generate media queries -
$tc-displays
- List of rulesets to generate
Available classes
-
tc-display-block
- Displayblock
-
tc-display-inline
- Displayinline
-
tc-display-inline-block
- Displayinline-block
-
tc-display-flex
- Displayflex
-
tc-display-none
- Displaynone
-
tc-display-table
- Displaytable
-
tc-display-table-cell
- Displaytable-cell
-
tc-display-table-row
- Displaytable-row
-
tc-display-visually-hide
- Visually hide an element but leave available to screenreaders
Flex Helpers
Variables
-
$tc-has-flex
: Turn on/off helper classes -
$tc-has-flex-media
: Turn on/off media classes -
$tc-flex-breakpoints
: List of breakpoints to generate media queries -
$tc-flex
:map
of rulesets
Available classes
-
tc-flex
- displayflex
-
tc-flex-inline
- displayinline-flex
-
tc-flex-wrap
- flex-wrapwrap
-
tc-flex-nowrap
- flex-wrapnowrap
-
tc-flex-wrap-reverse
- flex-wrapwrap-reverse
-
tc-flex-row
- flex-directionrow
-
tc-flex-row-reverse
- flex-directionrow-reverse
-
tc-flex-column
- flex-directioncolumn
-
tc-flex-column-reverse
- flex-directioncolumn-reverse
-
tc-flex-between
- justify-contentspace-between
-
tc-flex-center
- justify-contentcenter
-
tc-flex-justify
- justify-contentspace-around
-
tc-flex-left
- justify-contentflex-start
-
tc-flex-right
- justify-contentflex-end
-
tc-flex-baseline
- align-itemsbaseline
-
tc-flex-bottom
- align-itemsflex-end
-
tc-flex-middle
- align-itemscenter
-
tc-flex-stretch
- align-itemsstretch
-
tc-flex-top
- align-itemsflex-start
-
tc-flex-baseline-content
- align-contentbaseline
-
tc-flex-bottom-content
- align-contentflex-end
-
tc-flex-middle-content
- align-contentcenter
-
tc-flex-stretch-content
- align-contentstretch
-
tc-flex-top-content
- align-contentflex-start
-
tc-flex-item-auto
- item-autoauto
-
tc-flex-item-center
- item-autocenter
-
tc-flex-item-left
- item-autoflex-start
-
tc-flex-item-right
- item-autoflex-end
-
tc-flex-item-stretch
- item-autostretch
-
tc-flex-grow1
- flex1 1 0%
-
tc-flex-grow2
- flex2 1 0%
-
tc-flex-grow3
- flex3 1 0%
-
tc-flex-grow4
- flex4 1 0%
-
tc-flex-grow5
- flex5 1 0%
-
tc-flex-shrink
- flex shrink0
-
tc-flex-shrink1
- flex shrink1
-
tc-flex-shrink2
- flex shrink2
-
tc-flex-shrink3
- flex shrink3
-
tc-flex-shrink4
- flex shrink4
-
tc-flex-shrink5
- flex shrink5
-
tc-flex-basis-auto
- flex-basisauto
-
tc-flex-basis0
- flex-basis0
Image Helpers
Variables
-
$tc-has-image
- Turn on/off available classes -
$tc-has-image-media
- Turn on/off media classes -
$tc-image-breakpoints
: List of breakpoints to generate media queries -
$tc-image
- Map of rulesets to generate
Available classes
-
tc-image-fluid
- responsive image -
tc-image-circle
- circular images
Link Helpers
Variables
-
$tc-has-link
- Turn on/off available classes -
$tc-has-link-media
- Turn on/off media classes -
$tc-link-breakpoints
: List of breakpoints to generate media queries -
$tc-link
- Map of rulesets to generate
Available classes
-
tc-link-plain
- text-decorationnone
-
tc-link-decorate
- text-decorationunderline
-
NOTE Will apply rule just the
:hover
,:focus
, and:active
pseudoclasses
List Helpers
Variables
-
$tc-has-list
- Turn on/off available classes -
$tc-has-list-media
- Turn on/off media classes -
$tc-list-breakpoints
: List of breakpoints to generate media queries -
$tc-list
- Map of rulesets to generate
Available classes
-
tc-list-styleless
- strip allmargin
,padding
andlist-style
-
tc-list-inline
- horizontal list
Layout Helpers
Variables
-
$tc-has-layout
- Turn on/off available classes -
$tc-has-layout-media
- Turn on/off media classes -
$tc-layout-breakpoints
: List of breakpoints to generate media queries -
$tc-layouts
- Map of rulesets to generate
Available classes
-
tc-layout-absolute
- Positionabsolute
-
tc-layout-clip
- Render new block formatting context -
tc-layout-relative
- Positionrelative
-
tc-layout-static
- Positionstatic
-
tc-layout-scroll-x
- Turn on horizontal scrolling an element -
tc-layout-scroll-y
- Turn on vertical scrolling an element -
tc-layout-pull
- Floatleft
-
tc-layout-push
- Floatright
-
tc-layout-absolute-center
- Center an elementabsolute
position -
tc-layout-fixed-center
- Center an element withfixed
position -
tc-layout-absolute-viewport
- Positonabsolute
to be size of viewport -
tc-layout-fixed-viewport
- Positonfixed
to be size of viewport -
tc-layout-clearfix
- Apply clearfix to an element
Margin Helpers
Variables
-
$tc-has-margin
- Turn on/off available classes -
$tc-has-margin-media
- Turn on/off media classes -
$tc-margin-breakpoints
- List of breakpoints to generate media queries -
$tc-margin-spacings
- map of spacing values -
$tc-margin
- Map where key is property name for rule and suffix for selector
Available classes
-
tc-m<t|r|b|l><n|s|m|l|a>
-margin-<top|right|bottom|left|right>
rule
Padding Helpers
Variables
-
$tc-has-padding
- Turn on/off available classes -
$tc-has-padding-media
- Turn on/off media classes -
$tc-padding-breakpoints
- List of breakpoints to generate media queries -
$tc-padding-spacings
- map of spacing values -
$tc-padding
- Map where key is property name for rule and suffix for selector
Available classes
-
tc-p<t|r|b|l><n|s|m|l|a>
-padding-<top|right|bottom|left|right>
rule
Shadow Helpers
Variables
-
$tc-has-shadow
- Turn on/off available classes -
$tc-has-shadow-media
- Turn on/off media classes -
$tc-shadow-breakpoints
- List of breakpoints to generate media queries -
$tc-shadow
- Number of shadows levels to create, defaults to24
-
$tc-shadow-color
- Default shadow color, defaults to#000
Available classes
-
tc-shadow-<1-24>
- box-shadow rule
Size Helpers
Variables
-
$tc-has-size
- Turn on/off available classes -
$tc-has-size-media
- Turn on/off media classes -
$tc-size-breakpoints
- List of breakpoints to generate media queries -
$tc-size
- Map of rulesets to generate -
$tc-sizes
- Defaults to$tc-proportional-sizes
Available classes (numerous) - Create a proportional width rule
-
x
is an integer less thanY
-
Y
is can be any one of thetc-proportional-sizes
(e.g 2, 3, 4, 5...) -
tc-size-compact
- Useflex-basis
to wrap its content -
tc-size-occupy
- Useflex
andflex-basis
to occupy remaing space -
tc-size-full
- Make element width of parent tc-size-<xofY>
Text Helpers
Variables
-
$tc-has-text
- Turn on/off available classes -
$tc-has-text-media
- Turn on/off media classes -
$tc-text-breakpoints
- List of breakpoints to generate media queries -
$tc-text
- Map of rulesets to generate -
$tc-text-colors
- Map of color variables
Available classes
-
tc-text-<left|center|right|justify>
- Adjusttext-align
of an element -
tc-text-<top|middle|bottom|baseline
- Adjustvertical-align
of an element -
tc-text-truncate
- Add ellipsis to overflowing text-
NOTE Requires
text-truncate
mixin
-
NOTE Requires
-
tc-text-break
- word-wrapbreak-word
-
tc-text-inherit-color
- Make an element inherit color of parent -
tc-text-<justify|uppercase|lowercase|capitalize>
- Transform text -
tc-text-sentence-case
- Capitlize first letter of a sentence -
tc-text-<normal|nowrap|preline>
- Adjust whitespace of text -
tc-text-<color>-<weight>
- Adjust text color-
color
is name of a color map -
weight
is the color weight from map
-
Whitespace Helpers (Append/Prepend)
Append (after) or prepend (before) whitespace to an HTML element.
Variables
-
$tc-has-<append|prepend>
- Turn on/off available classes -
$tc-has-<append|prepend>-media
- Turn on/off media classes -
$tc-<append|prepend>-breakpoint-keys
- What breakpoints should be generated -
$tc-<append|prepend>-sizes
- Size ruleset to generate, defaults$tc-proportional-sizes
Available classes
-
tc-<append|prepend>-<xofY>
(numerous) - Create a proportional margin rule-
x
is an integer less thanY
-
Y
can be any one of thetc-proportional-sizes
(e.g 2, 3, 4, 5...)
-
Mixins
Todo.
Functions
Todo.