# Sugar UI

A component framework designed to be easy to develop, easy to maintain and deliver core features for your project. Themedriven design using Tailwind and custom stuff to rapid-develop websites

## Clone Project

git clone https://github.com/ZUCKERSALZUNDPFEFFER/sugar-ui.git --recursive

## Setup

`yarn install`
done.

## Usage

```
yarn sugarui:dev // for development
yarn sugarui:build // for build
```

# VIA NPM IMPORT

proceed as followed

## 1. add packages via yarn

```yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest concurrently@latest @zuckersalzundpfeffer/sugar-ui
```

## 2. create tailwind config

> more on tailwind std install procedure: (https://tailwindcss.com/docs/installation)

#### create tailwind.config.js

```npx
npx tailwindcss init
```

this creates ./tailwind.config.js -> paste the following:

```js
/* ./tailwind.config.js */

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require("@zuckersalzundpfeffer/sugar-ui")],
  zspSugarUi: {
    theme: {
      colors: {
        primary: "#ffcc33",
        secondary: "#223344",
        accent: "#aabbbb",
        neutral: "#ffcc33",
        info: "",
        warning: "",
        error: "",
        "base-100": "",
        "base-200": "",
        "base-300": "",
        "base-content": "",
      },
      radius: {
        sm: "0.25rem",
        md: "0.5rem",
        lg: "0.75rem",
        xl: "2rem",
      },
      typography: {
        fonts: {
          headline:
            "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
          body:
            "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
          code:
            "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
          display: "'Press Start 2P',cursive",
        },
        fontSizes: {
          base: "16px",
          h1: "4rem",
          h2: "2rem",
          h3: "1.85rem",
          h4: "1.5rem",
          h5: "1.25rem",
          h6: "1.15rem",
        },
        lineHeights: {
          tight: 0.85,
          normal: 1,
          loose: 1.5,
          wide: 2,
          extrawide: 2,
        },
      },
    },
  },
};
```

#### Create Std Tailwind.css file

create the pre render css file in separeted folder:

```yarn
touch .src/prerender/tailwind.css
```

paste the following

```postcss
/* ./src/prerender/tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 3 Add Setup to package.json

add script to package.json
Note: the input css file ".src/prerender/tailwind.css

```json
/* package.json -> copy only the 3 bottom scripts objects */

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "style:generate": "npx tailwindcss -i ./src/prerender/tailwind.css -o ./src/assets/css/tailwind.css --watch",
  "style:watch": "yarn style:generate --watch",
  "dev": "concurrently --raw \"yarn serve\" \"yarn style:watch\""
},
```

## 4 Import Tailwind

Add the speciied output file to your main.js or whereelse you want to load it

```js
/* .src/main.js */
import "./assets/css/tailwind.css";
```

# Start developing

run with

```
yarn dev
```

## 5 Adding the submodule

In a fresh Project do:

```bash
git submodule update --init
```

## Building components

create css file inside **src/components/YourFilename.css**
use sui classes with @apply rule like so: @apply sui-padding-left-xs;
include file inside **src/components/index.js**

dont forget to yarn sugarui:build before checking if it works