Myles Braithwaite

Alert

Usage
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Include template
source/_includes/c_alert.html

Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Example Link

<p class="c-alert ">
    <strong class="c-alert__title">Lorem Ipsum</strong>
    <span class="c-alert__copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <a href="http://example.org/"  class="c-alert__link">Example Link</a>
</p>

Audio

Include template
source/_includes/c_audio.html
<audio class="responsive-audio" controls="controls">
    
    <source src="https://mylesbraithwaite.com/uploads/2011/073/owsley-stanley-died-in-an-automobile-accident-on-sunday/kid-charlemagne.ogg" type="audio/ogg">
    
</audio>
<div class="l-grid gallery" data-gallery-title="">
    
    
    
    <div class="l-row gallery__row" data-image-count="1">
        
        <div class="l-column l-column--12 gallery__column">
            <a href="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena.jpg" title="Matanuska Glacier, Untied States by Nitish Meena" class="gallery__image-link" data-lightbox="gallery">
                <figure class="responsive-image">
    <div class="responsive-image__wrapper">
        <picture>
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-2250by3375-4d874e.jpg" media="(min-width: 1500px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1500px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-1500by2250-4d874e.jpg" media="(min-width: 1500px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-1500by2250-4d874e.jpg" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1000px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-1000by1500-4d874e.jpg" media="(min-width: 1000px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-1200by1800-4d874e.jpg" media="(min-width: 50em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 50em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-800by1200-4d874e.jpg" media="(min-width: 50em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-720by1080-4d874e.jpg" media="(min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-480by720-4d874e.jpg" media="(min-width: 30em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-525by300-4d874e.jpg" media="(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-350by200-4d874e.jpg">
    <img src="https://mylesbraithwaite.com/uploads/style/c-gallery/nitish-meena-350by200-4d874e.jpg" class="responsive-image__image" itemprop="image" alt="Matanuska Glacier, Untied States by Nitish&nbsp;Meena" data-downloadable="true" >
  </picture>


        
        <figcaption class="responsive-image__caption">
            
            Matanuska Glacier, Untied States by Nitish Meena
            
        </figcaption>
        
    </div>
</figure>

            </a>
        </div>
        
    </div>
    
    
    
    <div class="l-row gallery__row" data-image-count="3">
        
        <div class="l-column l-column--4 gallery__column">
            <a href="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck.jpg" title="Tomas Griesbeck" class="gallery__image-link" data-lightbox="gallery">
                <figure class="responsive-image">
    <div class="responsive-image__wrapper">
        <picture>
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-2250by1500-bf1927.jpg" media="(min-width: 1500px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1500px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-1500by1000-bf1927.jpg" media="(min-width: 1500px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-1500by1000-bf1927.jpg" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1000px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-1000by667-bf1927.jpg" media="(min-width: 1000px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-1200by800-bf1927.jpg" media="(min-width: 50em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 50em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-800by533-bf1927.jpg" media="(min-width: 50em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-720by480-bf1927.jpg" media="(min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-480by320-bf1927.jpg" media="(min-width: 30em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-525by300-bf1927.jpg" media="(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-350by200-bf1927.jpg">
    <img src="https://mylesbraithwaite.com/uploads/style/c-gallery/thomas-griesbeck-350by200-bf1927.jpg" class="responsive-image__image" itemprop="image" alt="Tomas&nbsp;Griesbeck" data-downloadable="true" >
  </picture>


        
        <figcaption class="responsive-image__caption">
            
            Tomas Griesbeck
            
        </figcaption>
        
    </div>
</figure>

            </a>
        </div>
        
        <div class="l-column l-column--4 gallery__column">
            <a href="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla.jpg" title="Jasper, Canada by I'm Priscilla" class="gallery__image-link" data-lightbox="gallery">
                <figure class="responsive-image">
    <div class="responsive-image__wrapper">
        <picture>
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-2250by1500-0c25af.jpg" media="(min-width: 1500px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1500px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-1500by1000-0c25af.jpg" media="(min-width: 1500px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-1500by1000-0c25af.jpg" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1000px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-1000by667-0c25af.jpg" media="(min-width: 1000px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-1200by800-0c25af.jpg" media="(min-width: 50em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 50em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-800by533-0c25af.jpg" media="(min-width: 50em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-720by480-0c25af.jpg" media="(min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-480by320-0c25af.jpg" media="(min-width: 30em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-525by300-0c25af.jpg" media="(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-350by200-0c25af.jpg">
    <img src="https://mylesbraithwaite.com/uploads/style/c-gallery/i-m-priscilla-350by200-0c25af.jpg" class="responsive-image__image" itemprop="image" alt="Jasper, Canada by I&#8217;m&nbsp;Priscilla" data-downloadable="true" >
  </picture>


        
        <figcaption class="responsive-image__caption">
            
            Jasper, Canada by I'm Priscilla
            
        </figcaption>
        
    </div>
</figure>

            </a>
        </div>
        
        <div class="l-column l-column--4 gallery__column">
            <a href="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard.jpg" title="averie woodard" class="gallery__image-link" data-lightbox="gallery">
                <figure class="responsive-image">
    <div class="responsive-image__wrapper">
        <picture>
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-1822by1822-65db6f.jpg" media="(min-width: 1500px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1500px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-1500by1500-65db6f.jpg" media="(min-width: 1500px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-1500by1500-65db6f.jpg" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1000px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-1000by1000-65db6f.jpg" media="(min-width: 1000px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-1200by1200-65db6f.jpg" media="(min-width: 50em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 50em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-800by800-65db6f.jpg" media="(min-width: 50em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-720by720-65db6f.jpg" media="(min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-480by480-65db6f.jpg" media="(min-width: 30em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-525by300-65db6f.jpg" media="(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-350by200-65db6f.jpg">
    <img src="https://mylesbraithwaite.com/uploads/style/c-gallery/averie-woodard-350by200-65db6f.jpg" class="responsive-image__image" itemprop="image" alt="averie&nbsp;woodard" data-downloadable="true" >
  </picture>


        
        <figcaption class="responsive-image__caption">
            
            averie woodard
            
        </figcaption>
        
    </div>
</figure>

            </a>
        </div>
        
    </div>
    
</div>
<figure class="responsive-image">
    <div class="responsive-image__wrapper">
        <picture>
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-2250by1506-604703.jpg" media="(min-width: 1500px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1500px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-1500by1004-604703.jpg" media="(min-width: 1500px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-1500by1004-604703.jpg" media="(min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1000px) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-1000by669-604703.jpg" media="(min-width: 1000px)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-1200by803-604703.jpg" media="(min-width: 50em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 50em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-800by536-604703.jpg" media="(min-width: 50em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-720by482-604703.jpg" media="(min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-480by321-604703.jpg" media="(min-width: 30em)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-525by300-604703.jpg" media="(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)">
    <source srcset="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-350by200-604703.jpg">
    <img src="https://mylesbraithwaite.com/uploads/style/c-image/a-kelsey-johnsen-350by200-604703.jpg" class="responsive-image__image" itemprop="image" alt data-downloadable="true" >
  </picture>


        
        <figcaption class="responsive-image__caption">
            
            <a href="https://unsplash.com/?photo=pmX9BkDDr_A" >New Zealand by Kelsey Johnsen</a>
            
        </figcaption>
        
    </div>
</figure>
<figure class="responsive-video">
    <div class="responsive-video__wrapper">
        
        <iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" class="responsive-video__video" frameborder="0" allowfullscreen></iframe>
        

        
    </div>
</figure>