strive-ui

v1.4.0

Published

8 days ago

A pure CSS UI component library for modern web projects.

Downloads

222

0High
0Medium
0Low

maram499

css ui component-library pure-css strive-ui

Here is the complete README.md including the installation, usage, components, customization, contribution, and license sections:

Strive UI

Strive UI is a modern, lightweight, and framework-agnostic UI component library built using pure SCSS. It provides developers with reusable, accessible, and customizable components for building consistent and elegant web applications.

Features

🛠 Framework-Agnostic: Strive UI is built with pure CSS (SCSS), so it can be used with any framework (React, Vue, Angular, etc.).
🎨 Customizable: Built with SCSS, Strive UI allows easy customization using variables and mixins.
💡 Lightweight: Only includes essential CSS components to keep the bundle size small.
🔒 Accessible: Components are designed with accessibility in mind to provide an inclusive user experience.

Installation

You can install Strive UI from npm:

npm install strive-ui

Usage

After installation, you can import Strive UI styles in your project. Here's an example of how to use the Strive UI buttons.

Import Strive UI Styles

In your main file (e.g., index.js in React), import the Strive UI CSS file:

import "strive-ui/dist/strive-ui.css";

Example Usage in React

import React from "react";

function App() {
  return (
    <div className="App">
      <h1>Strive UI Buttons</h1>
      <button className="btn btn-primary">Primary Button</button>
      <button className="btn btn-secondary">Secondary Button</button>
    </div>
  );
}

export default App;

Example Usage in HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="node_modules/strive-ui/dist/strive-ui.css" />
  </head>
  <body>
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-secondary">Secondary Button</button>
  </body>
</html>

Components

Button

Strive UI provides customizable buttons for various use cases.

Available Classes:

btn: Base class for buttons.
btn-primary: Primary button with default styles.
btn-secondary: Secondary button for alternative actions.

Example:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

More Components

Forms
Modals
Alerts
Navigation (coming soon)

Customization

Since Strive UI is built with SCSS, it's easy to customize the styles by overriding the default variables. You can import the SCSS files and change the variables according to your project's design system.

Example (Customizing Button Colors):

// Override default colors
$primary-color: #3498db;
$secondary-color: #2ecc71;

@import "node_modules/strive-ui/src/index";

Contribution

We welcome contributions from the community to improve Strive UI. Please follow these steps to contribute:

Fork the repository.
Create a new branch for your feature or bugfix.
Make your changes and ensure tests are passing.
Submit a pull request, and provide a detailed explanation of the changes.

License

Strive UI is licensed under the MIT License. Feel free to use, modify, and distribute this library in your projects.