Getting Started

A guide to help you quickly set up and start using LowCSS in your projects.

basics

Installation

Using a Package Manager

To get started with LowCSS, you can install the package using either yarn or npm. Follow the instructions below based on your preferred package manager:

Terminal

## Installation using yarn
$ yarn add lowcss

## Installation usin npm
$ npm install lowcss

LowCSS provides precompiled CSS files. To include them in your project, copy the file low.css to your project's assets or CSS directory.

Terminal

$ cp ./node_modules/lowcss/low.css ./assets/

Then, link the CSS file in your HTML file using a <link> tag in the <head> section:

index.html

<link rel="stylesheet" href="assets/low.css">

Using a Hosted Version

You can also use the hosted version of LowCSS from a Content Delivery Network (CDN). Simply include the following <link> tag in the <head> section of your HTML file:

index.html

<link rel="stylesheet" href="https://unpkg.com/lowcss/low.css">

Usage

LowCSS adopts a familiar and intuitive utility class naming convention, inspired by Tailwind CSS. This syntax allows you to apply a wide range of styles to your HTML elements by adding class attributes directly in your markup.

Basic Usage

The basic naming pattern for our utility classes is as follows:

{property}-{value}

{property}: specifies the CSS property that the utility class modifies. Examples of properties include bg for background, text for text-related styles, p for padding, m for margin, and so on. This component is not always present and depends on the utility class.
{value}: indicates the specific value or variation for the CSS property.

index.html

<button class="bg-blue-500 text-white text-base rounded-lg px-4 py-2 [..]">Button</button>

Media queries

Media queries are a powerful tool for creating responsive designs. LowCSS provides a simple and consistent way to apply styles based on different media conditions.

Responsive Design

LowCSS makes it easy to create responsive designs using the following utility syntax:

{breakpoint}:{property}-{value}

{property}, and {value} follow the same structure as mentioned above.
{breakpoint}: represents a specific breakpoint where the utility class should apply.

The following breakpoints are defined by default in LowCSS:

Breakpoint Name Minimum width Rule
Small sm 640px @media (min-width: 640px) { ... }
Medium md 768px @media (min-width: 768px) { ... }
Large lg 1024px @media (min-width: 1024px) { ... }
Extra Large xl 1280px @media (min-width: 1280px) { ... }

Breakpoint	Name	Minimum width	Rule
Small	`sm`	`640px`	`@media (min-width: 640px) { ... }`
Medium	`md`	`768px`	`@media (min-width: 768px) { ... }`
Large	`lg`	`1024px`	`@media (min-width: 1024px) { ... }`
Extra Large	`xl`	`1280px`	`@media (min-width: 1280px) { ... }`

You can apply different styles at different breakpoints:

index.html

<div class="hidden md:block [...]">
    Content
</div>

Print Media

Use the print modifier to apply the provided class only when the document is begin printed.

index.html

<div class="hidden print:block">
    This block is only displayed when the document is begin printed.
</div>

State modifiers

LowCSS includes a range of utility classes for working with state modifiers, allowing you to easily style elements in specific states. We use the following syntax:

{modifier}:{property}-{value}

Pseudo modifiers

Pseudo modifiers allows you to conditionally apply an utility class based on the pseudo state, such as hover or focus.

index.html

<button class="bg-blue-500 hover:bg-blue-800 [...]">Hover me</button>

This is the list of available pseudo modifiers:

Modifier Description
hover Applied when the user hovers the element.
focus Applied to the element when it has focus.
focus-within Applied to the element when it or one of its descendants has focus.
checked Applied to the element when it is checked (only for radio or checkbox).
disabled Applied to the element when it is disabled.
first Applied to the element when it is the first child.
last Applied to the element when it is the last child.
odd Applied to the whose numeric position in a series of siblings is odd.
even Applied to the whose numeric position in a series of siblings is even.

Modifier	Description
`hover`	Applied when the user hovers the element.
`focus`	Applied to the element when it has focus.
`focus-within`	Applied to the element when it or one of its descendants has focus.
`checked`	Applied to the element when it is checked (only for radio or checkbox).
`disabled`	Applied to the element when it is disabled.
`first`	Applied to the element when it is the first child.
`last`	Applied to the element when it is the last child.
`odd`	Applied to the whose numeric position in a series of siblings is odd.
`even`	Applied to the whose numeric position in a series of siblings is even.

Style based on a parent state

You can conditionally style an element based on the state of a parent element. Add a group class to the parent element and use one of the group-* modifiers to style the target element.

index.html

<div class="group [...]">
    <!-- button content -->
    <div class="hidden group-hover:block [...]">
        <!-- dropdown items -->
    </div>
</div>

This is a list of all group-* modifiers available:

Modifier Description
group-hover Applied when the parent element is hovered.
group-focus Applied when the parent element is focussed.
group-focus-within Applied when the parent element or one of its descendants are focussed.

Modifier	Description
`group-hover`	Applied when the parent element is hovered.
`group-focus`	Applied when the parent element is focussed.
`group-focus-within`	Applied when the parent element or one of its descendants are focussed.

On This Page

Installation

Using a Package Manager Using a Hosted Version

Usage

Basic Usage Media queries State modifiers