Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lazaronixon/css-zero
An opinionated CSS starter kit for your "nobuild" application
https://github.com/lazaronixon/css-zero
Last synced: 13 days ago
JSON representation
An opinionated CSS starter kit for your "nobuild" application
- Host: GitHub
- URL: https://github.com/lazaronixon/css-zero
- Owner: lazaronixon
- License: mit
- Created: 2024-06-06T07:56:54.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-10-27T06:40:26.000Z (17 days ago)
- Last Synced: 2024-10-27T06:47:08.951Z (17 days ago)
- Language: CSS
- Homepage: https://csszero.lazaronixon.com
- Size: 542 KB
- Stars: 115
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-rails-bootstrapped-br - CSS Zero - Um template de CSS minimalista para começar a estilizar seu app Rails rapidamente. (🚂 **Acelere usando Rails**)
- awesome-rails-bootstrapped-br - CSS Zero - Um template de CSS minimalista para começar a estilizar seu app Rails rapidamente. (🚂 **Acelere usando Rails**)
README
# CSS Zero
An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
## Installation
Add this gem to your project.
```
bundle add css-zero
```
Add the base.css file to your application.
```
bin/rails generate css_zero:install
```
Add only the components you need. (Optional)
```
bin/rails generate css_zero:add --help
bin/rails generate css_zero:add layouts flash button input switch table ...
```
### Requirements
If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
Click here to see how
```html+erb
<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
```
If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
Click here to see how
```
/*
*= require _reset
*= require animations
*= require borders
*= require colors
*= require effects
*= require filters
*= require grid
*= require sizes
*= require transform
*= require transition
*= require typography
*= require_tree .
*= require_self
*= require zutilities
*/
```
Some icons in the examples are not copied to the project. If you are looking for good ones, I recommend [Lucide](https://lucide.dev).
## Usage
```html
Write most page content using utility classes.
Create components using CSS variables.
Optionally, copy pre-built components into your application.
```
```css
.custom-component {
background-color: var(--red-500);
border-radius: var(--rounded);
block-size: var(--size-4);
}
```
Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
## Components
[
](https://csszero.lazaronixon.com)
## Development
To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/lazaronixon/css-zero. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/lazaronixon/css-zero/blob/master/CODE_OF_CONDUCT.md).
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
## Code of Conduct
Everyone interacting in the CSS Zero project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/lazaronixon/css-zero/blob/master/CODE_OF_CONDUCT.md).