CSS Zero

An opinionated CSS starter kit for your application. You can think of it like a "no build" Tailwind CSS.

Installation

Is recommended to use Propshaft, make sure to load all the CSS files in your layout.html.erb.

<%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>

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 accordion alert alert_dialog badge button card dialog input progress switch table

Usage

<h1 class="text-xl font-bold mb-4">
  Write most page content using utility classes.
</h1>

<div class="custom-component">
  Create components using CSS variables.
</div>

<div class="card">
  Optionally, copy pre-built components into your application.
</div>

.custom-component {
  background-color: var(--red-500);
  border-radius: var(--rounded);
  block-size: var(--size-4);
}

Check the CSS files in the repository to see the available variables and utility classes.

Components

Accordion

accordion

Show me the code! ```html
Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that matches the other components' aesthetic.

Is it animated?

Yes. It's animated by default, but you can disable it if you prefer.

```

Alert

alert

Show me the code! ```html+erb
<%= image_tag("circle-alert.svg", role: "presentation", size: 16) %>

Error

Your session has expired. Please log in again.

```

Alert Dialog

alert_dialog

Show me the code! ```html

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.
```

Badge

image

Show me the code! ```html
Badge
Secondary
Outline
Positive
Negative
```

Button

button

Show me the code! ```html
```

Card

image

Show me the code! ```html

Create project

Deploy your new project in one-click.

```

Dialog

dialog

Show me the code! ```html

Edit profile

Make changes to your profile here. Click save when you're done.
```

Input

input

Show me the code! ```html+erb <%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
<%= form.label :name, class: "text-sm font-medium" %> <%= form.text_field :name, class: "input" %>
<%= form.label :pick_a_date, class: "text-sm font-medium" %> <%= form.date_field :pick_a_date, class: "input" %>
<%= form.label :age_range, class: "text-sm font-medium" %> <%= form.select :age_range, ["0-13", "14-17", "18-23"], {}, class: "input" %>
<%= form.label :comment, class: "text-sm font-medium" %> <%= form.text_area :comment, rows: 3, class: "input" %>
<%= form.check_box :status, class: "checkbox" %> <%= form.label :status, "Send a copy to yourself", class: "text-sm font-medium" %>
<% end %> ```

Progress

progress

Show me the code! ```html ```

Switch

image

Show me the code! ```html+erb
```

Table

image

Show me the code! ```html
Invoice Status Method Amount
INV001 Paid Credit Card $250.00
INV002 Pending PayPal $150.00
INV003 Unpaid Transfer $350.00
INV004 Paid Credit Card $450.00
Paid $2,500.00
```

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.

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.

License

The gem is available as open source under the terms of the MIT License.

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.