styleena v1.0.8

Styleena

This is an awesome libraby for styling html pages

Initially we have added beautiful images styles in this libraby.

Install Styling

Install styleena using npm package manager

  npm i styleena

Image Styling

How to use classes with images

  <div class="image image-cover image-s">
    <img src="" />
  </div>

Responsive Image Styling

How to use classes with responsive approach

  <div class="image image-cover image-s image-sm-l image-md-hd">
    <img src="" />
  </div>

Image Overlay

Sometimes it is essential to use Overlay for images, here is how to use this approach.

• We always have to use overlay div before image
• image-overlay div has 100% width and 100% height
• you have to place you content inside of image-overlay div.
• image-overlay has no default opacity given
• you can give opacity directly to image-overlay

  <div class="image image-cover image-s">
    <div class="image-overlay"></div>
    <img src="" />
  </div>

Image common class

• image (This class is mandetory to use in parent of image)

Image overlay classes

• image-overlay

Image container classes

• image-cover
• image-contain

Image position classes

• image-center
• image-left
• image-right
• image-top
• image-top-left
• image-top-right
• image-bottom
• image-bottom-left
• image-bottom-right

Available image ratio classes

• image-2x
• image-phd
• image-p
• image-s
• image-post
• image-l
• image-hd
• image-wide
• image-header
• image-banner-quarter
• image-banner-half
• image-banner-large
• image-banner-full

Breakpoints for responsive designs

• Extra small
• Small - sm
• Medium - md
• Large - lg
• Extra Large - xl
• Extra Extra Large - xxl

Special Thanks

• Leena IT Solutions

• README

Authors

• @sandeep8558
• Sandeep Rathod