@rhelements/rh-layouts v1.0.0-prerelease.7

RHElements Layouts

Usage

RHElements Layouts, like Bootstrap, is based on a 12 column grid with similar breakpoints available. We've just made the usage simpler.

Including rh-layouts

To get started, included a link to rh-layouts.css

<link rel="stylesheet" type="text/css" href="/path/to/rh-layouts.min.css">

Grid

Since RHElements Layouts is not a Web Component, its classes can be applied to any element, giving you lots of control over where and how you utilize its layouts.

If you want a simple 3 column grid with gutters, use the following:

<div class="rh-l-grid rh-m-gutters rh-m-all-4-col">
  <div>4 cols wide</div>
  <div>4 cols wide</div>
  <div>4 cols wide</div>
  <div>4 cols wide</div>
  <div>4 cols wide</div>
</div>

Grid Layout Classes & Modifiers

Parent Grid Element classes:

Child Grid Element Classes:

Example:

<div class="rh-l-grid rh-m-gutters rh-m-all-4-col">
  <div class="rh-m-8-col">8 cols wide</div>
  <div>4 cols wide</div>
  <div class="rh-m-startat-9-col">4 cols, indented</div>
  <div class="rh-m-8-col">8 cols wide</div>
  <div>4 cols wide</div>
</div>

Breakpoints

// Small devices
@media (min-width: 576px) { ... }

// Medium devices
@media (min-width: 768px) { ... }

// Large devices
@media (min-width: 992px) { ... }

// Extra large devices
@media (min-width: 1200px) { ... }

Bullseye

Use a bullseye layout when there is a single child element, and that child is centered both vertically and horizontally in the parent.

Exampe:

<div class="rh-l-bullseye">
  <div>Perfectly centered child</div>
</div>

Text Alignment

Text alignment helper classes can also be applied to any block-level element.

Developers

Test

npm run test

Build

npm run build

Demo

From the RHElements root directory, run:

npm start

Code style

Card (and all RHElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.