A lightweight utility-first CSS framework for quickly crafting responsive and modern user interfaces.
Abdellah Baidou
Contact: +212 661-176711
Email: baidou.abd@gmail.com
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.
- 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.cssfile 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.
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:cssThis 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.cssin 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:
- 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.
Contributions are welcome! If you’d like to help improve SimpliCSS:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some amazing feature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a pull request.
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!