https://github.com/econify/moonshine-css

🥃 High-proof atomic CSS framework
https://github.com/econify/moonshine-css

atomic-css css-in-js rust-lang styled-components styled-system utility-classes

Last synced: 3 months ago
JSON representation

🥃 High-proof atomic CSS framework

• Host: GitHub
• URL: https://github.com/econify/moonshine-css
• Owner: Econify
• License: isc
• Created: 2022-05-13T22:19:18.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-27T17:04:16.000Z (over 2 years ago)
• Last Synced: 2024-10-03T16:49:37.229Z (4 months ago)
• Topics: atomic-css, css-in-js, rust-lang, styled-components, styled-system, utility-classes
• Language: Rust
• Homepage:
• Size: 784 KB
• Stars: 27
• Watchers: 6
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Moonshine CSS

![](./docs/logo.svg)

## Features

- 🥃 Minimal and simple atomic CSS framework

- ⚗️ 100% customizable - build your own CSS framework

- 🦀 Blazing fast generator written in Rust

- 🐜 Tiny `1.7 kB` runtime

- ⚛️ CSS-in-JS library for React

## Install

```bash

npm install --save @econify/moonshine-css

yarn add @econify/moonshine-css

```

## Generate Styles

Create a `.moonshinerc` file in your project root.

by running

```

npx distill --init

```

or by creating a file manually:

```json

{

  "options": {

    "atomStyle": "classAttribute",

    "breakpointModifierStyle": "suffix",

    "breakpointModifierSeperator": "-",

    "breakpoints": {

      "sm": { "minWidth": "576px" },

      "md": { "minWidth": "768px", "maxWidth": "992px" },

      "lg": { "minWidth": "992px" }

    },

    "pseudoClasses": {

      "hov": ":hover"

    }

  },

  "designTokens": ["./atomic-design-tokens.yml"],

  "templates": [

    "./tachyons-border-box.yml",

    "./tachyons-colors.yml",

    "./tachyons-flex.yml",

    "./tachyons-spacing.yml"

  ],

  "output": {

    "cssVariables": "./dist/variables.css",

    "cssAtoms": "./dist/atoms.css",

    "jsonAtoms": "./dist/atoms.json"

  }

}

```

then run

```bash

npx distill --watch

```

## Usage

```js

import "atomic-styles.css";

```

```js

import { styled } from "@econify/moonshine-css";

const Button = styled.button(

  "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded",

  ({ isPrimary }) => isPrimary && "bg-primary text-white"

);

export default Demo() {

  return (

    


      Click me

    

  );

};

```


You can read more about the [runtime syntax here](./docs/RUNTIME.md).

## Acknowledgements

TBD