mikemai2awesome

// Simple Breakpoints Demo: https://codepen.io/mikemai2awesome/full/MXvzYO/

/*------------------------------------*\
  Map Get Deep
\*------------------------------------*/
@function map-get-deep($map, $keys...) {
  @if length($keys) == 1 {
    $keys: nth($keys, 1);
  }
  $warn: '#{nth($keys, 1)}';

mikemai2awesome

What

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.

Why

• Clarity for search engines (improve search ranking)
• Clarity for visitors (improve accessibility)
• Default browser styles make for good fall-back when CSS isn't working (improve user experience)

mikemai2awesome

body
{
  color:$body-text-color;
  line-height: 1.4em;
  font-size: 1em;
  
  article
  {
    /* text and media */
    p,

mikemai2awesome

<!-- Mobile view styles -->
<meta name="HandheldFriendly" content="True"> 
<meta name="MobileOptimized" content="320"/> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
<meta http-equiv="cleartype" content="on">

<!-- Thumbnail image for social media posting -->
<link rel="image_src" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-icon.png"/>

<!-- Touch icons -->