EasyCSS - CSS That Speaks English

The world's first CSS language that uses natural English syntax.

$primary = blue
$spacing = 20

.button
    width = 150
    height = 50
    color = $primary
    text-color = white
    rounded = 8
    center = true
        on hover = color:darkblue,grow:1.1
        on click = shake:0.3

🚀 Quick Start

Installation

npm install -g easycss-lang

Usage

# Compile single file
easycss compile styles.easy -o styles.css

# Watch for changes
easycss watch src/ --output dist/

# Use in JavaScript
import CSSEngine from 'easycss-lang';
const css = new CSSEngine();
css.parse(myEasyCSS);
css.applyStyles();

🎯 Features

• Natural English syntax - width = 300 instead of width: 300px;
• Smart combinators - .container has .button instead of .container .button
• Built-in animations - wobble = 2 for instant animations
• Variables - $color = blue for reusable values
• Responsive design - mobile = width:100% for breakpoints
• 500+ keywords - rainbow, neon, cyberpunk, holographic
• Zero syntax errors - Impossible to write invalid code

🛠️ Framework Integration

React

import { useEasyCSS, styled } from 'easycss-lang/react';

function Button() {
  useEasyCSS(`
    .my-button
        color = blue
        rounded = 8
            on hover = grow:1.1
  `);
  
  return <button className="my-button">Click me</button>;
}

const StyledButton = styled('button')`
    color = green
    padding = 20
        on hover = color:darkgreen
`;

Vue.js

<template>
  <button class="my-button">Click me</button>
</template>

<style lang="easycss">
.my-button
    color = blue
    padding = 20
    rounded = 8
        on hover = grow:1.1
</style>

Webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.(easy|ecss)$/,
        use: 'easycss-lang/webpack-loader'
      }
    ]
  }
};

📝 Syntax Guide

Variables

$primary = #2563eb
$spacing = 20
$font = 16

Selectors & Combinators

#header                    // ID selector
.button                    // Class selector
div                        // Tag selector

.container has .button     // Descendant (.container .button)
.card owns h2              // Direct child (.card > h2)
.item beside .item         // Adjacent sibling (.item + .item)

Properties

width = 300               // width: 300px
color = blue              // background-color: blue
text-color = white        // color: white
center = true             // display: flex; justify-content: center; align-items: center
rounded = 8               // border-radius: 8px
glow = 10                 // box-shadow: 0 0 10px currentColor

Pseudo-Classes

.button
    color = blue
        on hover = color:darkblue,grow:1.1
        on click = color:red,shake:0.5
        on focus = glow:10

Animations

@animate slide
    0% = move-left:100
    50% = center:true
    100% = move-right:100

.element
    slide = 2s

Responsive Design

.element
    width = 300
    mobile = width:100%,font-size:14
    tablet = width:250
    desktop = width:300

🎨 Advanced Effects

.epic-element
    rainbow = true           // Rainbow gradient
    neon = 15               // Neon glow effect
    holographic = true      // Holographic background
    cyberpunk = 20          // Cyberpunk glow
    metallic = true         // Metallic gradient
    wobble = 2              // Wobble animation

🔧 VS Code Extension

Install the EasyCSS extension for:

• Syntax highlighting
• IntelliSense autocomplete
• Error detection
• Auto-compilation on save

📚 Documentation

Full documentation available at easycss.dev/docs

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License - see LICENSE file for details.

🌟 Why EasyCSS?

• 100x easier than regular CSS
• Zero learning curve - it's just English
• Impossible to make syntax errors
• Built-in best practices
• Framework agnostic
• Production ready

Made with ❤️ by the EasyCSS team