Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fajarspace/stuff-css
Stuff is a simple framework CSS for native website
https://github.com/fajarspace/stuff-css
css css-framework framework html scss-framework
Last synced: 4 months ago
JSON representation
Stuff is a simple framework CSS for native website
- Host: GitHub
- URL: https://github.com/fajarspace/stuff-css
- Owner: fajarspace
- Created: 2023-01-19T04:59:43.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T16:50:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T16:21:43.728Z (4 months ago)
- Topics: css, css-framework, framework, html, scss-framework
- Language: SCSS
- Homepage: https://stuffcss.netlify.app/
- Size: 33.3 MB
- Stars: 34
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Simple CSS framework for native website
Explore the docs »
Report Bug
·
Request Feature
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
## Getting Started
Stuff CSS is a front-end framework that makes it easy to create responsive but minimalist web pages (displays well on any screen size) and is mobile-friendly.
### Prerequisites
There are 3 ways to run Stuff CSS, Using a CDN (Content Delivery Network), Installing via NPM (Node Package Manager) or Install manually
*Note: version on react.js is under development, maybe users will find a lot of bugs
* NPM
```sh
npm install stuffcss
```
* CDN
```html
```
* Manually
[Download](https://stuffcss.netlify.app) a latest version Stuff
## Usage
_For more examples, please refer to the [Documentation](https://example.com)_
## Roadmap
- [x] Add themes
- [x] Dark or Light
- [x] Auto
- [ ] Add Layout
- [x] Container
- [x] Flex
- [x] Grid
- [ ] Horizontal scroller
- [ ] Add Content
- [x] Typography
- [ ] Images
- [ ] Tables
- [ ] Add Forms
- [ ] Add Components
- [ ] Accordion
- [x] Breadcrumb
- [ ] Button
- [x] Cards
- [x] Navbar
- [ ] Dropdown
- [ ] Modal
- [ ] Pagination
See the [open issues](https://github.com/fajarspace/stuff-css/issues) for a full list of proposed features (and known issues).
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
[contributors-shield]: https://img.shields.io/github/contributors/fajarspace/stuff-css.svg?style=for-the-badge
[contributors-url]: https://github.com/fajarspace/stuff-css/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/fajarspace/stuff-css.svg?style=for-the-badge
[forks-url]: https://github.com/fajarspace/stuff-css/network/members
[stars-shield]: https://img.shields.io/github/stars/fajarspace/stuff-css.svg?style=for-the-badge
[stars-url]: https://github.com/fajarspace/stuff-css/stargazers
[issues-shield]: https://img.shields.io/github/issues/fajarspace/stuff-css.svg?style=for-the-badge
[issues-url]: https://github.com/fajarspace/stuff-css/issues
[license-shield]: https://img.shields.io/github/license/fajarspace/stuff-css.svg?style=for-the-badge
[license-url]: https://github.com/fajarspace/stuff-css/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/othneildrew
[product-screenshot]: images/screenshot.png
[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
[Next-url]: https://nextjs.org/
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
[Vue-url]: https://vuejs.org/
[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
[Angular-url]: https://angular.io/
[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
[Svelte-url]: https://svelte.dev/
[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
[Laravel-url]: https://laravel.com
[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
[Bootstrap-url]: https://getbootstrap.com
[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
[JQuery-url]: https://jquery.com
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.