@sc-360-v2/sccoreui

@sc-360-v2/sccoreui

✨ Overview

@sc-360-v2/sccoreui is a powerful library designed for creating and managing your own CSS library. It enables you to build reusable, customizable, and consistent styles that can be integrated into multiple projects. This package simplifies the process of creating and maintaining a centralized CSS library, ensuring a cohesive design system across your applications.

🔧 Installation

Follow these steps to install and configure the library in your project:

Install the library

Run the following command to add the library to your project:

npm install @sc-360-v2/sccoreui

Install Required Dependencies

To use this library effectively, ensure you have the necessary dependencies installed. For example, if your CSS library relies on specific tools or preprocessors like Sass, install them as needed:

npm install sass

🚀 Usage

Here’s a basic example of how to use the @sc-360-v2/sccoreui library in your project.

1. Importing the CSS Library

You can import the CSS library into your project to apply consistent styles:

// Import the main CSS file
@import "@sc-360-v2/sccoreui/styles/main.scss";

2. Using Predefined Classes

The library provides a set of predefined utility classes and components. For example:

<div class="btn btn-primary">Primary Button</div>
<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-content">This is a reusable card component.</p>
</div>

3. Customizing Styles

You can extend or override the default styles by creating your own SCSS files and importing them after the library:

@import "@sc-360-v2/sccoreui/styles/main.scss";

// Custom styles
.btn-custom {
  background-color: #ff5733;
  color: #fff;
}

📂 File Structure

Your project will look like this after installation:

my-project/
├── src/
│   ├── styles/
│   │   └── custom.scss
│   └── App.tsx
├── node_modules/
├── package.json
├── tsconfig.json
└── README.md

📦 Library Build Process

The build process is optimized to generate a clean and efficient CSS library. Gzipped assets are created, and unnecessary files are excluded.

• Run the build command:

  npm run build
  

• The output will be available in the dist/ folder. You can publish this to npm or use it directly in your projects.

🌟 Features

• 🎨 Reusable CSS components for consistent design
• ✂️ Utility-first classes for rapid development
• ⚙️ Customizable styles to match your brand
• 🚀 Built with modern CSS and SCSS for flexibility
• 📚 Easy integration into any project

🛡️ License

This library is licensed under the MIT License.