Beautiful, responsive websites made simple.

The CSS-in-HTML methodology unlocks the full power of CSS from within your HTML. Write style rules directly in markup using expressive class names like :hover{background:$gray80}. Hacss generates a style sheet for you at build time.

Get started

Cut the B.S. out of CSS.

Hacss combines the advantages of atomic CSS with the flexibility and familiarity of native CSS. It's no longer necessary to burn valuable development time learning a complicated system of utility classes only to discover later that the system didn't anticipate all of your needs. 

  <div class="  
    background:#fff;  
    color:$gray70;  
  ">  
    <div>  
      <div class="  
        background-image:url('/grinder.jpg');  
        background-position:center;  
        background-size:cover;  
        width:$len128;  
        height:100%;  
        min-height:$len128;  
      ">  
      </div>  
    </div>  
    <div>  
      <h1>  
        Cut the B.S. out of CSS.  
      </h1>  
      <p class="margin:0;">  
        Hacss combines the advantages of atomic CSS  
        with the flexibility and familiarity of  
        native CSS. It's no longer necessary to  
        burn valuable development time learning a  
        complicated system of utility classes only to  
        discover later that the system didn't  
        anticipate all of your needs.  
      </p>  
    </div>  
  </div>  
 

Inline styles are back
with a ton of new tricks…

Static Variables

Easily propagate design tokens such as color palette, spacing presets, and typography through "static variables". References to these named constants are resolved at build time, offering wider browser compatibility than CSS variables. (CSS variables still work too!)

<span class="color:$red95;">
  Awesome!
</span>
Awesome! 
<span class="font:$h1; line-height:1;!">
  Awesome!
</span>
Awesome!

Media Queries

Create responsive style rules without the context switch of an external style sheet. Define media queries in your Hacss configuration and reference them by a simple alias.

Current breakpoint:
<strong class="display:none; @sm{display:inline}">small</strong>
<strong class="display:none; @md{display:inline}">medium</strong>
<strong class="display:none; @lg{display:inline}">large</strong>
Current breakpoint: small medium large

Context

Apply a style conditionally based on the existence and/or state of an ancestor, parent, adjacent sibling, or general sibling.

<label>
  <input type="checkbox" checked>
  <span class=":checked+{text-decoration:line-through}">
    Increase my agility.
  </span>
</label>

Pseudo-classes

Conditionally apply a style rule using virtually any combination of pseudo-classes available in native CSS. While atomic CSS frameworks often provide basic states like hover, focus, active, and disabled, Hacss is the only comparable option that provides access to :nth-child and :not selectors, among many others.

<button class=":hover{transform:scale(1.2)} transition:transform__150ms;">
  Awesome!
</button>

Pseudo-elements

Use pseudo-elements to target specific parts of an element or to create presentational elements that exist outside of the DOM tree.

<p class="::first-letter{color:$blue50} font:$h4; margin:0;">
  Awesome!
</p>

Awesome!

Post-processing

Transform the static style sheet produced by Hacss with PostCSS, whose various plugins offer new CSS features, performance optimizations, compatibility fixes, and much more.

<div class="lost-utility:clearfix;">
  <div class="lost-column:1/3; background:$gray40; height:$len64;"></div>
  <div class="lost-column:1/3; background:$gray40; height:$len64;"></div>
  <div class="lost-column:1/3; background:$gray40; height:$len64;"></div>
</div>