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}:[{prefix}]{property}-{value}

Pseudo modifiers

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

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

This is the list of available pseudo modifiers:

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.

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

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

Style based on a sibling state

This feature was added in v0.13.0.

You can conditionally style an element based on the state of a sibling element. Add a peer class to the sibling element, and use any of the peer-* modifiers to style the target element.

<input type="checkbox" class="peer [...]" >
<!-- This message will be only visible when checkbox is checked -->
<label class="hidden peer-checked:block [...]">
    You checked it!
</label>

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

Colors

LowCSS comes equipped with a carefully curated default color palette designed to streamline your design process and enhance the visual appeal of your web projects. This palette serves as a foundation for consistent and harmonious color choices, allowing you to effortlessly create stunning user interfaces.

Available colors

Here are the colors available in the default palette:

Basic usage

For convenience and rapid development, you can apply color classes directly to your HTML elements using background, border and text utilities:

<div class="bg-yellow-200 text-gray-800">
    This element has a yellow background color and dark text.
</div>

Root CSS Variables

LowCSS provides CSS variables generated from your custom configuration, making it even easier to maintain a consistent color scheme across your project.

The following CSS variables are available, derived from the default configuration of LowCSS.

Colors Variables

The colors variables are generated from values in low.$colors:

Fonts Variables

The fonts variables are generated from values in low.$fonts;

Using CSS Variables

You can access the CSS variables in your CSS or SASS code. For example:

.my-element {
    background-color: var(--low-blue-600);
    color: var(--low-white);
}

Reset

Reset CSS is a collection of styles that aims to provide a consistent and cross-browser baseline for styling HTML elements. It helps normalize the default styles applied by different browsers, ensuring a more consistent and predictable rendering of web pages across various devices and browsers.

By enabling Reset CSS, you can start with a clean slate, eliminating inconsistencies in default styles and reducing the need for excessive CSS overrides.

For a complete list of changes and styles, please refer to the source stylesheet.

Box-sizing

It changes the box-sizing property of all elements to border-box. This ensures that the width and height of elements are calculated including padding and border, providing a more intuitive box model.

*,
*:before,
*:after {
    box-sizing: border-box;
}

Borders are removed in all elements

It resets the border-width to 0 and initializes the border-syle to solid in all elements.

*,
*:before,
*:after {
    border-color: currentColor;
    border-style: solid;
    border-width: 0;
}

Margins

It resets the default margin of some elements (including headings and paragraphs) to 0. This eliminates any inconsistencies in default spacing applied by different browsers.

blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0;
}

Headings

It normalizes the font-related properties such as font-family and font-weight in heading elements to provide a consistent typography baseline.

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

Links

Sets the default styles for anchor links elements to remove underline and inherit color:

a {
    color: inherit;
    text-decoration: inherit;
}

Lists

It removes the default styles for unordered and ordered lists (ul and ol) to eliminate any browser-specific list styles.

ul,
ol,
dl {
    margin: 0;
    padding: 0;
}

Tables

It resets the default border styles for tables.

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Form elements

It resets the default typography, padding, and margin properties common form elements:

button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

It also prevents resizing textareas horizontally by default:

textarea {
    resize: vertical;
}

Keyframes

We provide a collection of keyframes animation styles that can be used in conjunction with the animation utilities to create engaging and dynamic animations in your web projects. These predefined keyframes styles provide a quick and convenient way to add commonly used animations without the need to write complex CSS animations from scratch.

Bounce

The bounce animation creates a bouncing effect, giving an element a playful and dynamic appearance. Use the animation-bounce utility for applying a bounce animation to the element.

@keyframes bounce {
    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

Fade In

The fadein animation gradually fades an element in, smoothly transitioning it from transparent to fully visible. Use the animation-fadein utility for applying a fade in animation to the element.

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Fade Out

The fadeout animation gradually fades an element out, smoothly transitioning it from fully visible to transparent. Use the animation-fadeout utility for applying a fade out animation to the element.

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

Ping

The ping animation creates a pulsating effect, making an element quickly fade in and out to draw attention. Use the animation-ping utility for applying a ping animation to the element.

@keyframes ping {
    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

Pulse

The pulse animation creates a subtle pulsating effect, giving an element a gentle breathing-like animation. Use the animation-pulse utility for applying a pulse animation to the element.

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

Spin

The spin animation rotates an element continuously, creating a spinning effect. Use the animation-spin utility for applying a spin animation to the element.

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Helpers

LowCSS introduces a set of helper styles to assist you in common layout and text formatting tasks. These helpers are designed to simplify your development process and enhance the visual presentation of your web projects.

Clearfix

The clearfix helper is used to clear floated elements within a container. It ensures that the container expands to encompass all floated child elements, preventing layout issues and maintaining the desired flow of content.

To apply the clearfix helper, simply add the clearfix class to the parent container:

<div class="clearfix">
    <!-- Floated child elements go here -->
</div>

Text Truncation

The truncate helper provides a straightforward way to truncate text that overflows its container. This is particularly useful for avoiding text overflow issues in limited space scenarios.

To truncate text, add the truncate class to the element:

<p class="truncate">
    This is a long text that will be truncated if it overflows its container.
</p>

Fix Elements to Top/Bottom

The fixed-top and fixex-bottom helpers allow you to fix elements in position at the top or bottom of the viewport. This is commonly used for navigation menus, banners, or other content that should remain visible as the user scrolls.

To fix an element to the top, add the fixed-top class:

<div class="fixed-top">
    <!-- Content to be fixed at the top -->
</div>

To fix an element to the bottom, use the fixed-bottom class:

<div class="fix-to-bottom">
    <!-- Content to be fixed at the bottom -->
</div>

Sticky Elements to Top/Bottom

The sticky-top and sticky-bottom helpers allow you to make elements sticky, ensuring they remain in their natural flow until scrolling pushes them off-screen. At that point, they become fixed to the top or bottom of the viewport.

Sticky to top

Use the sticky-top class to make an element sticky at the top of the viewport. This is ideal for navigation menus, headers, or other elements that you want to stay visible as users scroll down the page.

<div class="sticky-top">
    <!-- Content to be sticky at the top -->
</div>

Responsive Sticky to top

In responsive web design, you may want to apply sticky behavior differently on various screen sizes. LowCSS provides responsive classes that allow you to control the sticky behavior based on your breakpoints. For example, you can make an element sticky on medium and larger screens but not on smaller ones.

<div class="md:sticky-top">
    <!-- Sticky on medium and larger screens, not sticky on smaller screens -->
</div>

In this example, the element will be sticky for md (medium) and larger screen sizes, but it won't be sticky on smaller screens.

Sticky to Bottom

Use the sticky-bottom class to make an element sticky at the bottom of the viewport. This is often used for footers, call-to-action buttons, or other content that should remain visible as users scroll.

<div class="sticky-bottom">
    <!-- Content to be sticky at the bottom -->
</div>

Responsive Sticky to bottom

Just like with the sticky-top class, you can make the sticky-bottom element responsive by using the provided responsive classes. For instance, you might want an element to be sticky at the bottom only on medium or larger screens.

<div class="md:sticky-bottom">
    <!-- Sticky at the bottom on medium or large and larger screens, not sticky on smaller screens -->
</div>

Markup

Markup styles was added in v0.22.0.

Achieving consistent and visually appealing typography is essential for creating engaging and readable web content. The Markup styles streamlines this process by providing predefined styles and configurations that you can easily apply to any vanilla HTML, regardless of its source (for example, from a Markdown parser).

<div class="markup">
    <h1>Welcome to Our Blog</h1>
    <p>
        At XYZ Corp, we are dedicated to providing you with the latest news, 
        insights, and updates from the world of technology. Whether you are a 
        seasoned developer or just getting started, our blog is your go-to 
        resource for informative articles, tutorials, and industry trends.
    </p>
    <p>
        From tips and tricks for mastering popular programming languages to 
        in-depth analyses of emerging technologies, our team of experts is here 
        to help you stay informed and inspired. Join us on our journey as we 
        explore the ever-evolving landscape of technology together.
    </p>
    <blockquote>
        "The only way to do great work is to love what you do." - Steve Jobs
    </blockquote>
    <p>
        So dive in, explore our blog, and discover the knowledge and inspiration 
        you need to thrive in the fast-paced world of technology. Happy reading!
    </p>
    <!-- ... -->
</div>

In this example, the markup class is applied to a container element, which automatically applies typographic defaults to the nested HTML elements within it, including headings, paragraphs, blockquotes, and more.

Utilities