Skip to content

Instantly share code, notes, and snippets.

@kuzyo

kuzyo/Styleguide.markdown

Last active September 14, 2017 08:53
Show Gist options
  • Save kuzyo/a4a647ebad6021de24c9830f9d1d0dc3 to your computer and use it in GitHub Desktop.
Save kuzyo/a4a647ebad6021de24c9830f9d1d0dc3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Styleguide.markdown

Styleguide

Buttons

Primary orange color buttons $new_orange: #f68b1f

 class="button button--new-orange"

new-orange

Transparent button with white border, on hover white bg and black text

 class="button button--transparent-white"

transparent-white

Transparent button with black border, on hover black bg and white text

 class="button button--transparent-dark"

transparent-back

Transparent button with orange border, on hover orange bg and white text

 class="button button--transparent-orange"

transparent-orange

CTA's

Prominent button inside full width section

 class="button cta"

cta

Person specific call to action

Athlete CTA $deep_water: #0f2b5b

 class="button button--athlete"

Parent CTA $new_orange: #f68b1f

 class="button button--parent"

cta

Hero call to action

To show buttons all the time (default behaviour hide them from on tablet on down)

 class="button hero-cta--mobile-show"

Old color buttons

Green $button_action_color: #74b04a

 class="button button--cta"

alias

 class="button button--primary"

green

Orange $color_secondary: #f49d18

 class="button button--secondary"

orange

Blue $color_tertiaty: #2797ba

 class="button button--tertiary"

blue

Specific

More reviews

  <button class="see-more-reviews"></button>

reviews

Size

Add aditional padding to make button wider

 class="button button--wide"

Typography

Blockquotes

Default blockquote styles

Paste here

Blockquote with $moss: #74b04a border and text inside

<blockquote class="blockquote-moss">
  <p>
    "Glad to be a part of it, Works for my club."
    - Nelson Gord, Coach
  </p>
</blockquote>

blockquote

Blockquote with image inside and higlighted $slate: #335687 text inside. Also we have separate class for blockquote author:

<blockquote class="blockquote-highlighted blockquote-img-in">
  <div class="blockquote-inner">
    <img src="/sites/www2.ncsasports.org/themes/sprint/images/Lisa-Strasman.jpg">
    <div class="blockquote-text">
      <p>“We created our annual NCSA College Power Rankings to help families find the best colleges around, based on both athletic competitiveness and academic excellence," said Lisa Strasman, NCSA President. "The NCSA College Power Rankings are just one small part of our overall efforts to help empower young leaders through sport, and helping them find the right match for their education.”
      <p class="blockquote-author"> - NCSA President Lisa Strasman</p>
    </div>
  </div>
</blockquote>

blockquote

Insider tip

<blockquote class="insider-tip">
  <p>
  <strong>Insider Tip:</strong> If you are enrolling early (common for elite level DI athletes playing in the fall) or have a unique situation coming out of junior college, your process could be slightly different than the one detailed above. In both of these scenarios, the college recruiting you will likely be in touch and providing assistance. The most important thing is that you have a Certification Account, it is up to date and all of your most recent academic records on are file with the NCAA.
  </p>
</blockquote>

tip

Text modifires

.text {
  &--narrow {
    font-family: $secondary-site-font;
  }

  &--color-primary {
    color: $color_primary;
  }

  &--color-secondary {
    color: $color_secondary;
  }

  &--color-tertiary {
    color: $color_tertiary;
  }

  &--color-success {
    color: $button_action_color;
  }

  &--color-error {
    color: $google_red;
  }

  &--color-youtube,
  &--color-gplus {
    color: $google_red;
  }

  &--color-fb {
    color: $facebook_blue;
  }

  &--color-twitter {
    color: $twitter_blue;
  }

  &--light {
    color: $color_primary_light;
  }

  &--lighter {
    color: $color_primary_lighter;
  }

  &--transparent {
    opacity: 0.75;
  }

  &--white {
    color: $white;
  }

  &--link-color {
    color: $default_link_color;
  }

  &--strong {
    font-weight: bold;
  }

  &--normal {
    font-weight: normal !important;
  }

  &--size-normal {
    font-size: $base-font-size !important;
  }

  &--size-small {
    font-size: $small-font-size;
  }

  &--size-large {
    font-size: ms(1);
    line-height: ms(2);
  }
  &--size-2x {
    font-size: $site-ratio * 100%;
  }

  &--align-left {
    text-align: left;
  }

  &--align-right {
    text-align: right;
  }

  &--center {
    text-align: center !important;
  }

  &--pointer {
    cursor: pointer;
  }

  &--overflow {
    @extend %ellipsis-overflow;
  }
}
Usage example
  class="text--center"

  class="text--strong"

  class="text--size-small"

Lists

Inline from table width but stucked on mobile

  class="list list--inline"

Inline from mobile width

  class="list list--mobile-inline"

Indented for 20px

  class="list list--indented"

Shfifted to right

  class="list list--shifted"

Spaced between list items

  class="list list--spaced"

Higligted with $deep_water: #0f2b5b color for strong elments inside list

  class="list list--highlighted"

Bulleted

  class="list list--bullet"

Layout

Adding margin or padding quickly on one-off elements

.mg-top-default {
  margin-top: 16px;
}

.mg-bottom-default {
  margin-bottom: 16px;
}

@for $i from 0 to 4 {

  .mg-top-#{$i} {
    margin-top: $baseline * $i !important;
  }

  .mg-btm-#{$i} {
    margin-bottom: $baseline * $i !important;
  }

  .mg-left-#{$i} {
    margin-left: $baseline * $i !important;
  }

  .mg-right-#{$i} {
    margin-right: $baseline * $i !important;
  }

  .pd-btm-#{$i} {
    padding-bottom: $baseline * $i !important;
  }

  .pd-top-#{$i} {
    padding-top: $baseline * $i !important;
  }

  .pd-left-#{$i} {
    padding-left: $baseline * $i !important;
  }

  .pd-right-#{$i} {
    padding-right: $baseline * $i !important;
  }
}
Usage example
  class="mg-top-1"

  class="pd-top-4"

Floating

  class="float-left"

  class="float-right"

Breakpoints

To show/hide element for specific screen width

  class="mobile-show"
  class="phablet-show"
  class="tablet-show"
  class="screen-show"
  class="desktop-show"

  class="mobile-hide"
  class="phablet-hide"
  class="tablet-hide"
  class="screen-hide"
  class="desktop-hide"

Content

Header

Header with logo and vertically centered telephon number we need to add this snippet to contact us block

  <div class="contact-us contact-us--aligned">
     <div class="chat">Questions? Call
        <span class="telephone">312-999-6176</span>
    </div>
  </div>

header

Video

   <div class="videoWrapper">
   <!-- Enhanced Vimeo Event Tracking Iframe Tag -->
     <iframe src="https://player.vimeo.com/video/188304844?api=1&player_id=vimeo-player-1" width="500" height="281" frameborder="0" data-progress="true" id="vimeo-player-1" data-seek="true" data-bounce="true" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
   </div>

video

Images

As default settings image takes full width of block(width: 100%).

Sized image class - takes 50% in tablet and become centered. To size it on screen put inside column. For example: class="column half" Use for such type of layout:

  class="img-sized"

image

Image with shadow

  class="img-shadow"

image

Sidebar

Artilce template

  <div class="cta-sidebar cta-sidebar--grey">
    <div class="cta-sidebar-title">
      Play Sports in College
    </div>
    <div class="cta-sidebar-description">
      <p>Build a free recruiting profile in the only network trusted by more than 35,000 active college coaches.</p>
    </div>
    <div class="cta-sidebar-action">
          <a href="" class="button button--parent">Parents Start Here</a>
          <a href="" class="button button--athlete">Athletes Start Here</a>
    </div>
  </div>

article

Edition template

  <div class="cta-sidebar cta-sidebar--grey cta-sidebar--edition">
    <div class="cta-sidebar-title cta-sidebar-title--highlight">Get Started</div>
      <div class="cta-sidebar-description">
        <p>Know which players are getting viewed and followed by coaches</p>
      </div>
    <div class="cta-sidebar-icon cta-sidebar-icon--edition"></div>
  </div>

edition

Popup

For popus we are using Magnific popup plugin. More

Basic styling and breakpoints - white background, with 20px padding inside.

  @include respond-to(tablet) {
    max-width: 500px;
  }

  @include respond-to(screen) {
    max-width: 700px;
  }

  @include respond-to(desktop) {
    max-width: 900px;
  }

popup

Jump Links

For quick links on page, js callback is applied on each link, to scroll to relative content

<div class="jump-links">
  <div class="jump-links-header">
    <h2 class="jump-links-title">Quick Links</h2>
  </div>
  <div class="jump-links-body">
    <div class="row">
      <div class="column half">
        <ul>
          <li><a href="#checklist">NCAA Eligibility Center Checklist </a></li>
          <li><a href="#resources">Links to Important Resources</a></li>
          <li><a href="#account">What type of NCAA account do you need?</a></li>
          <li><a href="#purpose">What is the Eligibility Center for?</a></li>
          <li><a href="#register">How to register</a></li>
        </ul>
      </div>
      <div class="column half">
        <ul>
          <li><a href="#ncaa-id">How to get an NCAA ID number </a></li>
          <li><a href="#requirements">Eligibility Requirements</a></li>
          <li><a href="#process">How long does the process take?</a></li>
          <li><a href="#contact">NCAA Phone Number &amp; Address</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

jump-links

Responsive Google map

<div class="iframeWrapper mg-btm-1 column half">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2969.3889849374827!2d-87.65166804812465!3d41.90599597911806!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fd325477515c1%3A0xc3a95c4c3db932d3!2sNCSA%2C+Next+College+Student+Athlete!5e0!3m2!1sen!2sus!4v1501191435145" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>

map

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