VUI is a powerful utility class generator for SCSS that empowers developers to create and maintain consistent design systems with ease. With VUI, you can simplify your stylesheets by using utility classes that cover a wide range of design properties, including colors, spacing, typography, shadows, and more. This package is designed to combine the simplicity of Bootstrap with the flexibility of Tailwind CSS, offering a versatile solution for building stylish and responsive web interfaces.
-
Design System API: VUI provides an API to streamline the development of your design system, making it easy to create, customize, and maintain utility classes for your project.
-
Build Anything: Whether you're working on a simple webpage or a complex web application, VUI empowers you to build the UI you want, without the need for excessive custom CSS.
-
Responsive Everything: VUI supports responsive design with utility variants that allow you to adapt your interface to different screen sizes.
-
Hover and Focus States: Easily apply hover and focus states to your elements by using utility classes, maintaining consistency in user interactions.
-
Direction Support: VUI offers the possibility of different designs for left-to-right (LTR) and right-to-left (RTL) directions, allowing you to cater to various language preferences.
-
Dark and Light Modes: Implement dark and light mode designs seamlessly by adding the "dark" class to your HTML body and using dark mode-specific classes for colors, backgrounds, and more. Your users will appreciate the reduced eye strain during late-night browsing.
You can install VUI via npm:
npm install vui-css-utilityOr yarn:
yarn add vui-css-utilityOnce installed, you can include the SCSS files in your project to start using VUI utility classes.
To enable dark mode, add the "dark" class to your HTML body:
<body class="dark">
<!-- Your content here -->
</body>Now you can apply dark mode utility classes, such as:
<button class="v-bg-gray-500 dark:v-bg-gray-100">
Save changes
</button>You can switch between right-to-left (RTL) and left-to-right (LTR) directions by adding the "rtl" or "ltr" class to the HTML body:
<body class="rtl">
<!-- Your RTL content here -->
</body>Now you can use direction-specific utility classes like "rtl:v-text-right" to control text alignment.
VUI supports responsive design with variants based on screen sizes. For example:
<p class="sm:v-font-size-10 md:v-font-size-12 lg:v-font-size-16 xl:v-font-size-18 xxl:v-font-size-22">
Responsive text
</p>The above class will apply different font sizes at various screen widths.
You can easily manage spacing with classes for margins and padding:
<p class="v-mt-3 v-mb-8 v-ml-4 v-mr-9 v-pt-2 v-pb-1 v-pl-4 v-pr-7">
Margins and padding example
</p>This approach simplifies the handling of spacing in your layout.
VUI provides a comprehensive set of responsive flexbox utilities for managing grid layouts, alignment, and sizing. You can customize grid columns, rows, and more with classes like "v-grid-cols-2" and "v-col-span-6". Responsive variations are also available to adapt your layout to different screen sizes.
If you'd like to contribute to VUI, please fork this repository, make your changes, and create a pull request. We welcome contributions that enhance the package and help make it even more versatile and user-friendly.
VUI is released under the MIT License. You're free to use and modify it in your projects, both personal and commercial.
Here are some websites that have been designed using the VUI design system:
You can customize each class using various features, including dark mode, hover, responsiveness, direction, and importance. The properties.scss file is where you can change the properties of each class according to your specific project requirements.
With VUI, you have a robust SCSS utility package that simplifies the process of creating a well-engineered design system. Say goodbye to arbitrary values in your stylesheets and embrace the power of utility classes to build consistent and beautiful web interfaces.