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 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 tailwindcss init

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

/* ./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:

touch .src/prerender/tailwind.css

paste the following

/* ./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

/* 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

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

Start developing

run with

yarn dev

5 Adding the submodule

In a fresh Project do:

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