1.0.8 • Published 1 year ago
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