{"id":15046360,"url":"https://github.com/baidou5/simplicss","last_synced_at":"2026-01-25T09:36:28.112Z","repository":{"id":257789745,"uuid":"859385480","full_name":"baidou5/SimpliCSS","owner":"baidou5","description":"SimpliCSS Framework","archived":false,"fork":false,"pushed_at":"2024-09-22T01:34:04.000Z","size":2597,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T00:26:22.607Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baidou5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["baidou5"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2024-09-18T15:14:55.000Z","updated_at":"2024-09-22T01:34:08.000Z","dependencies_parsed_at":"2024-09-21T20:55:20.009Z","dependency_job_id":"ca80a105-87e7-4636-a96a-f44610d1175f","html_url":"https://github.com/baidou5/SimpliCSS","commit_stats":null,"previous_names":["baidou5/simplicss"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baidou5%2FSimpliCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baidou5%2FSimpliCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baidou5%2FSimpliCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baidou5%2FSimpliCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baidou5","download_url":"https://codeload.github.com/baidou5/SimpliCSS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238397255,"owners_count":19465145,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-24T20:53:01.560Z","updated_at":"2025-10-26T20:32:33.609Z","avatar_url":"https://github.com/baidou5.png","language":"CSS","readme":"\n## SimpliCSS\n\n![SimpliCSS Logo](https://raw.githubusercontent.com/baidou5/SimpliCSS/main/bgs.jpg)\n\n## SimpliCSS\n\u003cp align=\"center\"\u003e\n   A lightweight utility-first CSS framework for quickly crafting responsive and modern user interfaces.\n\u003c/p\u003e\n\n`Abdellah Baidou`\nContact: +212 661-176711\nEmail: baidou.abd@gmail.com\n####\n**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.\n\n## Key Features\n\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\n- **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.\n- **Optimized for Modern Development**: Designed with modern web development practices in mind, SimpliCSS ensures compatibility with contemporary design standards and browser requirements.\n\n## Build Tools\n\nSimpliCSS now includes build tools to streamline development. Here's how to use them:\n\n### Installing Dependencies\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/baidou5/SimpliCSS.git\n   ```\n\n2. Navigate into the project directory:\n\n   ```bash\n   cd SimpliCSS\n   ```\n\n3. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n### Building the CSS\n\nAfter installing dependencies, you can build the CSS by running:\n\n```bash\nnpm run build:css\n```\n\nThis command compiles the CSS into a `dist` folder for use in your projects.\n\n### Example Integration\n\nYou can include SimpliCSS in your project by importing it into your CSS file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"node_modules/simpli-css/dist/SimpliCSS.css\"\u003e\n```\n\nor\n\n```css\n@import 'node_modules/simpli-css/dist/SimpliCSS.css';\n```\n## Using CDN\nYou can include SimpliCSS either through a CDN or by installing it locally in your project.\nTo include `SimpliCSS` via CDN, simply add the following link to the `\u003chead\u003e` section of your HTML document:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/baidou5/SimpliCSS@main/src/SimpliCSS.css\"\u003e\n```\n### Integration\n# Laravel Integration\nTo integrate SimpliCSS into a Laravel project:\n```html\ncp path/to/SimpliCSS/src/SimpliCSS.css public/css/\n```\n \n# or Using CDN\nAdd this link to your Blade template (e.g., resources/views/layouts/app.blade.php):\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/baidou5/SimpliCSS@main/src/SimpliCSS.css\"\u003e\n```\nThen, reference the file in your Blade template:\n```html\n\u003clink rel=\"stylesheet\" href=\"{{ asset('css/SimpliCSS.css') }}\"\u003e\n```\n# Integration with CodeIgniter\nTo integrate SimpliCSS into a CodeIgniter project:\n\nAdd SimpliCSS:\n\nUsing CDN:\n\nAdd the following line to your header file (e.g., `application/views/layouts/header.php`):\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/baidou5/SimpliCSS@main/SimpliCSS/SimpliCSS.css\"\u003e\n```\n# Local Installation:\n\nCopy the SimpliCSS.css file to `public/css/ or assets/css/`:\n```html\ncp path/to/SimpliCSS/src/SimpliCSS.css public/css/\n```\nInclude it in your view file:\n```html\n\u003clink rel=\"stylesheet\" href=\"\u003c?= base_url('css/SimpliCSS.css') ?\u003e\"\u003e\n```\n### Usage\n\nSimpliCSS utilizes simple utility classes to style your elements. Apply these classes to your HTML elements to quickly create layouts and style your content.\n\n## Example Usage\n\n```html\n\u003cdiv class=\"bg-blue text-white p-2 rounded-md shadow-md\"\u003e\n  This is a simple card component!\n\u003c/div\u003e\n```\n\n### Responsive Classes\n\nSimpliCSS includes responsive utilities to control how elements behave on different screen sizes. For example:\n\n```html\n\u003cdiv class=\"bg-light md:bg-dark lg:bg-black\"\u003e\n  Responsive background color change!\n\u003c/div\u003e\n```\n\nHere, the background color changes based on the screen size (`md` for medium screens and `lg` for large screens).\n\n## Example Code\n\nHere's a basic example of a webpage using SimpliCSS:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eSimpliCSS Example\u003c/title\u003e\n  \u003clink rel=\"stylesheet\" href=\"path/to/SimpliCSS.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"flex justify-center items-center h-screen bg-light\"\u003e\n    \u003cdiv class=\"bg-blue text-white p-3 rounded-lg shadow-lg\"\u003e\n      Welcome to SimpliCSS!\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThis creates a simple centered message with a blue background and a white text box.\n\n## Customization\n\nSimpliCSS is designed with simplicity in mind but is also fully customizable. To modify the framework:\n\n1. Open `SimpliCSS.css` in your preferred code editor.\n2. Adjust the styles, breakpoints, or add your own custom utility classes.\n3. Save your changes and rebuild the CSS:\n\n   ```bash\n   npm run build:css\n   ```\n\n## Roadmap\n\nHere are some planned features and improvements for SimpliCSS:\n\n- **Component Support**: Include ready-made UI components (like buttons, cards, etc.) for even faster development.\n- **Dark Mode Support**: Add utilities for dark mode styling.\n- **Advanced Animations**: Include a utility-based animation system for adding transitions and effects.\n- **More Flexibility**: Continue simplifying the customization process, allowing users to build their own version of SimpliCSS with ease.\n\n## Contributing\n\nContributions are welcome! If you’d like to help improve SimpliCSS:\n\n1. Fork the repository.\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`).\n3. Commit your changes (`git commit -m 'Add some amazing feature'`).\n4. Push to the branch (`git push origin feature/AmazingFeature`).\n5. Open a pull request.\n\n## License\n\nThis project is licensed under the MIT License. See the `LICENSE` file for more details.\n\n---\n\nThank you for using SimpliCSS! We hope it helps you build amazing projects.\n```\n\nFeel free to replace any sections as needed!\n","funding_links":["https://github.com/sponsors/baidou5"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaidou5%2Fsimplicss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaidou5%2Fsimplicss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaidou5%2Fsimplicss/lists"}