Presets

dmbdesignpdx edited this page May 13, 2018 · 10 revisions

Predefined Rules as Includes/Placeholders and Functions

  1. Standard
  2. With Options
  3. Special
  4. Samples (Functions)

1. Standard


after

Creates Pseudo Element (after)
@include after { content };

before

Creates Pseudo Element (before)
@include before { content };

box

Uses display:flex (with Its Prefixes)
@include box;
//or
@extend %box;

clear

Clears Float with:
&::after {
   display: table;
   content: '';
   clear: both;
}
@include clear;
//or
@extend %clear;

ctrAbs

Center with Absolute Positioning
@include ctrAbs;
//or
@extend %ctrAbs;

ctrBox

Center with Flexbox (For Parent)
@include ctrBox;
//or
@extend %ctrBox;

ctrRel

Center with Relative Positioning
@include ctrRel;
//or
@extend %ctrRel;

equal

Uses an equal ratio (1:1)
@include equal;
//or
@extend %equal;

golden

Uses Golden Ratio (1:1.618)
@include ctrRel;
//or
@extend %ctrRel;

inlineBox

Uses display:inline-flex
@include inlineBox;
//or
@extend %inlineBox;

noBounding

No Padding, Margin, Border, and Outline
@include noBounding;
//or
@extend %noBounding;

noBuffering

No Padding and Margin
@include noBuffering;
//or
@extend %noBuffering;

noLooks

Remove Default Appearance
@include noLooks;
//or
@extend %noLooks;

noOuty

No Outline and Border
@include noOuty;
//or
@extend %noOuty;

noSelect

No User Selecting
@include noSelect;
//or
@extend %noSelect;

noSpacing

No Padding, Margin, and Border
@include noSpacing;
//or
@extend %noSpacing;

noTap

No Highlight on Tap in Mobile
@include noTap;
//or
@extend %noTap;

noTextAdjust

No Text Size Adjusting
@include noTextAdjust;
//or
@extend %noTextAdjust;

overlay

Creates Pseudo Element Full Width and Height on Top
@include overlay { content };

smoothFonts

Font Antialiasing for OSX
@include smoothFonts;
//or
@extend %smoothFonts;

smoothMover

Uses backface-visibility:hidden on Animated Object
@include smoothMover;
//or
@extend %smoothMover;

smoothParent

Uses transform:preserve-3d on Animated Object's Parent
@include smoothParent;
//or
@extend %smoothParent;

standard

Use Standard Ratio (4:3)
@include standard;
//or
@extend %standard;

superSmooth

Uses transform:translateZ(0) on Animated Object
@include superSmooth;
//or
@extend %superSmooth;

widescreen

Use Widescreen Ratio (16:9)
@include widescreen;
//or
@extend %widescreen;

withAll

Uses box-sizing:border-box
@include withAll;
//or
@extend %withAll;

2. With Options


Box Shadow Sizes

@include useShadow($size);
$size
xs, s, m, l
extend equivalent:
@extend %useShadow-[$size];

target

To use code only with a specific browser
@include target($browser){ content };
$browser
blink, safari, firefox, edge

3. Special


Typography

longCopy

Uses text-rendering: optimizeSpeed
@include longCopy;
//or
@extend %longCopy;

shortCopy

Uses font-feature-settings: "kern" 1, "liga" 1; font-kerning: normal
@include shortCopy;
//or
@extend %shortCopy;

title

Uses text-rendering:geometricPrecision; font-feature-settings: "kern" 1; font-kerning:normal;
@include title;
//or
@extend %title;

For Pseudo Elements

pseudo

@include pseudo($position);
$position
CSS position value.
@extend %pseudoRel;   // position:relative

@extend %pseudoAbs;   // position:absolute

CSS Output Watch

Often used rules that should be in a grouped selector.


%absolute

position:absolute

%block

display:block

%center

text-align:center

%inline

display:inline-block

%fixed

position:fixed

%left

text-align:left

%none

display:none

%relative

position:relative

%right

text-align:right
CSS Reset

freshStart

General, output:
html, body, figure, div, h1, h2, h3, h4, h5, h6, hgroup, address, p, hr, blockquote, summary, ol, ul, dl, dd, pre, table, tbody, th, tr, td, colgroup, thead, tfoot, iframe {
   padding: 0;
   margin: 0;
   border: 0;
}

nav, main, section, header, footer, article, aside, address, hgroup, img, object, svg, iframe, video, audio, map, embed, canvas, textarea, form, fieldset, input, select, button, label, meter, progress, figure, ol, ul, dl, div, pre, table, h1, h2, h3, h4, h5, h6, p {
   position: relative
}

video, img, object, svg, iframe {
   display: block;
}

ol, ul {
   list-style: none;
}

a, abbr {
   text-decoration: none;
   color: inherit;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

address {
   font-style: normal;
}

freshForms

Forms, output:
textarea, fieldset, input, button, select, legend {
   padding: 0;
   margin: 0;
   border: 0;
}

form, fieldset, input, textarea {
   box-sizing: border-box;
}

input, select, textarea, button, progress, meter {
   appearance: none;
}

select, button, input[type=button] ,[role=button] {
   cursor: pointer;
}

textarea {
   resize: none;
}

5. Samples (Functions)

value()

Lighten or Darken a Color
value($color, $amount)
$color
Color value
$amount
Number value. Positive numbers will lighten and negative numbers will darken.

rel()

Relative to 100%
rel($amount)
$amount
Number value. Positive numbers will be over 100% and negative numbers will be less.

ts()

True Shadow
ts($opacity)
$opacity
Number value (0-1).

hex()

Force-Convert to Hex Value
hex($color)
$color
Color value.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.