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