Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baidou5/simplicss
SimpliCSS Framework
https://github.com/baidou5/simplicss
cd-deployment codeigniter css-animations css-flexbox css-framework css-grid css-grid-layout fastify-plugin framework html5-css3 laravel npm npm-install php responsive-design utility-classes
Last synced: 3 months ago
JSON representation
SimpliCSS Framework
- Host: GitHub
- URL: https://github.com/baidou5/simplicss
- Owner: baidou5
- License: gpl-3.0
- Created: 2024-09-18T15:14:55.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-22T01:34:04.000Z (4 months ago)
- Last Synced: 2024-10-11T07:23:18.265Z (3 months ago)
- Topics: cd-deployment, codeigniter, css-animations, css-flexbox, css-framework, css-grid, css-grid-layout, fastify-plugin, framework, html5-css3, laravel, npm, npm-install, php, responsive-design, utility-classes
- Language: CSS
- Homepage:
- Size: 2.48 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## SimpliCSS
## SimpliCSS
A lightweight utility-first CSS framework for quickly crafting responsive and modern user interfaces.
`Abdellah Baidou`
Contact: +212 661-176711
Email: [email protected]
####
**SimpliCSS** is a lightweight, utility-first CSS framework designed to simplify the development of modern, responsive websites. It aims to be an easy-to-use alternative to more complex frameworks, offering a streamlined and intuitive approach to styling. While inspired by popular frameworks, SimpliCSS focuses on simplicity, efficiency, and flexibility.
## Key Features
- **Utility-First Design**: Embrace a utility-first approach with a comprehensive set of utility classes that enable rapid development without writing custom CSS. Build layouts and styles efficiently using pre-defined classes.
- **Minimalist Syntax**: SimpliCSS offers a simplified class naming convention that prioritizes ease of use and memorability. This design choice enhances productivity by reducing the cognitive load associated with more complex class names.
- **Responsive Utilities**: Leverage built-in responsive utilities to ensure your designs adapt seamlessly across various screen sizes. With SimpliCSS, you can manage responsive behaviors with minimal effort and maintain a consistent user experience on all devices.
- **Lightweight and Performance-Focused**: The framework is intentionally lightweight, including only essential features to keep your projects lean and fast. Avoid unnecessary bloat and enjoy a streamlined development experience with SimpliCSS.
- **Customizable and Extendable**: Easily tailor the framework to meet your specific needs. The `SimpliCSS.css` file is designed for straightforward customization, allowing you to modify existing utilities or add new ones to fit your project's requirements.
- **Flexbox and Grid Layouts**: Utilize modern layout techniques with built-in Flexbox and Grid utilities. Simplify complex layout designs and achieve flexible, responsive layouts without the need for additional CSS.
- **Consistent Design Language**: Achieve a cohesive look and feel throughout your project with a consistent design language. SimpliCSS provides a unified set of utilities that ensure visual harmony and reduce inconsistencies in styling.
- **Optimized for Modern Development**: Designed with modern web development practices in mind, SimpliCSS ensures compatibility with contemporary design standards and browser requirements.
## Build Tools
SimpliCSS now includes build tools to streamline development. Here's how to use them:
### Installing Dependencies
1. Clone the repository:
```bash
git clone https://github.com/baidou5/SimpliCSS.git
```
2. Navigate into the project directory:
```bash
cd SimpliCSS
```
3. Install dependencies:
```bash
npm install
```
### Building the CSS
After installing dependencies, you can build the CSS by running:
```bash
npm run build:css
```
This command compiles the CSS into a `dist` folder for use in your projects.
### Example Integration
You can include SimpliCSS in your project by importing it into your CSS file:
```html
```
or
```css
@import 'node_modules/simpli-css/dist/SimpliCSS.css';
```
## Using CDN
You can include SimpliCSS either through a CDN or by installing it locally in your project.
To include `SimpliCSS` via CDN, simply add the following link to the `` section of your HTML document:
```html
```
### Integration
# Laravel Integration
To integrate SimpliCSS into a Laravel project:
```html
cp path/to/SimpliCSS/src/SimpliCSS.css public/css/
```
# or Using CDN
Add this link to your Blade template (e.g., resources/views/layouts/app.blade.php):
```html
```
Then, reference the file in your Blade template:
```html
```
# Integration with CodeIgniter
To integrate SimpliCSS into a CodeIgniter project:
Add SimpliCSS:
Using CDN:
Add the following line to your header file (e.g., `application/views/layouts/header.php`):
```html
```
# Local Installation:
Copy the SimpliCSS.css file to `public/css/ or assets/css/`:
```html
cp path/to/SimpliCSS/src/SimpliCSS.css public/css/
```
Include it in your view file:
```html
```
### Usage
SimpliCSS utilizes simple utility classes to style your elements. Apply these classes to your HTML elements to quickly create layouts and style your content.
## Example Usage
```html
This is a simple card component!
```
### Responsive Classes
SimpliCSS includes responsive utilities to control how elements behave on different screen sizes. For example:
```html
Responsive background color change!
```
Here, the background color changes based on the screen size (`md` for medium screens and `lg` for large screens).
## Example Code
Here's a basic example of a webpage using SimpliCSS:
```html
SimpliCSS Example
Welcome to SimpliCSS!
```
This creates a simple centered message with a blue background and a white text box.
## Customization
SimpliCSS is designed with simplicity in mind but is also fully customizable. To modify the framework:
1. Open `SimpliCSS.css` in your preferred code editor.
2. Adjust the styles, breakpoints, or add your own custom utility classes.
3. Save your changes and rebuild the CSS:
```bash
npm run build:css
```
## Roadmap
Here are some planned features and improvements for SimpliCSS:
- **Component Support**: Include ready-made UI components (like buttons, cards, etc.) for even faster development.
- **Dark Mode Support**: Add utilities for dark mode styling.
- **Advanced Animations**: Include a utility-based animation system for adding transitions and effects.
- **More Flexibility**: Continue simplifying the customization process, allowing users to build their own version of SimpliCSS with ease.
## Contributing
Contributions are welcome! If you’d like to help improve SimpliCSS:
1. Fork the repository.
2. Create your feature branch (`git checkout -b feature/AmazingFeature`).
3. Commit your changes (`git commit -m 'Add some amazing feature'`).
4. Push to the branch (`git push origin feature/AmazingFeature`).
5. Open a pull request.
## License
This project is licensed under the MIT License. See the `LICENSE` file for more details.
---
Thank you for using SimpliCSS! We hope it helps you build amazing projects.
```
Feel free to replace any sections as needed!