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

Requirements

If you are using 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 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.

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

Show me the code

```html+erb

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

Show me the code

```html+erb

<%= image_tag("circle-alert.svg", role: "presentation", size: 16) %>

Error

Your session has expired. Please log in again.

```

Avatar

Show me the code

```html+erb

<%= image_tag "cartoon.jpg", role: "presentation", size: 48 %>

CN

```

Badge

Show me the code

```html+erb

Badge

Secondary

Outline

Positive

Negative

```

Breadcrumb

Show me the code

```html+erb

Home <%= image_tag "chevron-right.svg", size: 14 %> <%= image_tag "ellipsis.svg", size: 14 %> <%= image_tag "chevron-right.svg", size: 14 %> Components <%= image_tag "chevron-right.svg", size: 14 %> Breadcrumb

```

Button

Show me the code

```html+erb

Primary Secondary Outline Plain Positive Negative <%= image_tag "circle-plus.svg", role: "presentation", size: 16 %> With icon Please wait

```

Card

Show me the code

```html+erb

Create project

Deploy your new project in one-click.

Name

Framework Select Ruby on Rails Laravel Next

Cancel Destroy

```

Collapsible

Show me the code

```html+erb

@lazaronixon starred 3 repositories

<%= image_tag "chevrons-up-down.svg", size: 16 %> Toggle

@rails/rails

@rails/jbuilder

@rails/jsbundling-rails

```

Dialog

Alert Dialog

Show me the code

```html+erb

Are you absolutely sure?

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

Cancel

Continue

Show dialog

```

Dismissible Dialog

Show me the code

```html+erb

<%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %> Close

Edit profile

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

Name

Username

Show dialog

```

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

Show me the code

```html Loading progress ```

Switch

Show me the code

```html+erb

Airplane Mode

```

Table

Show me the code

```html+erb

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

```

More components soon...

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.