Novicell CSS Utils ⚡

Table of contents

CSS Custom Properties Background Borders Display Embed Flex Position Screenreaders Shadows Sizing Spacing Text Visibility

Overwritable CSS Custom Properties and media-queries

The following CSS Custom Properties can be overwritten inside your project. See README.MD on how to do it.

/* Colors */
--css-utils-color-white: #fff;
--css-utils-color-black: #000;
--css-utils-color-primary: #c80046;
--css-utils-color-secondary: #363636;
--css-utils-color-success: #28a745;
--css-utils-color-danger: #dc3545;
--css-utils-color-warning: #ffc107;
--css-utils-color-gray: #acacac;
--css-utils-color-gray-light: #d7d7d7;
--css-utils-color-gray-dark: #4b4b4b;
--css-utils-color-body: #000;

/* Borders */
--css-utils-border-width: 1px;
--css-utils-border-color: #acacac;
--css-utils-border-radius-sm: 4px;
--css-utils-border-radius: 5px;
--css-utils-border-radius-lg: 6px;
--css-utils-border-radius-round: 50%;

/* Shadows */
--css-utils-box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.075);
--css-utils-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
--css-utils-box-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.175);

/* Media Queries (definition has to be outside any kind of blocks - see https://github.com/postcss/postcss-custom-media) */
@custom-media --viewport-ms-min (min-width: 576px);
@custom-media --viewport-sm-min (min-width: 768px);
@custom-media --viewport-md-min (min-width: 992px);
@custom-media --viewport-lg-min (min-width: 1200px);
@custom-media --viewport-xl-min (min-width: 1400px);

Backgrounds

The background utilities can be used to change the background color according to the classname.

Example
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-gray
.bg-gray-light
.bg-gray-dark
.bg-white
.bg-black
Available classes 
<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-success"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-gray"></div>
<div class="bg-gray-light"></div>
<div class="bg-gray-dark"></div>
<div class="bg-white"></div>
<div class="bg-black"></div>

Borders

The border utilities can be used to set or remove borders color according to the classname.

Example
.border
.border-top
.border-right
.border-bottom
.border-left
Available classes 
<!-- Additive -->
<div class="border"></div>
<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>

<!-- Subtractive -->
<div class="border-0"></div>
<div class="border-top-0"></div>
<div class="border-right-0"></div>
<div class="border-bottom-0"></div>
<div class="border-left-0"></div>

<!-- Border color-->
<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-warning"></div>
<div class="border border-info"></div>
<div class="border border-light"></div>
<div class="border border-dark"></div>
<div class="border border-white"></div>

<!-- Border radius-->
<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-right"></div>
<div class="rounded-bottom"></div>
<div class="rounded-left"></div>
<div class="rounded-circle"></div>
<div class="rounded-0"></div>

Display

The display utilities can be used to set the display property according to the classname. It also have responsive modifiers

The responsive modifiers follows this pattern: .d-{breakpoint}-{value} for ms, sm, md, lg, and xl

Available classes 
<!-- Non-responsive -->
<div class="d-none">display: none;</div>
<div class="d-block">display: block;</div>
<div class="d-inline">display: inline;</div>
<div class="d-inline-block">display: inline-block;</div>
<div class="d-table">display: table;</div>
<div class="d-table-cell">display: table-cell;</div>
<div class="d-table-row">display: table-row;</div>
<div class="d-flex">display: flex;</div>
<div class="d-inline-flex">display: inline-flex;</div>

<!-- Responsive example -->
<div class="d-flex d-sm-block d-xl-none"></div>

Embed

The embed utilities can be used to set the height/width ratio of embedded content e.g. Youtube according to the classname. Example

Available classes 
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Flex

The flex utilities can be used to set the flex properties according to the classname. It also have responsive modifiers

The responsive modifiers follows this pattern: .flex-{breakpoint}-{value} for ms, sm, md, lg, and xl

Available classes 
<!-- Direction classes -->
<div class="flex-row">flex-direction: row;</div>
<div class="flex-row-reverse">flex-direction: reverse;</div>

<div class="flex-column">flex-direction: column;</div>
<div class="flex-column-reverse">flex-direction: column-reverse;</div>

<!-- Direction classes responsive example -->
<div class="flex-lg-column"></div>

<!-- Justify content -->
<div class="justify-content-start">justify-content: flex-start;</div>
<div class="justify-content-end">justify-content: flex-end;</div>
<div class="justify-content-center">justify-content: center;</div>
<div class="justify-content-between">justify-content: space-between;</div>
<div class="justify-content-around">justify-content: space-around;</div>
<div class="justify-content-evenly">justify-content: space-evenly;</div>

<!-- Justify content responsive example -->
<div class="justify-content-lg-center"></div>

<!-- Align items -->
<div class="align-items-start">align-items: flex-start;</div>
<div class="align-items-end">align-items: flex-end;</div>
<div class="align-items-center">align-items: center;</div>
<div class="align-items-baseline">align-items: baseline;</div>
<div class="align-items-stretch">align-items: stretch;</div>

<!-- Align items responsive example -->
<div class="align-items-lg-center"></div>

<!-- Align self -->
<div class="align-self-start">align-self: flex-start;</div>
<div class="align-self-end">align-self: flex-end;</div>
<div class="align-self-center">align-self: center;</div>
<div class="align-self-baseline">align-self: baseline;</div>
<div class="align-self-stretch">align-self: stretch;</div>

<!-- Align self responsive example -->
<div class="align-self-lg-center"></div>

<!-- Wrap -->
<div class="flex-nowrap">flex-wrap: nowrap;</div>
<div class="flex-wrap">flex-wrap: wrap;</div>
<div class="flex-wrap-reverse">flex-wrap: wrap-reverse;</div>

<!-- Wrap responsive example -->
<div class="flex-lg-nowrap"></div>

<!-- Order -->
<div class="order-first">order: -1;</div>
<div class="order-last">order: 13;</div>
<div class="order-0">order: 0;</div>
<div class="order-1">order: 1;</div>
<div class="order-2">order: 2;</div>
<div class="order-3">order: 3;</div>
<div class="order-4">order: 4;</div>
<div class="order-5">order: 5;</div>
<div class="order-6">order: 6;</div>
<div class="order-7">order: 7;</div>
<div class="order-8">order: 8;</div>
<div class="order-9">order: 9;</div>
<div class="order-10">order: 10;</div>
<div class="order-11">order: 11;</div>
<div class="order-12">order: 12;</div>

<!-- Order responsive example -->
<div class="order-lg-12"></div>

<!-- Align content -->
<div class="d-flex align-content-start">align-content: flex-start;</div>
<div class="d-flex align-content-end">align-content: flex-end;</div>
<div class="d-flex align-content-center">align-content: center;</div>
<div class="d-flex align-content-between">align-content: space-between;</div>
<div class="d-flex align-content-around">align-content: space-around;</div>
<div class="d-flex align-content-evenly">align-content: space-evenly;</div>
<div class="d-flex align-content-stretch">align-content: space-stretch;</div>

<!-- Align content responsive example -->
<div class="d-flex align-content-lg-start"></div>

Position

The position utilities can be used to set the position according to the classname

Available classes 
<div class="position-static">position: static;</div>
<div class="p-relative">position: relative;</div>
<div class="p-absolute">position: absolute;</div>
<div class="p-fixed">position: fixed;</div>
<div class="p-sticky">position: sticky;</div>
<div class="p-revert">position: revert;</div>
<div class="p-unset">position: unset;</div>
<div class="p-initial">position: initial;</div>
<div class="p-inherit">position: inherit;</div>

Screenreaders

The screenreader utilities can be used to hide elements visually and help screenreaders intercept the site

Available classes 
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Shadows

The shadow utilities can be used to set the shadow according to the classname

Available classes 
<div class="shadow-none">box-shadow: none;</div>
<div class="shadow-sm">box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);</div>
<div class="shadow">box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);</div>
<div class="shadow-lg">box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);</div>

Sizing

The sizing utilities can be used to set the sizing according to the classname. It also have responsive modifiers

The responsive modifiers follows this pattern: .{axis}-{breakpoint}-{value} for ms, sm, md, lg, and xl

Available classes 
<!-- Width classes -->
<div class="w-25">width: 25%;</div>
<div class="w-50">width: 50%;</div>
<div class="w-75">width: 75%;</div>
<div class="w-100">width: 100%;</div>
<div class="w-auto">width: auto;</div>

<!-- Width responsive examlpe -->
<div class="w-lg-75"></div>

<!-- Height classes -->
<div class="h-25">height: 25%;</div>
<div class="h-50">height: 50%;</div>
<div class="h-75">height: 75%;</div>
<div class="h-100">height: 100%;</div>
<div class="h-auto">height: auto;</div>


<!-- Height responsive examlpe -->
<div class="h-lg-75"></div>

<!-- Max width/height -->
<div class="mw-100">max-width: 100%;</div>
<div class="mh-100">max-height: 100%;</div>

<!-- Viewport width/height -->
<div class="min-vw-100">min-width: 100vw;</div>
<div class="min-vh-100">min-height: 100vh;</div>

<div class="vw-100">width: 100vw;</div>
<div class="vh-100">height: 100vh;</div>

Spacing

The spacing utilities can be used to set the spacing according to the classname. It also have responsive modifiers

The responsive modifiers follows this pattern: .{property}{sides || axis}-{breakpoint}-{size} for ms, sm, md, lg, and xl.
By default the size starts from 0px and goes up to 100px

Available classes 
<!-- Margin classes -->
<div class="m-0">0px;</div>
<div class="m-1">5px;</div>
<div class="m-2">10px;</div>
<div class="m-3">15px;</div>
<div class="m-4">20px;</div>
<div class="m-5">30px;</div>
<div class="m-6">40px;</div>
<div class="m-7">50px;</div>
<div class="m-8">60px;</div>
<div class="m-9">70px;</div>
<div class="m-10">80px;</div>
<div class="m-11">90px;</div>
<div class="m-12">100px;</div>

<!-- Margin auto -->
<div class="mt-auto">margin-top: auto;</div>
<div class="mr-auto">margin-right: auto;</div>
<div class="mb-auto">margin-bottom: auto;</div>
<div class="ml-auto">margin-left: auto;</div>
<div class="my-auto">margin-top: auto; margin-bottom: auto;</div>
<div class="mx-auto">margin-left: auto; margin-right: auto;</div>

<!-- Specific margin side example -->
<div class="mt-5">margin-top: 40px;</div>

<!-- Specific margin axis example -->
<div class="mx-5">margin-left: 40px; margin-right: 40px;</div>

<!-- Responsive margin example -->
<div class="m-lg-5"></div>

<!-- Padding classes -->
<div class="p-0">0px;</div>
<div class="p-1">5px;</div>
<div class="p-2">10px;</div>
<div class="p-3">15px;</div>
<div class="p-4">20px;</div>
<div class="p-5">30px;</div>
<div class="p-6">40px;</div>
<div class="p-7">50px;</div>
<div class="p-8">60px;</div>
<div class="p-9">70px;</div>
<div class="p-10">80px;</div>
<div class="p-11">90px;</div>
<div class="p-12">100px;</div>

<!-- Specific padding side example -->
<div class="pt-5">padding-top: 40px;</div>

<!-- Specific padding axis example -->
<div class="px-5">padding-left: 40px; padding-right: 40px;</div>

<!-- Responsive padding example -->
<div class="p-lg-5"></div>

Text

The text utilities can be used to modify text styling according to the classname. It also have responsive modifiers

The responsive modifiers follows this pattern: .text-{breakpoint}-{modifier} for ms, sm, md, lg, and xl.
By default the size starts from 0px and goes up to 100px

Color example
.text-body
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-gray
.text-gray-light
.text-gray-dark
.text-white
.text-black
Available classes 
<!-- Text alignment -->
<div class="text-left">text-align: left;</div>
<div class="text-center">text-align: center;</div>
<div class="text-right">text-align: right;</div>

<!-- Responsive text alignment example -->
<div class="text-lg-left"></div>

<!-- Text colors -->
<div class="text-body"></div>
<div class="text-primary"></div>
<div class="text-secondary"></div>
<div class="text-success"></div>
<div class="text-danger"></div>
<div class="text-warning"></div>
<div class="text-gray"></div>
<div class="text-gray-light"></div>
<div class="text-gray-dark"></div>
<div class="text-white"></div>
<div class="text-black"></div>
<div class="text-inherit"></div>

<!-- Text transform -->
<div class="text-lowercase">text-transform: lowercase;</div>
<div class="text-uppercase">text-transform: uppercase;</div>
<div class="text-capitalize">text-transform: capitalize;</div>

<!-- Weight and italics -->
<div class="font-weight-lighter">font-weight: lighter;</div>
<div class="font-weight-normal">font-weight: normal;</div>
<div class="font-weight-bold">font-weight: bold;</div>
<div class="font-weight-bolder">font-weight: bolder;</div>
<div class="font-italic">font-style: italic;</div>

<!-- Misc. helpers -->
<div class="font-italic">font-style: italic;</div>
<div class="text-monospace">font-family: monospace;</div>
<div class="text-wrap">text-align: justify;</div>
<div class="text-wrap">white-space: normal;</div>
<div class="text-nowrap">white-space: nowrap;</div>
<div class="text-truncate">white-space: nowrap;</div>
<div class="text-decoration-none">text-decoration: none;</div>
<div class="text-break">word-wrap: break-word; word-break: break-word;</div>

Visibility

The visibility utilities can be used to visibility according to the classname

Available classes 
<div class="visible">visibility: visible;</div>
<div class="invisible">visibility: hidden;</div>