MinimaCSS Docs

.gitignore

@@ -1,3 +1,2 @@
 node_modules/
-package-lock.json
-docs/
+package-lock.json

README.md

@@ -2,28 +2,23 @@
 
 # MinimaCSS ✨
 
-MinimaCSS is a minimalist CSS framework designed for simplicity and ease of use (Opinionated). Born from an idea in 2017 and brought to life in 2018 for my personal projects, MinimaCSS is a reflection of a vision to create a foundational CSS framework that empowers new developers and suits projects that require just the basics.
+MinimaCSS is an elegantly designed and versatile CSS framework, perfect for crafting beautiful websites. Launched in 2017 and refined in 2018 for a variety of web projects, MinimaCSS encapsulates the vision of providing an accessible yet sophisticated tool for web design. It's an ideal solution for newcomers seeking beauty in simplicity and professionals demanding aesthetic finesse in their projects.
 
-While it may not cater to the complexities of large-scale applications, its streamlined approach is ideal for budding developers, simple projects, and anyone in need of a lightweight, straightforward starting point.
+This framework celebrates the beauty of design, offering a harmonious balance between ease of use and the ability to create stunning visual experiences.
 
 ### Why MinimaCSS? 🤔
 
-In a world where front-end frameworks are often bloated and overly complex, MinimaCSS stands as a testament to simplicity. It's a throwback to the roots of CSS design, offering just enough to get you started without overwhelming you with options.
+In an era where front-end frameworks can be cumbersome and complex, MinimaCSS emerges as a beacon of aesthetic clarity. It revives the essence of CSS design, blending simplicity with the capability to create visually appealing interfaces.
 
 ### Features 🚀
 
-- Grid System: A flexible, 12-column grid for layout management.
-- Typography: Clean, readable typography settings.
-- Buttons: Pre-styled buttons with basic interactivity.
-- Forms: Simple form elements for quick integration.
+- Extensive Components: Extensive selection of pre-built components, ready for integration into diverse web projects.
+- Design Flexibility: Each element is meticulously crafted for visual excellence, supporting a wide range of aesthetic preferences.
+- Utility Classes: Comprehensive and intuitive utility classes for rapid, flexible design adjustments.
+- Responsive Design: Built for seamless responsiveness, ensuring compatibility across all devices.
 - Utilities: Handy utility classes for spacing, visibility, backgrounds, text colors, and more.
-- Responsive: Built with a mobile-first approach.
-- Dark Mode : Dark mode Included by default
-- Size : Less than ~15 kB minified and gzipped
-
-### Examples 📚
-
-Check out the directory called `/example` where all the components are used
+- Light and Dark Mode : Light and Dark mode Included by default. Default dark mode for modern aesthetics.
+- Comprehensive Documentation : Detailed documentation and support for a smooth development experience.
 
 ## Installation 💾
 
@@ -44,7 +39,6 @@ or you can use Minified css
 
 ```
 
-
 ### Direct Download 📦
 
 Download the `minimacss.css` file from the `/dist` folder and include it in your project:
@@ -80,9 +74,15 @@ npm run build
 This command compiles your SCSS files and outputs a minified CSS file in the /dist directory.
 And you're done! You now have a version of MinimaCSS that's tailored specifically to your project's requirements.
 
-### About Documentation
 
-As MinimaCSS originated as a personal project, extensive documentation was not a priority. Therefore, detailed documentation is not available at this time. The provided example is intended to be self-explanatory and should suffice for understanding how to use the framework effectively.
+## Documentation 📘
+
+**Get Started**: Quick and easy guides to get you up and running. 
+**Advanced Usage**: In-depth tutorials for advanced features and customization.
+**Latest Updates**: Stay updated with new features and improvements.
+
+[Explore Documentation](https://hardikforall.github.io/MinimaCSS/docs/)
+
 
 ### Todo
 

docs/GettingStarted.md

@@ -0,0 +1,50 @@
+
+# Getting Started
+
+Embarking on your journey with MinimaCSS is easy and straightforward. This guide will walk you through the basic steps to get MinimaCSS up and running on your project.
+
+## Quick Start
+To quickly integrate MinimaCSS into your project, you can add the following line to your HTML file's `<head>` section:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hardikforall/MinimaCSS/dist/minimacss.css">
+```
+or you can use Minified version of css
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hardikforall/MinimaCSS/dist/minimacss.min.css">
+```
+
+This CDN link will ensure you're always using the latest version of MinimaCSS.
+
+## Basic Template
+Here's a simple template to get you started with MinimaCSS:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Project Title</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hardikforall/MinimaCSS/dist/minimacss.min.css">
+</head>
+<body>
+
+    <h1>Welcome to MinimaCSS</h1>
+    <button class="btn btn-primary">Click Me!</button>
+
+</body>
+</html>
+```
+
+This template includes the MinimaCSS framework and provides a starting point for your HTML structure.
+
+## Including MinimaCSS
+To include MinimaCSS in your project, you have a couple of options:
+- Use the CDN link provided above for a quick setup.
+- Download the MinimaCSS package and include it in your project directory. You can then link to the `minimacss.min.css` file locally.
+
+Once you've included MinimaCSS, you're all set to start building your project with its simple, yet powerful components and utilities.
+
+For more detailed instructions and advanced setups, continue exploring the next sections of the documentation.

docs/README.md

@@ -0,0 +1,31 @@
+
+# MinimaCSS
+
+MinimaCSS is an elegantly designed and versatile CSS framework, perfect for crafting beautiful websites. Launched in 2017 and refined in 2018 for a variety of web projects, MinimaCSS encapsulates the vision of providing an accessible yet sophisticated tool for web design. It's an ideal solution for newcomers seeking beauty in simplicity and professionals demanding aesthetic finesse in their projects.
+
+This framework celebrates the beauty of design, offering a harmonious balance between ease of use and the ability to create stunning visual experiences.
+
+### Why MinimaCSS? 🤔
+
+In an era where front-end frameworks can be cumbersome and complex, MinimaCSS emerges as a beacon of aesthetic clarity. It revives the essence of CSS design, blending simplicity with the capability to create visually appealing interfaces.
+
+### Features 🚀
+
+- Extensive Components: Extensive selection of pre-built components, ready for integration into diverse web projects.
+- Design Flexibility: Each element is meticulously crafted for visual excellence, supporting a wide range of aesthetic preferences.
+- Utility Classes: Comprehensive and intuitive utility classes for rapid, flexible design adjustments.
+- Responsive Design: Built for seamless responsiveness, ensuring compatibility across all devices.
+- Utilities: Handy utility classes for spacing, visibility, backgrounds, text colors, and more.
+- Light and Dark Mode : Light and Dark mode Included by default. Default dark mode for modern aesthetics.
+- Comprehensive Documentation : Detailed documentation and support for a smooth development experience.
+
+
+The philosophy celebrates the art of elegant simplicity. MinimaCSS is crafted with an eye for aesthetic design, focusing on essential elements to create beautiful, uncluttered websites. We avoid the trap of excessive complexity, offering a framework that lets you embark on your creative journey swiftly and effortlessly.
+
+## Design Principles
+- **Aesthetic Elegance**: MinimaCSS embodies the principle of beauty in simplicity, providing just what you need to create visually appealing designs.
+- **Ease of Use**: It's designed to be intuitive, so you spend less time learning and more time creating.
+- **Performance**: Lightweight by design, it ensures your projects load fast and run smoothly.
+- **Flexibility in Beauty**: While it champions minimalism, MinimaCSS offers extensive customization options, allowing you to tailor your designs to perfection.
+
+Join us in embracing a minimalist approach to CSS with MinimaCSS, and start building beautiful, responsive websites with ease.

docs/_coverpage.md

@@ -0,0 +1,9 @@
+![logo](https://i.ibb.co/BBw7NLd/M-2.png)
+
+# MinimaCSS <sup><span class="badge badge-light badge-pill">1.0</span></sup>
+
+<p>A Beautifull CSS framework designed for simplicity and ease of use.</p>
+<div>
+<a href="https://github.com/hardikforall/MinimaCSS" target="_blank" class="btn btn-outline-light">GitHub</a>
+<a href="#/?id=minimacss" class="btn btn-light ml-4">Get Started</a>
+</div>

docs/_sidebar.md

@@ -0,0 +1,48 @@
+<!-- _sidebar.md -->
+* Introduction
+  * [Overview of MinimaCSS](/)
+  * [Getting Started](GettingStarted.md)
+* Components
+  * [Typography](components/typography.md)
+  * [Buttons](components/buttons.md)
+  * [Forms](components/forms.md)
+  * [Alerts](components/alerts.md)
+  * [Navigation](components/navigation.md)
+  * [Accordian](components/accordian.md)
+  * [Avatars](components/avatars.md)
+  * [Badges](components/badges.md)
+  * [Breadcrumbs](components/breadcrumbs.md)
+  * [Cards](components/cards.md)
+  * [Dividers](components/dividers.md)
+  * [Loaders](components/loaders.md)
+  * [Modal](components/modal.md)
+  * [Slideovers](components/slideovers.md)
+  * [Steps](components/steps.md)
+  * [Table](components/table.md)
+  * [Tabs](components/tabs.md)
+  * [Tooltip](components/tooltip.md)
+* Layout
+  * [Grid](layout/grid.md)
+* Utilities
+  * [Typography](utilities/typography.md)
+  * [Colors](utilities/colors.md)
+  * [Sizing](utilities/sizing.md)
+  * [Borders](utilities/borders.md)
+  * [Shadows](utilities/shadows.md)
+  * [Flexbox](utilities/flexbox.md)
+  * [Grid](utilities/grid.md)
+  * [Position](utilities/position.md)
+  * [Visibility](utilities/visibility.md)
+  * [Interactive](utilities/interactive.md)
+  * [Media](utilities/media.md)
+  * [Clearfix](utilities/clearfix.md)
+* Other
+* [Theme](theme.md)
+* [Customization](customization.md)
+* [Best Practices](best-practices.md)
+* [Examples](examples.md)
+* [Troubleshooting](troubleshooting.md)
+* [Contribution](contribution.md)
+* [Changelog](changelog.md)
+* [Credits](credits.md)
+* [License](license.md)

docs/best-practices.md

@@ -0,0 +1,46 @@
+
+# MinimaCSS - Best Practices Guide
+
+### Introduction
+
+Using MinimaCSS effectively requires adherence to certain best practices. This guide outlines the recommended approaches to ensure optimal use of the MinimaCSS framework, maintaining clean, efficient, and scalable code.
+
+### Structuring HTML with Semantic Markup
+
+1. **Use Semantic HTML**: Ensure that your HTML markup is semantic. This not only helps with SEO but also improves accessibility.
+2. **Class Naming**: Follow a consistent naming convention for custom classes to avoid conflicts with MinimaCSS's built-in classes.
+
+### CSS and SCSS Best Practices
+
+1. **Modular Approach**: Keep your CSS/SCSS files modular. Separate your styles into logical groups.
+2. **Avoid Deep Nesting**: In SCSS, avoid nesting selectors too deeply, as it can make the CSS harder to read and maintain.
+3. **Use Variables and Mixins**: Leverage SCSS variables and mixins for maintainable and reusable code.
+
+### JavaScript Interactions
+
+1. **Unobtrusive JavaScript**: Write JavaScript that enhances the user experience without being intrusive.
+2. **Use Data Attributes for JS Hooks**: Instead of using style classes, use data attributes to hook JavaScript onto elements.
+
+### Responsive and Mobile-First Design
+
+1. **Mobile-First Approach**: Design your layouts with a mobile-first approach using MinimaCSS's responsive utilities.
+2. **Test Across Devices**: Regularly test your application on various devices and screen sizes.
+
+### Performance Optimization
+
+1. **Minimize CSS File Size**: Remove unused styles and consider minifying the CSS file for production.
+2. **Optimize Images and Assets**: Ensure that images and other assets are optimized for web use.
+
+### Accessibility Considerations
+
+1. **Keyboard Navigability**: Ensure that all interactive elements are accessible via keyboard.
+2. **ARIA Labels and Roles**: Use appropriate ARIA labels and roles for better accessibility.
+
+### Regular Updates and Maintenance
+
+1. **Stay Updated**: Keep your MinimaCSS version up to date to benefit from the latest features and fixes.
+2. **Review and Refactor**: Regularly review and refactor your code to adapt to new best practices and techniques.
+
+### Conclusion
+
+Following these best practices will help you make the most out of MinimaCSS, creating web projects that are efficient, accessible, and maintainable.

docs/changelog.md

@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to MinimaCSS will be documented Here.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+#### Added
+- New features that are added but not yet released.
+
+#### Changed
+- Changes in existing functionality.
+
+#### Deprecated
+- Features that will be removed in upcoming releases.
+
+#### Removed
+- Features and functionality that have been removed.
+
+#### Fixed
+- Any bug fixes.
+
+#### Security
+- Updates and fixes related to security.
+
+## [Version] - YYYY-MM-DD
+
+#### Added
+- List new features.
+
+#### Changed
+- List changes in existing features.
+
+#### Deprecated
+- List soon-to-be removed features.
+
+#### Removed
+- List newly removed features and functionality.
+
+#### Fixed
+- List bug fixes.
+
+#### Security
+- List security updates and fixes.