snipt

Ctrl+h for KB shortcuts

SCSS

Grid, based on CSSWizardry

/*------------------------------------*\
    $CSSWIZARDRY-GRIDS
\*------------------------------------*/
/**
 * CONTENTS
 * VARIABLES............Your settings.
 * BREAKPOINTS..........Defining the breakpoints.
 * GRID SETUP...........Build the grid structure.
 * WIDTHS...............Build our responsive widths around our breakpoints.
 *
 * READ MORE: http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/
 */





/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * Set the spacing between your grid items.
 */
$grid-gutter : 24px;


/**
 * Would you like Sass’s silent classes, or regular CSS classes?
 */
$grid-use-silent-classes : false;


/*------------------------------------*\
    $BREAKPOINTS
\*------------------------------------*/
/**
 * palm:        Handhelds.
 * lap:         Not handheld, but often resting in your lap type of devices.
 * portable:    Both of the above.
 * desk:        Stationary devices.
 * stationary:  High-resolution stationary devices.
 */
$grid-palm-end         : 500px;
$grid-lap-start        : $grid-palm-end + 1px;
$grid-lap-end          : 1024px;
$grid-desk-start       : $grid-lap-end + 1px;
$grid-desk-end         : 1600px;
$grid-stationary-start : $grid-desk-end + 1px;

/**
 * Do not edit the following variables.
 */
$grid-class-type: unquote('.');

@if $grid-use-silent-classes == true{
    $grid-class-type: unquote('%');
}


/*------------------------------------*\
    $GRID SETUP
\*------------------------------------*/
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
 * 4. Remove whitespace caused by `inline-block` elements.
 */
#{$grid-class-type}grid {
    list-style:none;                /* [1] */
    margin:0;                       /* [2] */
    padding:0;                      /* [2] */
    margin-left:-$grid-gutter;      /* [3] */
    letter-spacing:-0.31em;         /* [4] */
    word-spacing:-0.43em;           /* [4] */
}


/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Reinstate removed whitespace.
 */
#{$grid-class-type}grid__item {
    display:inline-block;           /* [1] */
    padding-left:$grid-gutter;      /* [2] */
    vertical-align:top;             /* [3] */
    letter-spacing:normal;          /* [4] */
    word-spacing:normal;            /* [4] */
}

#{$grid-class-type}grid__item-in-gutter {
    margin-left: -$grid-gutter;
}

/**
 * Create our widths, prefixed by the specified namespace.
 */
@mixin device-type($namespace:''){

    /**
     * Whole
     */
    #{$grid-class-type}#{$namespace}one-whole         { width:100%; }

    /**
     * Halves
     */
    #{$grid-class-type}#{$namespace}one-half          { width:50%; }

    /**
     * Thirds
     */
    #{$grid-class-type}#{$namespace}one-third         { width:33.333%; }
    #{$grid-class-type}#{$namespace}two-thirds        { width:66.666%; }

    /**
     * Quarters
     */
    #{$grid-class-type}#{$namespace}one-quarter       { width:25%; }
    #{$grid-class-type}#{$namespace}two-quarters      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}three-quarters    { width:75%; }

    /**
     * Fifths
     */
    #{$grid-class-type}#{$namespace}one-fifth         { width:20%; }
    #{$grid-class-type}#{$namespace}two-fifths        { width:40%; }
    #{$grid-class-type}#{$namespace}three-fifths      { width:60%; }
    #{$grid-class-type}#{$namespace}four-fifths       { width:80%; }

    /**
     * Sixths
     */
    #{$grid-class-type}#{$namespace}one-sixth         { width:16.666%; }
    #{$grid-class-type}#{$namespace}two-sixths        { @extend #{$grid-class-type}#{$namespace}one-third; }
    #{$grid-class-type}#{$namespace}three-sixths      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}four-sixths       { @extend #{$grid-class-type}#{$namespace}two-thirds; }
    #{$grid-class-type}#{$namespace}five-sixths       { width:83.333%; }

    /**
     * Eighths
     */
    #{$grid-class-type}#{$namespace}one-eighth        { width:12.5%; }
    #{$grid-class-type}#{$namespace}two-eighths       { @extend #{$grid-class-type}#{$namespace}one-quarter; }
    #{$grid-class-type}#{$namespace}three-eighths     { width:37.5%; }
    #{$grid-class-type}#{$namespace}four-eighths      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}five-eighths      { width:62.5%; }
    #{$grid-class-type}#{$namespace}six-eighths       { @extend #{$grid-class-type}#{$namespace}three-quarters; }
    #{$grid-class-type}#{$namespace}seven-eighths     { width:87.5%; }

    /**
     * Tenths
     */
    #{$grid-class-type}#{$namespace}one-tenth         { width:10%; }
    #{$grid-class-type}#{$namespace}two-tenths        { @extend #{$grid-class-type}#{$namespace}one-fifth; }
    #{$grid-class-type}#{$namespace}three-tenths      { width:30%; }
    #{$grid-class-type}#{$namespace}four-tenths       { @extend #{$grid-class-type}#{$namespace}two-fifths; }
    #{$grid-class-type}#{$namespace}five-tenths       { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}six-tenths        { @extend #{$grid-class-type}#{$namespace}three-fifths; }
    #{$grid-class-type}#{$namespace}seven-tenths      { width:70%; }
    #{$grid-class-type}#{$namespace}eight-tenths      { @extend #{$grid-class-type}#{$namespace}four-fifths; }
    #{$grid-class-type}#{$namespace}nine-tenths       { width:90%; }

    /**
     * Twelfths
     */
    #{$grid-class-type}#{$namespace}one-twelfth       { width:8.333%; }
    #{$grid-class-type}#{$namespace}two-twelfths      { @extend #{$grid-class-type}#{$namespace}one-sixth; }
    #{$grid-class-type}#{$namespace}three-twelfths    { @extend #{$grid-class-type}#{$namespace}one-quarter; }
    #{$grid-class-type}#{$namespace}four-twelfths     { @extend #{$grid-class-type}#{$namespace}one-third; }
    #{$grid-class-type}#{$namespace}five-twelfths     { width:41.666% }
    #{$grid-class-type}#{$namespace}six-twelfths      { @extend #{$grid-class-type}#{$namespace}one-half; }
    #{$grid-class-type}#{$namespace}seven-twelfths    { width:58.333%; }
    #{$grid-class-type}#{$namespace}eight-twelfths    { @extend #{$grid-class-type}#{$namespace}two-thirds; }
    #{$grid-class-type}#{$namespace}nine-twelfths     { @extend #{$grid-class-type}#{$namespace}three-quarters; }
    #{$grid-class-type}#{$namespace}ten-twelfths      { @extend #{$grid-class-type}#{$namespace}five-sixths; }
    #{$grid-class-type}#{$namespace}eleven-twelfths   { width:91.666%; }

}

/**
 * Our regular, non-responsive width classes.
 */
@include device-type();

/**
 * Our breakpoint specific widths classes.
 */
@media only screen and (max-width: $grid-palm-end) {
    @include device-type('palm-');
}

@media only screen and (min-width: $grid-lap-start) and (max-width: $grid-lap-end) {
    @include device-type('lap-');
}

@media only screen and (max-width: $grid-lap-end) {
    @include device-type('portable-');
}

@media only screen and (min-width: $grid-desk-start) and (max-width: $grid-desk-end) {
    @include device-type('desk-');
}

@media only screen and (min-width: $grid-stationary-start) {
    @include device-type('stationary-');
}
https://snipt.net/embed/80146957ff9e20fb1edcf9cbd7413e3f/
/raw/80146957ff9e20fb1edcf9cbd7413e3f/
80146957ff9e20fb1edcf9cbd7413e3f
scss
SCSS
210
2019-07-16T05:59:46
True
False
False
Feb 14, 2013 at 09:01 AM
/api/public/snipt/55750/
grid-based-on-csswizardry
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10"> 10</a> <a href="#L-11"> 11</a> <a href="#L-12"> 12</a> <a href="#L-13"> 13</a> <a href="#L-14"> 14</a> <a href="#L-15"> 15</a> <a href="#L-16"> 16</a> <a href="#L-17"> 17</a> <a href="#L-18"> 18</a> <a href="#L-19"> 19</a> <a href="#L-20"> 20</a> <a href="#L-21"> 21</a> <a href="#L-22"> 22</a> <a href="#L-23"> 23</a> <a href="#L-24"> 24</a> <a href="#L-25"> 25</a> <a href="#L-26"> 26</a> <a href="#L-27"> 27</a> <a href="#L-28"> 28</a> <a href="#L-29"> 29</a> <a href="#L-30"> 30</a> <a href="#L-31"> 31</a> <a href="#L-32"> 32</a> <a href="#L-33"> 33</a> <a href="#L-34"> 34</a> <a href="#L-35"> 35</a> <a href="#L-36"> 36</a> <a href="#L-37"> 37</a> <a href="#L-38"> 38</a> <a href="#L-39"> 39</a> <a href="#L-40"> 40</a> <a href="#L-41"> 41</a> <a href="#L-42"> 42</a> <a href="#L-43"> 43</a> <a href="#L-44"> 44</a> <a href="#L-45"> 45</a> <a href="#L-46"> 46</a> <a href="#L-47"> 47</a> <a href="#L-48"> 48</a> <a href="#L-49"> 49</a> <a href="#L-50"> 50</a> <a href="#L-51"> 51</a> <a href="#L-52"> 52</a> <a href="#L-53"> 53</a> <a href="#L-54"> 54</a> <a href="#L-55"> 55</a> <a href="#L-56"> 56</a> <a href="#L-57"> 57</a> <a href="#L-58"> 58</a> <a href="#L-59"> 59</a> <a href="#L-60"> 60</a> <a href="#L-61"> 61</a> <a href="#L-62"> 62</a> <a href="#L-63"> 63</a> <a href="#L-64"> 64</a> <a href="#L-65"> 65</a> <a href="#L-66"> 66</a> <a href="#L-67"> 67</a> <a href="#L-68"> 68</a> <a href="#L-69"> 69</a> <a href="#L-70"> 70</a> <a href="#L-71"> 71</a> <a href="#L-72"> 72</a> <a href="#L-73"> 73</a> <a href="#L-74"> 74</a> <a href="#L-75"> 75</a> <a href="#L-76"> 76</a> <a href="#L-77"> 77</a> <a href="#L-78"> 78</a> <a href="#L-79"> 79</a> <a href="#L-80"> 80</a> <a href="#L-81"> 81</a> <a href="#L-82"> 82</a> <a href="#L-83"> 83</a> <a href="#L-84"> 84</a> <a href="#L-85"> 85</a> <a href="#L-86"> 86</a> <a href="#L-87"> 87</a> <a href="#L-88"> 88</a> <a href="#L-89"> 89</a> <a href="#L-90"> 90</a> <a href="#L-91"> 91</a> <a href="#L-92"> 92</a> <a href="#L-93"> 93</a> <a href="#L-94"> 94</a> <a href="#L-95"> 95</a> <a href="#L-96"> 96</a> <a href="#L-97"> 97</a> <a href="#L-98"> 98</a> <a href="#L-99"> 99</a> <a href="#L-100">100</a> <a href="#L-101">101</a> <a href="#L-102">102</a> <a href="#L-103">103</a> <a href="#L-104">104</a> <a href="#L-105">105</a> <a href="#L-106">106</a> <a href="#L-107">107</a> <a href="#L-108">108</a> <a href="#L-109">109</a> <a href="#L-110">110</a> <a href="#L-111">111</a> <a href="#L-112">112</a> <a href="#L-113">113</a> <a href="#L-114">114</a> <a href="#L-115">115</a> <a href="#L-116">116</a> <a href="#L-117">117</a> <a href="#L-118">118</a> <a href="#L-119">119</a> <a href="#L-120">120</a> <a href="#L-121">121</a> <a href="#L-122">122</a> <a href="#L-123">123</a> <a href="#L-124">124</a> <a href="#L-125">125</a> <a href="#L-126">126</a> <a href="#L-127">127</a> <a href="#L-128">128</a> <a href="#L-129">129</a> <a href="#L-130">130</a> <a href="#L-131">131</a> <a href="#L-132">132</a> <a href="#L-133">133</a> <a href="#L-134">134</a> <a href="#L-135">135</a> <a href="#L-136">136</a> <a href="#L-137">137</a> <a href="#L-138">138</a> <a href="#L-139">139</a> <a href="#L-140">140</a> <a href="#L-141">141</a> <a href="#L-142">142</a> <a href="#L-143">143</a> <a href="#L-144">144</a> <a href="#L-145">145</a> <a href="#L-146">146</a> <a href="#L-147">147</a> <a href="#L-148">148</a> <a href="#L-149">149</a> <a href="#L-150">150</a> <a href="#L-151">151</a> <a href="#L-152">152</a> <a href="#L-153">153</a> <a href="#L-154">154</a> <a href="#L-155">155</a> <a href="#L-156">156</a> <a href="#L-157">157</a> <a href="#L-158">158</a> <a href="#L-159">159</a> <a href="#L-160">160</a> <a href="#L-161">161</a> <a href="#L-162">162</a> <a href="#L-163">163</a> <a href="#L-164">164</a> <a href="#L-165">165</a> <a href="#L-166">166</a> <a href="#L-167">167</a> <a href="#L-168">168</a> <a href="#L-169">169</a> <a href="#L-170">170</a> <a href="#L-171">171</a> <a href="#L-172">172</a> <a href="#L-173">173</a> <a href="#L-174">174</a> <a href="#L-175">175</a> <a href="#L-176">176</a> <a href="#L-177">177</a> <a href="#L-178">178</a> <a href="#L-179">179</a> <a href="#L-180">180</a> <a href="#L-181">181</a> <a href="#L-182">182</a> <a href="#L-183">183</a> <a href="#L-184">184</a> <a href="#L-185">185</a> <a href="#L-186">186</a> <a href="#L-187">187</a> <a href="#L-188">188</a> <a href="#L-189">189</a> <a href="#L-190">190</a> <a href="#L-191">191</a> <a href="#L-192">192</a> <a href="#L-193">193</a> <a href="#L-194">194</a> <a href="#L-195">195</a> <a href="#L-196">196</a> <a href="#L-197">197</a> <a href="#L-198">198</a> <a href="#L-199">199</a> <a href="#L-200">200</a> <a href="#L-201">201</a> <a href="#L-202">202</a> <a href="#L-203">203</a> <a href="#L-204">204</a> <a href="#L-205">205</a> <a href="#L-206">206</a> <a href="#L-207">207</a> <a href="#L-208">208</a> <a href="#L-209">209</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="cm">/*------------------------------------*\</span> </span><span id="L-2"><a name="L-2"></a><span class="cm"> $CSSWIZARDRY-GRIDS</span> </span><span id="L-3"><a name="L-3"></a><span class="cm">\*------------------------------------*/</span> </span><span id="L-4"><a name="L-4"></a><span class="cm">/**</span> </span><span id="L-5"><a name="L-5"></a><span class="cm"> * CONTENTS</span> </span><span id="L-6"><a name="L-6"></a><span class="cm"> * VARIABLES............Your settings.</span> </span><span id="L-7"><a name="L-7"></a><span class="cm"> * BREAKPOINTS..........Defining the breakpoints.</span> </span><span id="L-8"><a name="L-8"></a><span class="cm"> * GRID SETUP...........Build the grid structure.</span> </span><span id="L-9"><a name="L-9"></a><span class="cm"> * WIDTHS...............Build our responsive widths around our breakpoints.</span> </span><span id="L-10"><a name="L-10"></a><span class="cm"> *</span> </span><span id="L-11"><a name="L-11"></a><span class="cm"> * READ MORE: http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/</span> </span><span id="L-12"><a name="L-12"></a><span class="cm"> */</span> </span><span id="L-13"><a name="L-13"></a> </span><span id="L-14"><a name="L-14"></a> </span><span id="L-15"><a name="L-15"></a> </span><span id="L-16"><a name="L-16"></a> </span><span id="L-17"><a name="L-17"></a> </span><span id="L-18"><a name="L-18"></a><span class="cm">/*------------------------------------*\</span> </span><span id="L-19"><a name="L-19"></a><span class="cm"> $VARIABLES</span> </span><span id="L-20"><a name="L-20"></a><span class="cm">\*------------------------------------*/</span> </span><span id="L-21"><a name="L-21"></a><span class="cm">/**</span> </span><span id="L-22"><a name="L-22"></a><span class="cm"> * Set the spacing between your grid items.</span> </span><span id="L-23"><a name="L-23"></a><span class="cm"> */</span> </span><span id="L-24"><a name="L-24"></a><span class="nv">$grid-gutter</span><span class="o"> :</span> <span class="mi">24</span><span class="kt">px</span><span class="p">;</span> </span><span id="L-25"><a name="L-25"></a> </span><span id="L-26"><a name="L-26"></a> </span><span id="L-27"><a name="L-27"></a><span class="cm">/**</span> </span><span id="L-28"><a name="L-28"></a><span class="cm"> * Would you like Sass’s silent classes, or regular CSS classes?</span> </span><span id="L-29"><a name="L-29"></a><span class="cm"> */</span> </span><span id="L-30"><a name="L-30"></a><span class="nv">$grid-use-silent-classes</span><span class="o"> :</span> <span class="n n-Pseudo">false</span><span class="p">;</span> </span><span id="L-31"><a name="L-31"></a> </span><span id="L-32"><a name="L-32"></a> </span><span id="L-33"><a name="L-33"></a><span class="cm">/*------------------------------------*\</span> </span><span id="L-34"><a name="L-34"></a><span class="cm"> $BREAKPOINTS</span> </span><span id="L-35"><a name="L-35"></a><span class="cm">\*------------------------------------*/</span> </span><span id="L-36"><a name="L-36"></a><span class="cm">/**</span> </span><span id="L-37"><a name="L-37"></a><span class="cm"> * palm: Handhelds.</span> </span><span id="L-38"><a name="L-38"></a><span class="cm"> * lap: Not handheld, but often resting in your lap type of devices.</span> </span><span id="L-39"><a name="L-39"></a><span class="cm"> * portable: Both of the above.</span> </span><span id="L-40"><a name="L-40"></a><span class="cm"> * desk: Stationary devices.</span> </span><span id="L-41"><a name="L-41"></a><span class="cm"> * stationary: High-resolution stationary devices.</span> </span><span id="L-42"><a name="L-42"></a><span class="cm"> */</span> </span><span id="L-43"><a name="L-43"></a><span class="nv">$grid-palm-end</span><span class="o"> :</span> <span class="mi">500</span><span class="kt">px</span><span class="p">;</span> </span><span id="L-44"><a name="L-44"></a><span class="nv">$grid-lap-start</span><span class="o"> :</span> <span class="nv">$grid-palm-end</span> <span class="o">+</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span> </span><span id="L-45"><a name="L-45"></a><span class="nv">$grid-lap-end</span><span class="o"> :</span> <span class="mi">1024</span><span class="kt">px</span><span class="p">;</span> </span><span id="L-46"><a name="L-46"></a><span class="nv">$grid-desk-start</span><span class="o"> :</span> <span class="nv">$grid-lap-end</span> <span class="o">+</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span> </span><span id="L-47"><a name="L-47"></a><span class="nv">$grid-desk-end</span><span class="o"> :</span> <span class="mi">1600</span><span class="kt">px</span><span class="p">;</span> </span><span id="L-48"><a name="L-48"></a><span class="nv">$grid-stationary-start</span><span class="o"> :</span> <span class="nv">$grid-desk-end</span> <span class="o">+</span> <span class="mi">1</span><span class="kt">px</span><span class="p">;</span> </span><span id="L-49"><a name="L-49"></a> </span><span id="L-50"><a name="L-50"></a><span class="cm">/**</span> </span><span id="L-51"><a name="L-51"></a><span class="cm"> * Do not edit the following variables.</span> </span><span id="L-52"><a name="L-52"></a><span class="cm"> */</span> </span><span id="L-53"><a name="L-53"></a><span class="nv">$grid-class-type</span><span class="o">:</span> <span class="nf">unquote</span><span class="p">(</span><span class="s1">&#39;</span><span class="s2">.&#39;</span><span class="p">);</span> </span><span id="L-54"><a name="L-54"></a> </span><span id="L-55"><a name="L-55"></a><span class="k">@if</span> <span class="nv">$grid-use-silent-classes</span> <span class="o">==</span> <span class="n n-Pseudo">true</span><span class="p">{</span> </span><span id="L-56"><a name="L-56"></a> <span class="nv">$grid-class-type</span><span class="o">:</span> <span class="nf">unquote</span><span class="p">(</span><span class="s1">&#39;</span><span class="s2">%&#39;</span><span class="p">);</span> </span><span id="L-57"><a name="L-57"></a><span class="p">}</span> </span><span id="L-58"><a name="L-58"></a> </span><span id="L-59"><a name="L-59"></a> </span><span id="L-60"><a name="L-60"></a><span class="cm">/*------------------------------------*\</span> </span><span id="L-61"><a name="L-61"></a><span class="cm"> $GRID SETUP</span> </span><span id="L-62"><a name="L-62"></a><span class="cm">\*------------------------------------*/</span> </span><span id="L-63"><a name="L-63"></a><span class="cm">/**</span> </span><span id="L-64"><a name="L-64"></a><span class="cm"> * 1. Allow the grid system to be used on lists.</span> </span><span id="L-65"><a name="L-65"></a><span class="cm"> * 2. Remove any margins and paddings that might affect the grid system.</span> </span><span id="L-66"><a name="L-66"></a><span class="cm"> * 3. Apply a negative `margin-left` to negate the columns’ gutters.</span> </span><span id="L-67"><a name="L-67"></a><span class="cm"> * 4. Remove whitespace caused by `inline-block` elements.</span> </span><span id="L-68"><a name="L-68"></a><span class="cm"> */</span> </span><span id="L-69"><a name="L-69"></a><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nt">grid</span> <span class="p">{</span> </span><span id="L-70"><a name="L-70"></a> <span class="nt">list-style</span><span class="nd">:none</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">1</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-71"><a name="L-71"></a> <span class="nt">margin</span><span class="nd">:0</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">2</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-72"><a name="L-72"></a> <span class="nt">padding</span><span class="nd">:0</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">2</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-73"><a name="L-73"></a> <span class="nt">margin-left</span><span class="nd">:-</span><span class="err">$</span><span class="nt">grid-gutter</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">3</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-74"><a name="L-74"></a> <span class="nt">letter-spacing</span><span class="nd">:-0</span><span class="nc">.31em</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">4</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-75"><a name="L-75"></a> <span class="nt">word-spacing</span><span class="nd">:-0</span><span class="nc">.43em</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">4</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-76"><a name="L-76"></a><span class="p">}</span> </span><span id="L-77"><a name="L-77"></a> </span><span id="L-78"><a name="L-78"></a> </span><span id="L-79"><a name="L-79"></a><span class="cm">/**</span> </span><span id="L-80"><a name="L-80"></a><span class="cm"> * 1. Cause columns to stack side-by-side.</span> </span><span id="L-81"><a name="L-81"></a><span class="cm"> * 2. Space columns apart.</span> </span><span id="L-82"><a name="L-82"></a><span class="cm"> * 3. Align columns to the tops of each other.</span> </span><span id="L-83"><a name="L-83"></a><span class="cm"> * 4. Reinstate removed whitespace.</span> </span><span id="L-84"><a name="L-84"></a><span class="cm"> */</span> </span><span id="L-85"><a name="L-85"></a><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nt">grid__item</span> <span class="p">{</span> </span><span id="L-86"><a name="L-86"></a> <span class="nt">display</span><span class="nd">:inline-block</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">1</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-87"><a name="L-87"></a> <span class="nt">padding-left</span><span class="nd">:</span><span class="err">$</span><span class="nt">grid-gutter</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">2</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-88"><a name="L-88"></a> <span class="nt">vertical-align</span><span class="nd">:top</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">3</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-89"><a name="L-89"></a> <span class="nt">letter-spacing</span><span class="nd">:normal</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">4</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-90"><a name="L-90"></a> <span class="nt">word-spacing</span><span class="nd">:normal</span><span class="o">;</span> <span class="o">/*</span> <span class="o">[</span><span class="nt">4</span><span class="o">]</span> <span class="o">*/</span> </span><span id="L-91"><a name="L-91"></a><span class="p">}</span> </span><span id="L-92"><a name="L-92"></a> </span><span id="L-93"><a name="L-93"></a><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nt">grid__item-in-gutter</span> <span class="p">{</span> </span><span id="L-94"><a name="L-94"></a> <span class="nt">margin-left</span><span class="nd">:</span> <span class="nt">-</span><span class="err">$</span><span class="nt">grid-gutter</span><span class="o">;</span> </span><span id="L-95"><a name="L-95"></a><span class="p">}</span> </span><span id="L-96"><a name="L-96"></a> </span><span id="L-97"><a name="L-97"></a><span class="cm">/**</span> </span><span id="L-98"><a name="L-98"></a><span class="cm"> * Create our widths, prefixed by the specified namespace.</span> </span><span id="L-99"><a name="L-99"></a><span class="cm"> */</span> </span><span id="L-100"><a name="L-100"></a><span class="k">@mixin</span><span class="nf"> device-type</span><span class="p">(</span><span class="nv">$namespace</span><span class="o">:</span><span class="s1">&#39;</span><span class="s2">&#39;</span><span class="p">){</span> </span><span id="L-101"><a name="L-101"></a> </span><span id="L-102"><a name="L-102"></a> <span class="cm">/**</span> </span><span id="L-103"><a name="L-103"></a><span class="cm"> * Whole</span> </span><span id="L-104"><a name="L-104"></a><span class="cm"> */</span> </span><span id="L-105"><a name="L-105"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-whole</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:100</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-106"><a name="L-106"></a> </span><span id="L-107"><a name="L-107"></a> <span class="cm">/**</span> </span><span id="L-108"><a name="L-108"></a><span class="cm"> * Halves</span> </span><span id="L-109"><a name="L-109"></a><span class="cm"> */</span> </span><span id="L-110"><a name="L-110"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-half</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:50</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-111"><a name="L-111"></a> </span><span id="L-112"><a name="L-112"></a> <span class="cm">/**</span> </span><span id="L-113"><a name="L-113"></a><span class="cm"> * Thirds</span> </span><span id="L-114"><a name="L-114"></a><span class="cm"> */</span> </span><span id="L-115"><a name="L-115"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-third</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:33</span><span class="nc">.333</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-116"><a name="L-116"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-thirds</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:66</span><span class="nc">.666</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-117"><a name="L-117"></a> </span><span id="L-118"><a name="L-118"></a> <span class="cm">/**</span> </span><span id="L-119"><a name="L-119"></a><span class="cm"> * Quarters</span> </span><span id="L-120"><a name="L-120"></a><span class="cm"> */</span> </span><span id="L-121"><a name="L-121"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-quarter</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:25</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-122"><a name="L-122"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-quarters</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-half</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-123"><a name="L-123"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-quarters</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:75</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-124"><a name="L-124"></a> </span><span id="L-125"><a name="L-125"></a> <span class="cm">/**</span> </span><span id="L-126"><a name="L-126"></a><span class="cm"> * Fifths</span> </span><span id="L-127"><a name="L-127"></a><span class="cm"> */</span> </span><span id="L-128"><a name="L-128"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-fifth</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:20</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-129"><a name="L-129"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-fifths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:40</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-130"><a name="L-130"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-fifths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:60</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-131"><a name="L-131"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">four-fifths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:80</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-132"><a name="L-132"></a> </span><span id="L-133"><a name="L-133"></a> <span class="cm">/**</span> </span><span id="L-134"><a name="L-134"></a><span class="cm"> * Sixths</span> </span><span id="L-135"><a name="L-135"></a><span class="cm"> */</span> </span><span id="L-136"><a name="L-136"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-sixth</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:16</span><span class="nc">.666</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-137"><a name="L-137"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-sixths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-third</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-138"><a name="L-138"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-sixths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-half</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-139"><a name="L-139"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">four-sixths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-thirds</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-140"><a name="L-140"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">five-sixths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:83</span><span class="nc">.333</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-141"><a name="L-141"></a> </span><span id="L-142"><a name="L-142"></a> <span class="cm">/**</span> </span><span id="L-143"><a name="L-143"></a><span class="cm"> * Eighths</span> </span><span id="L-144"><a name="L-144"></a><span class="cm"> */</span> </span><span id="L-145"><a name="L-145"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-eighth</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:12</span><span class="nc">.5</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-146"><a name="L-146"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-eighths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-quarter</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-147"><a name="L-147"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-eighths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:37</span><span class="nc">.5</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-148"><a name="L-148"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">four-eighths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-half</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-149"><a name="L-149"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">five-eighths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:62</span><span class="nc">.5</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-150"><a name="L-150"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">six-eighths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-quarters</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-151"><a name="L-151"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">seven-eighths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:87</span><span class="nc">.5</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-152"><a name="L-152"></a> </span><span id="L-153"><a name="L-153"></a> <span class="cm">/**</span> </span><span id="L-154"><a name="L-154"></a><span class="cm"> * Tenths</span> </span><span id="L-155"><a name="L-155"></a><span class="cm"> */</span> </span><span id="L-156"><a name="L-156"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-tenth</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:10</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-157"><a name="L-157"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-tenths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-fifth</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-158"><a name="L-158"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-tenths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:30</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-159"><a name="L-159"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">four-tenths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-fifths</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-160"><a name="L-160"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">five-tenths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-half</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-161"><a name="L-161"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">six-tenths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-fifths</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-162"><a name="L-162"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">seven-tenths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:70</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-163"><a name="L-163"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">eight-tenths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">four-fifths</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-164"><a name="L-164"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">nine-tenths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:90</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-165"><a name="L-165"></a> </span><span id="L-166"><a name="L-166"></a> <span class="cm">/**</span> </span><span id="L-167"><a name="L-167"></a><span class="cm"> * Twelfths</span> </span><span id="L-168"><a name="L-168"></a><span class="cm"> */</span> </span><span id="L-169"><a name="L-169"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-twelfth</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:8</span><span class="nc">.333</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-170"><a name="L-170"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-twelfths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-sixth</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-171"><a name="L-171"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-twelfths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-quarter</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-172"><a name="L-172"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">four-twelfths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-third</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-173"><a name="L-173"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">five-twelfths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:41</span><span class="nc">.666</span><span class="err">%</span> <span class="p">}</span> </span><span id="L-174"><a name="L-174"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">six-twelfths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">one-half</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-175"><a name="L-175"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">seven-twelfths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:58</span><span class="nc">.333</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-176"><a name="L-176"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">eight-twelfths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">two-thirds</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-177"><a name="L-177"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">nine-twelfths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">three-quarters</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-178"><a name="L-178"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">ten-twelfths</span> <span class="p">{</span> <span class="k">@extend</span> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">five-sixths</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-179"><a name="L-179"></a> <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">grid-class-type</span><span class="p">}</span><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">namespace</span><span class="p">}</span><span class="nt">eleven-twelfths</span> <span class="p">{</span> <span class="nt">width</span><span class="nd">:91</span><span class="nc">.666</span><span class="err">%</span><span class="o">;</span> <span class="p">}</span> </span><span id="L-180"><a name="L-180"></a> </span><span id="L-181"><a name="L-181"></a><span class="p">}</span> </span><span id="L-182"><a name="L-182"></a> </span><span id="L-183"><a name="L-183"></a><span class="cm">/**</span> </span><span id="L-184"><a name="L-184"></a><span class="cm"> * Our regular, non-responsive width classes.</span> </span><span id="L-185"><a name="L-185"></a><span class="cm"> */</span> </span><span id="L-186"><a name="L-186"></a><span class="k">@include</span><span class="nd"> device-type</span><span class="p">();</span> </span><span id="L-187"><a name="L-187"></a> </span><span id="L-188"><a name="L-188"></a><span class="cm">/**</span> </span><span id="L-189"><a name="L-189"></a><span class="cm"> * Our breakpoint specific widths classes.</span> </span><span id="L-190"><a name="L-190"></a><span class="cm"> */</span> </span><span id="L-191"><a name="L-191"></a><span class="k">@media</span> <span class="n">only</span> <span class="n">screen</span> <span class="ow">and</span> <span class="p">(</span><span class="no">max-width</span><span class="o">:</span> <span class="nv">$grid-palm-end</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-192"><a name="L-192"></a> <span class="k">@include</span><span class="nd"> device-type</span><span class="p">(</span><span class="s1">&#39;</span><span class="s2">palm-&#39;</span><span class="p">);</span> </span><span id="L-193"><a name="L-193"></a><span class="p">}</span> </span><span id="L-194"><a name="L-194"></a> </span><span id="L-195"><a name="L-195"></a><span class="k">@media</span> <span class="n">only</span> <span class="n">screen</span> <span class="ow">and</span> <span class="p">(</span><span class="no">min-width</span><span class="o">:</span> <span class="nv">$grid-lap-start</span><span class="p">)</span> <span class="ow">and</span> <span class="p">(</span><span class="no">max-width</span><span class="o">:</span> <span class="nv">$grid-lap-end</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-196"><a name="L-196"></a> <span class="k">@include</span><span class="nd"> device-type</span><span class="p">(</span><span class="s1">&#39;</span><span class="s2">lap-&#39;</span><span class="p">);</span> </span><span id="L-197"><a name="L-197"></a><span class="p">}</span> </span><span id="L-198"><a name="L-198"></a> </span><span id="L-199"><a name="L-199"></a><span class="k">@media</span> <span class="n">only</span> <span class="n">screen</span> <span class="ow">and</span> <span class="p">(</span><span class="no">max-width</span><span class="o">:</span> <span class="nv">$grid-lap-end</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-200"><a name="L-200"></a> <span class="k">@include</span><span class="nd"> device-type</span><span class="p">(</span><span class="s1">&#39;</span><span class="s2">portable-&#39;</span><span class="p">);</span> </span><span id="L-201"><a name="L-201"></a><span class="p">}</span> </span><span id="L-202"><a name="L-202"></a> </span><span id="L-203"><a name="L-203"></a><span class="k">@media</span> <span class="n">only</span> <span class="n">screen</span> <span class="ow">and</span> <span class="p">(</span><span class="no">min-width</span><span class="o">:</span> <span class="nv">$grid-desk-start</span><span class="p">)</span> <span class="ow">and</span> <span class="p">(</span><span class="no">max-width</span><span class="o">:</span> <span class="nv">$grid-desk-end</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-204"><a name="L-204"></a> <span class="k">@include</span><span class="nd"> device-type</span><span class="p">(</span><span class="s1">&#39;</span><span class="s2">desk-&#39;</span><span class="p">);</span> </span><span id="L-205"><a name="L-205"></a><span class="p">}</span> </span><span id="L-206"><a name="L-206"></a> </span><span id="L-207"><a name="L-207"></a><span class="k">@media</span> <span class="n">only</span> <span class="n">screen</span> <span class="ow">and</span> <span class="p">(</span><span class="no">min-width</span><span class="o">:</span> <span class="nv">$grid-stationary-start</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-208"><a name="L-208"></a> <span class="k">@include</span><span class="nd"> device-type</span><span class="p">(</span><span class="s1">&#39;</span><span class="s2">stationary-&#39;</span><span class="p">);</span> </span><span id="L-209"><a name="L-209"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, grid, scss