SimpliCSS Framework
GPL-3.0 License
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.
SimpliCSS.css
file is designed for straightforward customization, allowing you to modify existing utilities or add new ones to fit your project's requirements.SimpliCSS now includes build tools to streamline development. Here's how to use them:
Clone the repository:
git clone https://github.com/baidou5/SimpliCSS.git
Navigate into the project directory:
cd SimpliCSS
Install dependencies:
npm install
After installing dependencies, you can build the CSS by running:
npm run build:css
This command compiles the CSS into a dist
folder for use in your projects.
You can include SimpliCSS in your project by importing it into your CSS file:
<link rel="stylesheet" href="node_modules/simpli-css/dist/SimpliCSS.css">
or
@import 'node_modules/simpli-css/dist/SimpliCSS.css';
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 <head>
section of your HTML document:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baidou5/SimpliCSS@main/src/SimpliCSS.css">
To integrate SimpliCSS into a Laravel project:
cp path/to/SimpliCSS/src/SimpliCSS.css public/css/
Add this link to your Blade template (e.g., resources/views/layouts/app.blade.php):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baidou5/SimpliCSS@main/src/SimpliCSS.css">
Then, reference the file in your Blade template:
<link rel="stylesheet" href="{{ asset('css/SimpliCSS.css') }}">
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
):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baidou5/SimpliCSS@main/SimpliCSS/SimpliCSS.css">
Copy the SimpliCSS.css file to public/css/ or assets/css/
:
cp path/to/SimpliCSS/src/SimpliCSS.css public/css/
Include it in your view file:
<link rel="stylesheet" href="<?= base_url('css/SimpliCSS.css') ?>">
SimpliCSS utilizes simple utility classes to style your elements. Apply these classes to your HTML elements to quickly create layouts and style your content.
<div class="bg-blue text-white p-2 rounded-md shadow-md">
This is a simple card component!
</div>
SimpliCSS includes responsive utilities to control how elements behave on different screen sizes. For example:
<div class="bg-light md:bg-dark lg:bg-black">
Responsive background color change!
</div>
Here, the background color changes based on the screen size (md
for medium screens and lg
for large screens).
Here's a basic example of a webpage using SimpliCSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SimpliCSS Example</title>
<link rel="stylesheet" href="path/to/SimpliCSS.css">
</head>
<body>
<div class="flex justify-center items-center h-screen bg-light">
<div class="bg-blue text-white p-3 rounded-lg shadow-lg">
Welcome to SimpliCSS!
</div>
</div>
</body>
</html>
This creates a simple centered message with a blue background and a white text box.
SimpliCSS is designed with simplicity in mind but is also fully customizable. To modify the framework:
Open SimpliCSS.css
in your preferred code editor.
Adjust the styles, breakpoints, or add your own custom utility classes.
Save your changes and rebuild the CSS:
npm run build:css
Here are some planned features and improvements for SimpliCSS:
Contributions are welcome! If you’d like to help improve SimpliCSS:
git checkout -b feature/AmazingFeature
).git commit -m 'Add some amazing feature'
).git push origin feature/AmazingFeature
).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!