Kayzen

Images & Graphics

assets/modules/elements/images

Files

  • _images.scss
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/images

Module Overview

The 'images()' mixin contains several modules which are outlined below.

  • Name: image
  • Components: n/a
  • Modifiers: n/a

Examples

Desktop Graphic Module

  1. <div class="desktop-graphic">
  2. <img src="../../../images/demo-screen.png" alt="" />
  3. <div class="desktop-graphic_image" style="background-image: url('../../../images/stock-1.jpg')"></div>
  4. </div>
<div class="desktop-graphic">
    <img src="../../../images/demo-screen.png" alt="" />
    <div class="desktop-graphic_image" style="background-image: url('../../../images/stock-1.jpg')"></div>
</div>  

Scroll On Hover

  1. <div class="desktop-graphic-scroll">
  2. <img src="../../../images/demo-screen.png" alt="" />
  3. <div class="desktop-graphic_image" style="background-image: url('../../../images/stock-2.jpg')"></div>
  4. </div>
<div class="desktop-graphic-scroll">
    <img src="../../../images/demo-screen.png" alt="" />
    <div class="desktop-graphic_image" style="background-image: url('../../../images/stock-2.jpg')"></div>
</div> 

Mobile Graphic Module

  1. <img class="mobile-graphic" src="../../../images/mobile-screen.png" />
<img class="mobile-graphic" src="../../../images/mobile-screen.png" />

Color Options

Available colors:

  • blue
  • green
  • purple
  • red
  • yellow
  • white
  1. <img class="mobile-graphic-purple" src="../../../images/mobile-screen.png" />
<img class="mobile-graphic-purple" src="../../../images/mobile-screen.png" />

Horizontal/Vertical Centering

The class center-xy will horizontally and vertically center an image in a container. Alone this doesn't have much practical use, but can be used in different creative ways.

  1. <div class="center-xy hide-overflow" style="height: 88px; width: 180px;">
  2. <img src="../../../images/team/team-1.jpg">
  3. </div>
<div class="center-xy hide-overflow" style="height: 88px; width: 180px;">
    <img src="../../../images/team/team-1.jpg">
</div>