Documentation

CAREFALL Theme
|
Animations
|
Aurora Grid v2
|
Typography helpers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus purus et porttitor sodales. Nam cursus ipsum neque. Nulla magna augue, vehicula nec interdum sed, tempus eu leo. Curabitur pharetra in lorem sit amet volutpat. Aenean gravida consectetur iaculis. Etiam consequat turpis turpis, ac efficitur turpis pulvinar vitae. Suspendisse finibus dolor eu augue dignissim, non volutpat nunc venenatis. Duis vel dolor pretium, aliquam ipsum at, malesuada sem. Aliquam massa augue, dignissim a nulla quis, rhoncus dictum felis.

CAREFALL Theme

Card

To create a card used in this Template you must include some utility classes and optionally another classes to add visual effects.

Simple Card.

This is a simple Card with border.

<div class="card">
  …content
</div>

Shadow Card.

This is a Card with border and fixed shadow.

<div class="card shadow">
  …content
</div>

Shadow Card II.

This is a Card with border and shadow shown on :hover.

<div class="transition card shadow:hover">
  …content
</div>

Shadow Card III.

This is a Card without border and shadow shown on :hover.

<div class="transition card shadow:hover !no-border">
  …content
</div>

Custom shadow Card.

This is a Card with a custom shadow
set through --shadow variable.

<div 
  class="card shadow" 
  style="--shadow: 0 0 20px rgba(255, 245, 223, .5)">
  …content
</div>

Overlay

An overlay is an extra layer added to an element that allows us to show information over. It is possible to show simple text passing the string throgh data-overlay or mor complex content using a children element with the class overlay__content. It could be shown drectly or when interactig with the element.

<div class="overlay" 
  data-overlay="Lorem ipsum dolor sit amet.">
  <img src="image.jpg" alt="Example"/>
</div>

<div class="transition overlay:hover" 
  data-overlay="Lorem ipsum dolor sit amet.">
  <img src="image.jpg" alt="Example"/>
</div>

Hello

<div class="transition overlay:hover">
  <img src="image.jpg" alt="Example"/>
  <div class="overlay__content text-center">
    <h1 class="text-dark font-thin">Hello</h1>
    <button class="button-gradient">Say Hi</button>
  </div>
</div>

Custom Overlay

using linear-gradient

<div 
  class="transition overlay"
  style="--overlay: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1))">
  <img class="h-full object-cover" src="image.jpg" alt="Example"/>
  <div class="overlay__content text-center">
    <h1 class="text-dark font-thin">Custom Overlay</h1>
    <p class="text-dark font-thin">using linear-gradient</p>
  </div>
</div>

Buttons

This theme comes with two kind of buttons, both customizable through CSS variables. Also in both cases is possible to se a class to make the button active as default.

<button class="button">
  Simple Button
</button>

<button class="button button--active">
  Button Active
</button>

<button 
  class="button button--active" 
  style="--alt-color:#000;--bg-color:pink">
  Custom Colors
</button>

<button class="button-gradient">
  Gradient Button
</button>

<button class="button-gradient button-gradient--active">
  Gradient Active
</button>

<button class="button-gradient button-gradient--active"
  style="--color1:#5929ca;--color2:#46288c">
  Custom Gradient
</button>

Underline

Using the class underline adds a beautifull gradient underline, customizable through CSS variables and also interactive. There are two animations available on :hover: the default one underline:hover expand the gradient up, the second one underline:after:hover (available also without :hover) shows the line after hover the mouse. It is also customizable the stroke weight of the underlline through the --stroke variable.

Hello World!

<h1 class="underline">
  Hello World!
</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet interdum eros, pretium aliquam nibh. Proin rhoncus gravida eros, nec pharetra magna sollicitudin eget. Donec in venenatis ligula. Pellentesque elit mi, ultricies posuere risus nec, malesuada sagittis dui. Nunc eu ultrices enim, eu lobortis elit. Etiam a facilisis tellus, ac rutrum justo.

<p>
  Lorem <span class="underline">ipsum dolor sit amet</span>
  …
</p>

Hello World!

<h2 class="underline:hover">
  Hello World!
</h2>

Hello World!

<h2 
  class="underline" 
  style="--stroke:7px;--color1:#28ca17;--color2:#8c8b1d">
  Hello World!
</h2>


  --stroke: 7px;

Hello World!

<h2 class="underline:after:hover">
  Hello World!
</h2>

Text Gradient

Similar to underlined text, you have the class text-gradient which use the same default gradient to add a fill effect to the text. Also available as a result of :hover interaction.

Hello World!

<h1 class="text-gradient">
  Hello World!
</h1>

Hello World!

<h1 class="text-gradient:hover transition">
  Hello World!
</h1>

Custom Colors

<h1 
  class="text-gradient"
  style="--color1:#5929ca;--color2:#46288c">
  Hello World!
</h1>

Avatar

Place beatuful Avatars in your website using the class avatar in the container element. Place the img inside and the svg snippet wich works as gradient ornament, with some useful classes to customize it. The classes to crop the rounded stroke follows this criteria crop-* to compose the class, where * could be top, right, bottom, left or combinations like top-right, top-left and so on. Each class has also a helper to: wich switch the current crpo into the assigned after to:, for example to:crop-top-left will be visible after :hover.
The size of the Avatar could be controled through the font-size of the container (the one with avatar class).

<div class="avatar">
  <img class="" src="profile.jpg" alt="Profile"/>
  <svg viewBox="0 0 100 100" class="absolute place-0">
    <circle cx="50" cy="50" r="45" 
      stroke="url(#gradient)" 
      stroke-width="1" 
      fill="none" />
  </svg>
</div>

<div class="avatar">
  <img class="" src="profile.jpg" alt="Profile"/>
  <svg viewBox="0 0 100 100" class="absolute place-0 crop-left">
    <circle cx="50" cy="50" r="45" 
      stroke="url(#gradient)" 
      stroke-width="1" 
      fill="none" />
  </svg>
</div>

<div class="avatar">
  <img class="" src="profile.jpg" alt="Profile"/>
  <svg 
    viewBox="0 0 100 100" 
    class="absolute place-0 crop-top-right to:crop-top-left">
    <circle cx="50" cy="50" r="45" 
      stroke="url(#gradient)" 
      stroke-width="1" 
      fill="none" />
  </svg>
</div>

<div class="avatar em-xs">…</div>
<div class="avatar em-sm">…</div>
<div class="avatar em-base">…</div>
<div class="avatar em-lg">…</div>

Animations

In this Template we use some external libraries to animate the html elements.

Parallax

To make parallax effect we use the rellax library.

Include the Plugin script

<script src="https://unpkg.com/rellax@1.10.0/rellax.js"/>

Initialize using the desired class

const rellax = new Rellax('.rellax');

Then use in the markup

<img src="…" class="rellax" />

Scroll Smooth

To make the scroll smooth effect we use our scroll-smooth library.

Include the Plugin script

<script src="https://unpkg.com/scroll-smooth@1.1.0/dist/index.umd.min.js"/>

In order to initialize the anchor scroll behaviour add the following line to your scripts

scrollSmooth.anchorScroll()

In case you need to make an imperative scroll from, for example, a button, make it as showing below, where 0 is the position in pixels in the scrollable window area. You could replace this parameter with an html element.

button.addEventListener('click', () => scrollSmooth.to(0))

Scroll Change

We use our scroll-change library to update classes on specific element, fired by specific trigger in the scroll.

Include the Plugin script

<script src="https://unpkg.com/scroll-change@1.0.1/dist/index.js"/>

Set up the plugin options and initialize it.

 const headerHandler = new ScrollChange({
  elem: '#main-logo',
  trigger: 200, // 200px from top, could be an element
  classes: 'logo--alt', // class to toggle
  endPoint: docHeight - window.innerHeight - 200, // remove class before end of the page
})
headerHandler.init()

Aurora Grid v2

Basic Grid

Adding the grid class creates automatically a 2 columns grid with automatic rows based on children elements

<div class="grid">
  …items
</div>

Custom Grid Columns

Customize the quantity of columns by setting the css variable --columns
--columns: 1;

<div class="grid" style="--columns:4">
  …items
</div>

CSS Custom Properties

Keep in mind that each component that could be adjusted by setting a css variable could be applied the same way through inline-styles or appending into classes in the stylesheet. Below some examples:

Thorugh inline style

<div class="grid" style="--columns:12"></div>

Through classes on the stylesheet


<style>
.grid-elem {
  --columns: 12;
  /* other stuff */
}
</style>

All the css variables has a specific variation for each responsive breakpoint, such as --columns-md will be considered in viewports higher or equal tha md. Each specific variable falls back to the default one, in the previous example, the fallback variable is --columns.

<div class="grid@sm" style="--columns:3; --columns-md:5;--columns-lg:7;--columns-xl:9"></div>

Custom Grid Gaps

Setting the gap allow to balance the Grid items. It could be handled both horizontal and vertical gaps together or separated. The variables available are --gap for both sides and --column-gap for the vertical side and --row-gap for the horizontal one.

Set columns and rows gaps equal values

<div class="grid" style="--gap:2em">
  …items
</div>

Set columns and rows gaps different values

<div class="grid" style="--column-gap:2em;--row-gap:0.125em">
  …items
</div>

As expected, we could apply responsive variations for --gap as well as for --column-gap and --row-gap following the same syntax, like: --gap-sm, --column-gap-xl or --row-gap-md. Below the example.

<div class="grid" style="
  --gap: 1px; 
  --gap-md: 10px;
  --column-gap-lg: 80px;
  --row-gap-lg: 20px;
  --gap-xl: 120px">
  …items
</div>

Grid Area

Setting the variable --grid-area we colud easily create a complex layout taking advantage of the grid-template-areas propery.
Each children item must have assigned a grid-area css property assigned to be positioned right.

<div class="grid" 
  style="--gird-area: '__1 __2 __3'
                      '__4 __5 __6'
                      '__7 __5 __6'
                      '__9 __9 __8'
">
  <div style="grid-area: __1" />
  <div style="grid-area: __2" />
  <div style="grid-area: __3" />
  <div style="grid-area: __4" />
  <div style="grid-area: __5" />
  <div style="grid-area: __6" />
  <div style="grid-area: __7" />
  <div style="grid-area: __8" />
  <div style="grid-area: __9" />
</div>

Grid Items

Each Grid children could be adjusted through --col and --row values. Those values accepts any valid syntax for grid-column and grid-row respectively. That means that we could set up the column and row initial and end line or either the spanning columns.

<div class="grid" style="--columns: 12">
  <div style="--col: span 1" />
  <div style="--col: span 11" />
  <div style="--col: span 2" />
  <div style="--col: span 10" />
  <div style="--col: span 3" />
  <div style="--col: span 9" />
  …
</div>

These variables comes with the responsive modifiers, such as --col-md: 5 which fallback into --col if wasn't declared and the viewport match the specific @media-query.

1 👉 11

11 👉 1

2 👉 10

10 👉 2

3 👉 9

9 👉 3

<div class="grid" style="--columns: 12">
  <div style="--col: span 1; --col-lg: span 11" />
  <div style="--col: span 11; --col-lg: span 1" />
  <div style="--col: span 2; --col-lg: span 10" />
  <div style="--col: span 10; --col-lg: span 2" />
  <div style="--col: span 3; --col-lg: span 9" />
  <div style="--col: span 9; --col-lg: span 3" />
  …
</div>

Grid Row Span

The items variables comes handy also when we need to specify not only the column but also the rows spanning. Below the example. Keep in mind that the initial line number refers to the implicit grid lines and the span numbers refers to the number of columns/rows to fill.

<div class="grid" style="--columns: 6">
  <div style="--col: 1;--row: 1 / span 1" />
  <div style="--col: 1;--row: 2 / span 5" />
  <div style="--col: 2;--row: 1 / span 2" />
  <div style="--col: 2;--row: 3 / span 4" />
  <div style="--col: 3;--row: 1 / span 3" />
  <div style="--col: 3;--row: 4 / span 4" />
  …
</div>

Grid Complex Items

Taking advantage of the --col and --row variables and its responsive modifiers we could cover pretty complex situatios like in the example below. Remember that css variables are sensible to the cascade of the css (the first "c"), so you can take advantage and set common variables to apply to all items in the parent element.

<div class="grid" style="
  --columns: 6;
  --col-lg: span 3;
  --row-lg: span 3;
  --col: col 1 / span 3;
  --row: 1 / span 3;
  ">
  <div />
  <div style="--row: 2 / span 3; --col: col 2 / span 4;" />
  <div />
  <div style="--row: 3 / span 3; --col: col 3 / span 2;" />
</div>