Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
155 lines (138 sloc) 3.61 KB

Resources

Documentation

Code

Skip to Content

Sass

#skip  {
  background: #f5f5f5;
  color: #222;
  a { 
    position:absolute;
    padding: 1em 0 1em 3em;
    line-height: 2em;
    left:-10000px; 
    top:auto; 
    width:1px; 
    height:1px; 
    overflow:hidden;
    color: #222;
    &:focus { 
      position:static; 
      width:auto; 
      height:auto; 
    } 
  }
}

HTML

<div id="skip">
  <a href="#content">Skip to Main Content</a>
  <a href="#sidebar">Skip to Side Bar</a> <!-- Good for when there is both a primary and secondary navigation -->
</div>

Hiding elements

Hides from visual users, but "viewable" to screen readers

CSS / Sass

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

Responsive / Mobile Friendly Table

Sass

table, tbody {
  @include respond-to(smallonly) {
    display: block;
    width: 100%;
    & thead, & tr, & th, & td {
      display: block;
      padding: 0;
      text-align: left;
      white-space: normal;
    }
  }
}

Column Scope to Tables

When there is no col header or col header is hidden in mobile

HTML

<thead> ... </thead>
<tbody>
   <tr class="visually-hidden">
      <th scope="col">Collection Thumbnail</th>
      <th scope="col">Title</th>
      <th scope="col">Formats</th>
      <th scope="col">Subjects</th>
   </tr>
   <tr> ... </tr>
   <tr> ... </tr>
   <tr> ... </tr>
   <tr> ... </tr>
</tbody>

Media Queries

KZ's breakpoints based on web stats of common devices used by patrons

Sass

Use as: @include respond-to(small) { ... } instead of @media (min-width: 768px) { ... }

Note: Found em to be more reliable/consistent over px

@mixin respond-to($breakpoint) {
  // Extra small devices (phones, 544px and up)
  @if $breakpoint == "xsmall" {
    @media (min-width: 34em) {
      @content;
    }
  }

  // Small devices (landscape phones, 768px and up)
  @else if $breakpoint == "small" {
    @media (min-width: 48em) {
      @content;
    }
  }
  // Medium devices (crappy laptops, tablets, 992px and up)
  @else if $breakpoint == "medium" {
    @media (min-width: 62em) {
      @content;
    }
  }
  // Large devices (desktops, 1200px and up)
  @else if $breakpoint == "large" {
    @media (min-width: 75em) {
      @content;
    }
  }

  //Extra large devices (large desktops, 1900px and up)
  @else if $breakpoint == "xlarge" {
    @media (min-width: 118em) {
      @content;
    }
  }
  
  // Short-cut to target extra small devices *only* (544px and below)
  @else if $breakpoint == "smallonly" {
    @media (max-width: 34em) {
      @content;
    }
  }

  // Short-cut to target extra small AND small devices *only* (768px and below)
  @else if $breakpoint == "mobileonly" {
    @media (max-width: 48em) {
      @content;
    }
  }
}
You can’t perform that action at this time.