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.

Attribute	Type	Default	Decription
p	number	var(--space-0, 0)	Padding
px	number	var(--space-0, 0)	Padding left and right
py	number	var(--space-0, 0)	Padding top and bottom
pl	number	var(--space-0, 0)	Padding left
pl	number	var(--space-0, 0)	Padding left
pt	number	var(--space-0, 0)	Padding top
pb	number	var(--space-0, 0)	Padding bottom

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.

Attribute	Type	Default	Decription
lazy	boolean	false	Load the image lazily
loaded	boolean	false	Gets updated to true when image is loaded
fade	boolean	false	Fade in the image when loaded
src	string		The URL of the image src
object-fit	string	cover	The object fit of the image
width	string	100%	The width of the image. Can use with breakpoints.
height	string	100%	The width of the image. Can use with breakpoints.
alt	string		Alt text to the image.
is-background	boolean	false	Use a div with background-image instead of an img with src
overlay	boolean	false	Overlay image with a darker shade so it's easier to put text on

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.

Attribute	Type	Default	Decription
template-columns	string	var(--grid-container-template-columns, 1fr)	Template columns
column-gap	string	var(--grid-container-column-gap, 1rem)	Column gap
row-gap	string	var(--grid-container-row-gap, 1rem)	Row gap

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.

Attribute	Type	Default	Decription
template-columns	string	var(--grid-container-template-columns, 1fr)	Template columns
column-gap	string	var(--grid-container-column-gap, 10px)	Template columns

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.

Attribute	Type	Default	Decription
show	boolean	false	Open the modal

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.