Swave UI

Swave-ui is a versatile CSS framework designed to empower developers with a comprehensive suite of utilities, helpers, and components for creating stunning user interfaces and websites.

Documentation

[][npm-link]

Swave UI

Swave-ui is a versatile CSS framework designed to simplify the process of creating beautiful and responsive user interfaces and websites. With a rich set of utilities, helpers, and components, Swave-ui empowers developers to build engaging and functional web experiences efficiently.

Features

• Mobile responsiveness is prioritized to ensure optimal performance and user experience on smaller screens.
• We utilize flexible grid system based on Flexbox or Grid layout, offering classes for different column sizes to achieve responsive designs.
• Lightweight: Only around 20kb gzipped, making it easy to download
• Swave UI defines consistent and aesthetically pleasing font styles for headings, paragraphs, and links.
• Swave UI provides a set of UI components such as buttons, forms, and navigation bars with different styles to enhance the visual appeal and functionality of the interface.
• A set of predefined classes that can be used across the entire project for typography, colors
• Includes utility classes for common tasks, such as spacing (margin and padding), display properties, and visibility toggles.
• Offers utility classes that allow developers to control the visibility of elements based on different screen sizes, ensuring adaptability across devices.
• Defines a well-thought-out color palette with over 100 color spectrum, providing classes for background and text color customization.
• Supplies utility classes for controlling dimensions, borders, and border-radius, enabling efficient styling of various elements.
• Integrates media queries for different breakpoints (xs, sm, md, lg) to optimize layouts for varying screen sizes.
• Offers comprehensive documentation with examples, making it user-friendly and easy to implement.
• Allows users to customize the framework easily by adjusting variables (e.g., colors, spacing) through a configuration file.
• Ensures compatibility with major browsers and includes appropriate vendor prefixes in styles for consistent rendering.

Installation

NPM

npm install swave-ui

Yarn

yarn install swave-ui

OR

IMPORT

After installation, you can import the CSS file into your project using this snippet:

import 'swave-ui/dist/my-css-framework.min.css';

CDN

https://www.jsdelivr.com/package/npm/swave-ui

CONTRIBUTING

Please refer to the CONTRIBUTING.md for more details on contributing.

LICENSE

Swave-ui is licensed under the MIT License. See the LICENSE file for more details.

CONTACT

You can reach me by email at if you want to discuss more about Swave UI. [email protected]