container-components v0.0.0

Container Components

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

Introduction

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

For example

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

Installation

CDN

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

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

NPM

npm install --save container-components

Components

space-container

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

Spacing with equal padding and margin

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

Spacing with different sizes

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

image-container

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

Lazy loading

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

Background image (hero)

<image-container
  height="400px"
  width="100%"
  is-background
  overlay
  src="media/image.jpg"
>
  <flex-container 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-container>
</image-container>

grid-container

The grid-container 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-container 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-container>

scroll-container

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

Scrolling downwards

<scroll-container 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-container>

Scrolling sideways

<scroll-container 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-container>

modal-container

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

Simple modal

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

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

Customel is MIT licensed.