https://github.com/claudiusayadi/ketocss

The #1 variable-first atomic design framework! This is my personal CSS Framework or project starter kit based on SASS (SCSS) and CSS Variables.
https://github.com/claudiusayadi/ketocss

adun-css adun-studio css-framework cssnano ecommerce modern-css-features postcss postcss-preset-env postcss-sass responsive-design sass sass-starterkit scss service-based

Last synced: about 1 month ago
JSON representation

The #1 variable-first atomic design framework! This is my personal CSS Framework or project starter kit based on SASS (SCSS) and CSS Variables.

• Host: GitHub
• URL: https://github.com/claudiusayadi/ketocss
• Owner: ClaudiusAyadi
• Created: 2023-08-23T14:40:27.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-18T07:12:54.000Z (about 1 year ago)
• Last Synced: 2024-11-08T06:51:44.623Z (3 months ago)
• Topics: adun-css, adun-studio, css-framework, cssnano, ecommerce, modern-css-features, postcss, postcss-preset-env, postcss-sass, responsive-design, sass, sass-starterkit, scss, service-based
• Language: SCSS
• Homepage:
• Size: 1.84 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# KetoCSS

**_The super-performant, variable-based, mobile-first, stack-agnostic (refactoring towards React since its my main stack now), lean atomic design framework!_**

---

This is my personal CSS Framework or project starter kit based on SASS (SCSS) and CSS Variables. This Framework is heavily inspired by `ACSS` ([Automatic CSS by Kevin Geary](https://automaticcss.com/)). It is the second version of my former SASS Starter Template. It simply shows my learning growth. So, it will always be a WIP (work-in-progress).

This framework is meant to express simplicity and speed, helping devs to quickly start designing their apps in no time.

If you are here, I would love your contributions no matter how little. The goal is to have a flexible CSS Framework that gives us needed utility classes without clogging up our HTML like TailwindCSS, and still allows unlimited freedom to use custom BEM classes powered by the keto-variables.

### FEATURES

The framework includes classes for common CSS rules (e.g. grids, flex, column-counts, buttons, font-related classes, etc.), and tons of readily available CSS variables for nearly every property you would need in your projects - global (root) and local (element, e.g. buttons) scoped.

Best of it, KetoCSS automatically generates all your color tints, shades, and transparent variants, and gives you a well-balanced theme to work with.

**This is a work in progress. If you notice any bug, please let me know**

**All suggestion and feature requests are welcomed too.**

## GETTING STARTED

1. Clone the repo or download the zip file and extract it.

2. Copy the `package.json` and the `postcss.config.cjs` to your project root.

3. Move the `keto` folder into your project `/src` and delete everything else here.

4. Install all dependencies:

```bash

yarn

```

5. Customize and make it yours:

You have two files to edit here _(These are the only files you should modify)_.

```bash

edit the variables in _global.scss

edit _fonts.scss and copy your fonts into the fonts folder

import "./keto/keto.scss" into your main.jsx or layout.jsx

```

6. Start up your project:

```bash

yarn dev

```

7. Build away 🎉

PostCSS handles everything and you don't have to do any extra configuration.

_You can use `npm or pnpm` too._




**NOTE: PurgeCSS ensures that only used classes are compiled in the final build.**

**I assume you use Vite.js for all your React project. The setup is the same for Next.js**

**Always check back for the newest updates. I'm working on creating React components based on the framework that anyone can easily copy and use.**

**Want to contribute? Let me know, please.**