Skip to content

Instantly share code, notes, and snippets.

@cnocon

cnocon/usdish-utlity-classes.scss

Last active March 28, 2020 06:31
Show Gist options
  • Save cnocon/345c4529ae20b01dcf57 to your computer and use it in GitHub Desktop.
Save cnocon/345c4529ae20b01dcf57 to your computer and use it in GitHub Desktop.
Download ZIP
Utility Classes Example
Raw
usdish-utlity-classes.scss
@mixin adaptive-classes {
@content;
&--sm,
&--sm-only {
@include small { @content; }
}
&--sm-up {
@include small-up { @content; }
}
&--md,
&--md-only {
@include medium { @content; }
}
&--md-down {
@include medium-down { @content; }
}
&--md-up {
@include medium-up { @content; }
}
&--lg,
&--lg-only {
@include large-only { @content; }
}
&--lg-up {
@include large-up { @content; }
}
}
$dimensions: top, right, bottom, left;
$sizes: 0, 10, 15, 20, 30, 45, 60, 80;
$properties: padding, margin;
/*
*
Creates classes like:
padding-bottom-30--sm
margin-x-45
margin-60--md-up
*/
@each $prop in $properties {
@each $size in $sizes {
.#{$prop}-#{$size} {
@include adaptive-classes {
#{$prop}: #{$size}px;
}
}
.#{$prop}-x-#{$size} {
@include adaptive-classes {
#{$prop}-left: #{$size}px;
#{$prop}-right: #{$size}px;
}
}
.#{$prop}-y-#{$size} {
@include adaptive-classes {
#{$prop}-top: #{$size}px;
#{$prop}-bottom: #{$size}px;
}
}
@each $dim in $dimensions {
.#{$prop}-#{$dim}-#{$size} {
@include adaptive-classes {
#{$prop}-#{$dim}: #{$size}px;
}
}
}
}
}
/*
******* BEFORE: GUTTER UTILITIES W/ADAPTIVE SPACING MIXIN
.padding-x-60 { @include adaptive-spacing { padding-left: 60px; padding-right: 60px; } }
.padding-y-60 { @include adaptive-spacing { padding-top: 60px; padding-bottom: 60px; } }
.padding-60 { @include adaptive-spacing { padding: 60px; } }
.padding-x-45 { @include adaptive-spacing { padding-left: 45px; padding-right: 45px; } }
.padding-y-45 { @include adaptive-spacing { padding-top: 45px; padding-bottom: 45px; } }
.padding-45 { @include adaptive-spacing { padding: 45px; } }
.padding-x-30 { @include adaptive-spacing { padding-left: 30px; padding-right: 30px; } }
.padding-y-30 { @include adaptive-spacing { padding-top: 30px; padding-bottom: 30px; } }
.padding-30 { @include adaptive-spacing { padding: 30px; } }
.padding-x-15 { @include adaptive-spacing { padding-left: 15px; padding-right: 15px; } }
.padding-y-15 { @include adaptive-spacing { padding-top: 15px; padding-bottom: 15px; } }
.padding-15 { @include adaptive-spacing { padding: 15px; } }
.padding-x-0 { @include adaptive-spacing { padding-left: 0; padding-right: 0; } }
.padding-y-0 { @include adaptive-spacing { padding-top: 0; padding-bottom: 0; } }
.padding-0,
.no-padding { @include adaptive-spacing { padding: 0; } }
.padding-top-60 { @include adaptive-spacing { padding-top: 60px; } }
.padding-top-45 { @include adaptive-spacing { padding-top: 45px; } }
.padding-top-30 { @include adaptive-spacing { padding-top: 30px; } }
.padding-top-15 { @include adaptive-spacing { padding-top: 15px; } }
.padding-top-0 { @include adaptive-spacing { padding-top: 0; } }
.padding-right-60 { @include adaptive-spacing { padding-right: 60px; } }
.padding-right-45 { @include adaptive-spacing { padding-right: 45px; } }
.padding-right-30 { @include adaptive-spacing { padding-right: 30px; } }
.padding-right-15 { @include adaptive-spacing { padding-right: 15px; } }
.padding-right-0 { @include adaptive-spacing { padding-right: 0; } }
.padding-bottom-60 { @include adaptive-spacing { padding-bottom: 60px; } }
.padding-bottom-45 { @include adaptive-spacing { padding-bottom: 45px; } }
.padding-bottom-30 { @include adaptive-spacing { padding-bottom: 30px; } }
.padding-bottom-15 { @include adaptive-spacing { padding-bottom: 15px; } }
.padding-bottom-10 { @include adaptive-spacing { padding-bottom: 10px; } }
.padding-bottom-0 { @include adaptive-spacing { padding-bottom: 0; } }
.padding-left-60 { @include adaptive-spacing { padding-left: 60px; } }
.padding-left-45 { @include adaptive-spacing { padding-left: 45px; } }
.padding-left-30 { @include adaptive-spacing { padding-left: 30px; } }
.padding-left-15 { @include adaptive-spacing { padding-left: 15px; } }
.padding-left-0 { @include adaptive-spacing { padding-left: 0; } }
// // MARGIN UTILITIES
.margin-x-60 { @include adaptive-spacing { margin-left: 60px; margin-right: 60px; } }
.margin-y-60 { @include adaptive-spacing { margin-top: 60px; margin-bottom: 60px; } }
.margin-60 { @include adaptive-spacing { margin: 60px; } }
.margin-x-45 { @include adaptive-spacing { margin-left: 45px; margin-right: 45px; } }
.margin-y-45 { @include adaptive-spacing { margin-top: 45px; margin-bottom: 45px; } }
.margin-45 { @include adaptive-spacing { margin: 45px; } }
.margin-x-30 { @include adaptive-spacing { margin-left: 30px; margin-right: 30px; } }
.margin-y-30 { @include adaptive-spacing { margin-top: 30px; margin-bottom: 30px; } }
.margin-30 { @include adaptive-spacing { margin: 30px; } }
.margin-x-15 { @include adaptive-spacing { margin-left: 15px; margin-right: 15px; } }
.margin-y-15 { @include adaptive-spacing { margin-top: 15px; margin-bottom: 15px; } }
.margin-15 { @include adaptive-spacing { margin: 15px; } }
.margin-x-0 { @include adaptive-spacing { margin-left: 0; margin-right: 0; } }
.margin-y-0 { @include adaptive-spacing { margin-top: 0; margin-bottom: 0; } }
.margin-0,
.no-margin { @include adaptive-spacing { margin: 0; } }
.margin-top-60 { @include adaptive-spacing { margin-top: 60px; } }
.margin-top-45 { @include adaptive-spacing { margin-top: 45px; } }
.margin-top-30 { @include adaptive-spacing { margin-top: 30px; } }
.margin-top-15 { @include adaptive-spacing { margin-top: 15px; } }
.margin-top-0 { @include adaptive-spacing { margin-top: 0; } }
.margin-right-60 { @include adaptive-spacing { margin-right: 60px; } }
.margin-right-45 { @include adaptive-spacing { margin-right: 45px; } }
.margin-right-30 { @include adaptive-spacing { margin-right: 30px; } }
.margin-right-15 { @include adaptive-spacing { margin-right: 15px; } }
.margin-right-0 { @include adaptive-spacing { margin-right: 0; } }
.margin-bottom-60 { @include adaptive-spacing { margin-bottom: 60px; } }
.margin-bottom-45 { @include adaptive-spacing { margin-bottom: 45px; } }
.margin-bottom-30 { @include adaptive-spacing { margin-bottom: 30px; } }
.margin-bottom-15 { @include adaptive-spacing { margin-bottom: 15px; } }
.margin-bottom-0 { @include adaptive-spacing { margin-bottom: 0; } }
.margin-left-60 { @include adaptive-spacing { margin-left: 60px; } }
.margin-left-45 { @include adaptive-spacing { margin-left: 45px; } }
.margin-left-30 { @include adaptive-spacing { margin-left: 30px; } }
.margin-left-15 { @include adaptive-spacing { margin-left: 15px; } }
.margin-left-0 { @include adaptive-spacing { margin-left: 0; } }
*/
/*
******* BEFORE-BEFORE: NO MIXINS
.padding-60 { padding: 60px; }
.padding-15 { padding: 15px; }
.no-padding { padding: 0; }
.padding-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
.padding-x-15 { padding-left: 15px; padding-right: 15px; }
.padding-top-0 { padding-top: 0; }
.padding-top-15 {
padding-top: 15px;
&--sm {
@include small { padding-top: 15px;}
}
}
.padding-top-30 {
padding-top: 30px;
&--sm {
@include small { padding-top: 30px; }
}
}
.padding-top-60 {
padding-top: 60px;
&--sm {
@include small { padding-top: 60px; }
}
&--md-up {
@include medium-up { padding-top: 60px; }
}
&--lg {
@include large { padding-top: 60px; }
}
&--lg-up {
@include large-up { padding-top: 60px; }
}
}
.padding-bottom-0 { padding-bottom: 0; }
.padding-bottom-10 { padding-bottom: 10px; }
.padding-bottom-15 { padding-bottom: 15px; }
.padding-bottom-30 {padding-bottom: 30px; }
.padding-bottom-60 {
padding-bottom: 60px;
&--lg-up {
@include large-up { padding-top: 60px; }
}
}
.margin-0 {
margin: 0;
&--lg-up,
&--lg {
@include large-up { margin: 0; }
}
}
.margin-15 { margin: 15px; }
.margin-top-0 { margin-top: 0; }
.margin-top-15 { margin-top: 15px; }
.margin-top-30 { margin-top: 30px; }
.margin-top-60 { margin-top: 60px; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-30 {
margin-bottom: 30px;
&--sm {
@include small {
margin-bottom: 30;
}
}
}
.margin-bottom-60 {
margin-bottom: 60px;
&--md-up {
@include medium-up {
margin-bottom: 60;
}
}
}
.margin-left-0 { margin-left: 0; }
.no-margins { margin: 0; }
.margin-top-30-medium-up { @include medium-up { margin-top: 30px; } }
*/
@cnocon
Copy link
Author

cnocon commented Nov 24, 2015

Markup structure:

screen shot 2015-11-24 at 10 55 11 am

<td align="center" valign="top" width="100%">
  <table border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
      <td align="center" valign="top" width="600" height="30">
        <a href="http://ncsasports.org" style="color:#000000;">NCSA Athletic Recruiting</a> &bull; 1333 N Kingsbury St 4th Floor &bull; Chicago, IL 60642
      </td>
    </tr>
    <tr>
      <td align="center" valign="top" width="600" height="30">
        <a href="https://recruit-match.ncsasports.org/clientrms/unsubscribe?email==#{USER_EMAIL}">Unsubscribe</a>
      </td>
    </tr>
  </table>
</td>

@cnocon
Copy link
Author

cnocon commented Dec 7, 2015

screen shot 2015-12-07 at 10 45 09 am

<td align="center" valign="top" width="100%">
  <table border="0" cellspacing="0" cellpadding="0" width="600" class="vcard">
    <tr>
      <td align="center" valign="top" width="600" height="30">
        <a href="http://www.ncsasports.org" style="color:#000000;" class="org"><span>NCSA Athletic Recruiting</span></a> &bull;
        <a class="tel" href="tel:866-579-6272" style="color:#000000; text-decoration: none; border: none; outline: none;"><span>(866) 579-6272</span></a>
      </td>
    </tr>
    <tr>
       <td align="center" valign="top" width="600" height="30">
         <span class="street-address">1333 N Kingsbury St, 4th Floor</span>,&nbsp;<span class="locality">Chicago</span>,&nbsp;<span class="region">IL</span>&nbsp;<span class="area-code">60642</span>
      </td>
    </tr>
    <tr>
      <td align="center" valign="top" width="600" height="30">
        <a href="https://recruit-match.ncsasports.org/clientrms/unsubscribe?email==#{USER_EMAIL}" style="color:#000000;border: none; outline: none;"><span>Unsubscribe</span></a>
      </td>
    </tr>
  </table>
</td>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment