lowcss-helpers
v0.33.0
A collection of essential CSS helpers to complement LowCSS.
0/weekUpdated 1 weeks agoMITUnpacked: 6.6 KB
Published by Josemi Juanes
npm install lowcss-helperslowcss-helpers
A collection of essential CSS helper utilities for layout, positioning, and common UI patterns. This module provides utility classes that complement LowCSS or work as standalone helpers in any project.
Installation
You can install lowcss-helpers via npm or yarn:
``bashusing npm
$ npm install lowcss-helpers
using yarn
$ yarn add lowcss-helpers
`
Usage
Import the helpers in your project using either CSS imports or by linking the CSS file directly in your HTML:
css
@import "lowcss-helpers";
`html
`Available Utilities
$3
#### Horizontal Stack (.hstack)
Creates a horizontal flex container with centered items:
html
Item 1
Item 2
Item 3
`#### Vertical Stack (.vstack)
Creates a vertical flex container:
html
Section 1
Section 2
Section 3
`#### Vertical Rule (.vr)
Adds a vertical divider between elements:
html
Home
About
Contact
`$3
#### Fixed Positioning
Position elements fixed to the viewport:
html
Top Navigation
`#### Sticky Positioning
Make elements stick when scrolling:
html
Sticky Footer
`$3
#### Text Truncation (.truncate)
Truncate overflowing text with ellipsis:
html
This is a very long text that will be truncated with ellipsis
`#### Clearfix (.clearfix)
Clear floated elements:
html
Floated content
`$3
Additional font family utilities for common web fonts:
html
Heading with Inter font
Paragraph with Lato font
Heading with Poppins font
Quote with Crimson Pro font
Text with Nunito font
`Customization
Customize the appearance by overriding CSS variables:
css
:root {
/ Vertical rule customization /
--helpers-vr-opacity: 0.5; / Default: 0.25 /
--helpers-vr-width: 2px; / Default: 1px /
}
`Examples
$3
html
`$3
html
Card Title
This description will be truncated if too long...
`$3
html
Sticky content
`Integration with LowCSS
When using with LowCSS, combine helper classes with utility classes:
html
John Doe
Software Developer at Company
``License
This package is licensed under the MIT License.