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