This README is the one indexed from the repository at its latest ref, not from the tag for this version.

css.cr

Create CSS stylesheets in pure Crystal.

Installation

1. Add the dependency to your shard.yml:

   dependencies:
     css:
       github: sbsoftware/css.cr

2. Run shards install.

Quick Start

require "css"

class Style < CSS::Stylesheet
  rule div do
    display :block
    padding 12.px
  end
end

puts Style

Output:

div {
  display: block;
  padding: 12px;
}

Documentation

Task-focused guides live in docs/:

• Getting Started
• Selectors
• Nesting
• Media Queries
• Units and calc()
• Gradients and Colors
• Fonts and @font-face
• Using !important
• Examples Gallery (copy/paste-ready DSL + rendered CSS)
• Cookbook (idiomatic patterns + CSS <-> Crystal hints)
• API Reference Summary
• Contributor Guide: Adding Properties and Enums

Coverage Index

Generate the MDN-vs-shard coverage index:

crystal scripts/generate_coverage.cr

The generated report is committed at COVERAGE.md and includes:

• supported/unsupported/missing MDN property coverage,
• typed enum coverage for enum-applicable properties,
• unsupported string-only properties,
• a checklist for adding missing CSS.

Contributing

Use the contributor docs in docs/contributing-properties-and-enums.md for implementation details.

1. Fork it (https://github.com/sbsoftware/css.cr/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

Contributors

• Stefan Bilharz - creator and maintainer