Skip to content

A versatile Node package that provides a comprehensive set of CSS utility classes, inspired by the popular Tailwind CSS framework

License

Notifications You must be signed in to change notification settings

atheodosiou/flexistyles.css

Repository files navigation

flexistyles.css

jsDelivr npm

Description:

A versatile Node package that provides a comprehensive set of CSS utility classes, inspired by the popular Tailwind CSS framework and following the same intuitive naming convention. Simplify your web development workflow by effortlessly applying responsive and reusable styles to your HTML elements. Enhance your project's aesthetics and productivity with this easy-to-use package, designed to streamline your CSS development process.

Key Features:

  • Inspired by Tailwind CSS: Leverage a familiar naming scheme and utility class structure, making it easy to transition from or complement your Tailwind projects.
  • Responsive Design: Create adaptive layouts with built-in support for responsive classes, ensuring your web applications look great on all devices.
  • Lightweight and Efficient: Keep your project lean with a minimal package size and optimized CSS output.
  • Developer-Friendly: Save time and reduce boilerplate code, allowing you to focus on building exceptional user experiences.

Getting Started:

To start using flexistyles.css in your project, follow these simple steps:

  1. Add the following line inside the <head> section of your HTML document to include the FlexiStyles CSS:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flexistyles.css@{version-number}/css/flexistyles.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flexistyles.css@{version-number}/css/flexistyles.css">
  2. Alternative usage: Install the package using npm:

    npm install flexistyles.css --save
  3. import the stylesheet for node_modules:

    @import "node_modules/flexistyles.css/css/flexistyles.min.css";
    
    @import "node_modules/flexistyles.css/css/flexistyles.css";
    
  4. Start using it:

    <div class="flex flex-col gap-5 bg-blue-500 p-5">
      <h1 class="m-0 font-semibold text-2xl text-white">flexistyles.css</h1>
      <p class="m-0 text-gray-100 font-semibold">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
        type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
        Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
        Lorem Ipsum
      </p>
    </div>
    
  5. Documentation:

Please refert to the official Tailwin CSS documentation for the moment. Also mind that are not all classes supported yet.

Get started with flexistyles.css today and accelerate your CSS development with the power of Tailwind-inspired utility classes.

License: MIT

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

About

A versatile Node package that provides a comprehensive set of CSS utility classes, inspired by the popular Tailwind CSS framework

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published