Minimal CSS Utility

A lightweight CSS utility library to ease development.

Documentation

You can view the documentation at minimal-css-utility. The full documentation for the utility classes can also be found in the docs/ directory of this repository.

Motivation

I wanted a minimal CSS utility that provides just basic features to get started quickly without the bloat of larger frameworks.

For my projects, I use reset.css and a set of utility classes without external libraries, I move them from project to project. This eliminates it and makes it easier to maintain and view the docs.

Features

• Reset CSS
• Grid Layout
• Utility classes for:
  • Borders & Shadows
  • Display
  • Flexbox
  • Interactivity (cursor, opacity)
  • Overflow
  • Positioning
  • Sizing
  • Spacing
  • Typography

Installation

Install the package from npm:

# using npm

npm install minimal-css-utility

# or using yarn

yarn add minimal-css-utility

# or using pnpm
pnpm add minimal-css-utility

CDN

You can also use the compiled CSS file from a CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css"
/>

Link: https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css

Usage

You can either import the compiled CSS file into your project or import the SCSS files.

CSS

Import the min.css file in your main CSS file:

@import 'minimal-css-utility/dist/min.css';

SCSS

Import the style.scss file in your main SCSS file:

@import 'minimal-css-utility/scss/style.scss';

CSS Scoping

You can scope all the generated CSS under a specific parent selector (e.g., .my-app) by configuring the $css-scope variable. Since this project uses Sass modules, you need to configure the variables module before loading the styles.

// Configure the variables module
@use 'minimal-css-utility/scss/abstracts/variables' with (
  $css-scope: '.my-app'
);

// Load the styles
@use 'minimal-css-utility/scss/style';

Building from source

If you want to build the CSS from the source SCSS files, you can do so by following these steps:

1. Clone the repository:

   git clone https://github.com/aghontpi/minimal-css-skeleton.git

2. Install the dependencies:

   pnpm install

3. Build the project:

   pnpm build

This will generate the dist/min.css file.

License

This project is licensed under the MIT License. See the LICENSE file for details.