wrappers.js v0.0.2

Wrappers.js

A collection of invisible components to do the dirty work for you

Introduction

wrapper Components is a collection of invisible elements you can wrap around your HTML.

For example

<grid-wrapper template-columns="1fr 1fr 1fr">
  <space-wrapper p="5" style="background: #eee">Grid Column</space-wrapper>
  <space-wrapper p="5" style="background: #eee">Grid Column</space-wrapper>
  <space-wrapper p="5" style="background: #eee">Grid Column</space-wrapper>
</grid-wrapper>

Installation

CDN

Create an index.html file and include Customel with the CDN:

<script src="https://unpkg.com/wrapper-components"></script>

NPM

npm install --save wrapper-components

Components

space-wrapper

The space-wrapper is an easy way to implement spacing.

Spacing with equal padding and margin

<div class="margin-helper">
  <space-wrapper style="background: #eee" p="5" m="5">
    This is a space wrapper
  </space-wrapper>
</div>

Spacing with different sizes

<div class="margin-helper">
  <space-wrapper
    style="background: #eee"
    px="2"
    py="3"
    ml="4"
    mr="2"
    mt="3"
    mb="5"
  >
    This is a space wrapper
  </space-wrapper>
</div>

image-wrapper

The image-wrapper is an enhanced version of the img tag.

Lazy loading

<image-wrapper
  height="300px"
  width="100%"
  fade
  lazy
  src="media/image.jpg"
></image-wrapper>

Background image (hero)

<image-wrapper
  height="400px"
  width="100%"
  is-background
  overlay
  src="media/image.jpg"
>
  <flex-wrapper justify-content="center" align-items="center" align="center">
    <div style="color: white">
      <h1>The most awesome hero title</h1>
      <p>Subtitle about something</p>
    </div>
  </flex-wrapper>
</image-wrapper>

grid-wrapper

The grid-wrapper is an easy way to implement a grid system.

Because default values are css variables, you can also choose to use css instead of writing the values inline as attributes.

Grid with gap

<grid-wrapper column-gap="100px" row-gap="50px">
  <div style="background: #eee">Grid Column</div>
  <div style="background: #eee">Grid Column</div>
  <div style="background: #eee">Grid Column</div>
</grid-wrapper>

scroll-wrapper

The scroll-wrapper is an enhanced version of the img tag.

Scrolling downwards

<scroll-wrapper max-height="150px" y>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. It was popularised in
  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
  and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum.
</scroll-wrapper>

Scrolling sideways

<scroll-wrapper max-width="150px" x>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. It was popularised in
  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
  and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum.
</scroll-wrapper>

modal-wrapper

The modal-wrapper is an enhanced version of the img tag.

Simple modal

<button onclick="document.getElementById('modal-1').show = true">
  Open modal
</button>

<modal-wrapper width="30vw" height="30vh" id="modal-1">
  <h1>Halla</h1>
</modal-wrapper>

Customel is MIT licensed.