CSS library

.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    'eslint:recommended'
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
-}

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Ryo Kenrie Wongso
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,31 +1,13 @@
 # Yuika
 
-> A unified design system and Vue component library for developing applications based on
+> A unified design system and CSS library for developing applications based on it.
-> the design system
+
 ## Project setup
 ```
 yarn install
 ```
 
-### Compiles and hot-reloads for development
+### Compiles 
-```
-yarn run serve
-```
-
-### Compiles and minifies for production
 ```
 yarn run build
 ```
-
-### Run your tests
-```
-yarn run test
-```
-
-### Lints and fixes files
-```
-yarn run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

docs/.vuepress/config.js

@@ -1,27 +0,0 @@
-const glob = require('glob');
-const autoprefixer = require('autoprefixer');
-const tailwindcss = require('tailwindcss');
-
-let paths = function(path) {
-    return glob.sync('docs'+path+'/**/*.md').map(f => f.replace("docs","").replace("README.md","")); 
-}
-
-let links = function(path) {
-    return [ path+'/', ...paths(path+'/*') ]
-}
-module.exports = {
-  title: "Yuika documentation",
-  description: "",
-  themeConfig: {
-    sidebar: [
-      { title: 'Yuika', path: '/', },
-      { title: 'Components', path: '/components/', children: links('/components') },
-    ]
-  },
-  postcss: {
-    plugins: [
-      tailwindcss,
-      autoprefixer,      
-    ]
-  }
-};

docs/.vuepress/enhanceApp.js

@@ -1,17 +0,0 @@
-import { Header, HeaderLeft, HeaderMiddle, HeaderRight, NavigationBar, NavigationItem } from '../../src/components';
-import '../../src/assets/css/tailwind.css';
-
-export default ({
-  Vue, // the version of Vue being used in the VuePress app
-  options, // the options for the root Vue instance
-  router, // the router instance for the app
-  siteData // site metadata
-}) => {
-  Vue.component('Header', Header);
-  Vue.component('HeaderLeft', HeaderLeft);
-  Vue.component('HeaderMiddle', HeaderMiddle);
-  Vue.component('HeaderRight', HeaderRight);
-  Vue.component('NavigationBar', NavigationBar);
-  Vue.component('NavigationItem', NavigationItem);
-}
-

docs/README.md

@@ -1 +0,0 @@
-# Yuika

docs/components/Header/README.md

@@ -1,10 +0,0 @@
-# Header
-<Header>
-  <HeaderLeft>
-  </HeaderLeft>
-  <HeaderMiddle>
-    <p>Yuika Mitsumine</p>
-  </HeaderMiddle>
-  <HeaderRight>
-  </HeaderRight>
-</Header>

docs/components/Navigation/README.md

@@ -1,15 +0,0 @@
-# Navigation
-<Header>
-  <HeaderLeft>
-  </HeaderLeft>
-  <HeaderMiddle>
-    <p>Yuika Mitsumine</p>
-  </HeaderMiddle>
-  <HeaderRight>
-    <NavigationBar>
-      <NavigationItem>
-        <a href="/">Home</a>
-      </NavigationItem>
-    </NavigationBar>
-  </HeaderRight>
-</Header>

docs/components/README.md

@@ -1,4 +0,0 @@
-# Components
-
-* [Header](header)
-* [Navigation](navigation)

gulpfile.js

@@ -0,0 +1,62 @@
+
+const {series, watch, src, dest, parallel} = require('gulp');
+
+const postcss = require('gulp-postcss')
+const livereload = require('gulp-livereload');
+const zip = require('gulp-zip');
+const concat = require('gulp-concat');
+const uglify = require('gulp-uglify');
+const cleancss = require('gulp-clean-css');
+
+const purgecss = require('@fullhuman/postcss-purgecss')({
+
+  // Specify the paths to all of the template files in your project 
+  content: [
+    './**/*.html',
+    './src/css/**/*.css', // This file defines required styles for the Ghost editor
+    // etc.
+  ],
+
+  // Include any special characters you're using in this regular expression
+  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+})
+
+function serve(done) {
+    livereload.listen();
+    done();
+}
+
+function html() { 
+    return src(['./**/*.html'])
+        .pipe(livereload());
+}
+function css () {
+
+  return src('src/css/yuika.css')
+    // ...
+    .pipe(concat('yuika.css'))
+    .pipe(postcss([
+      // ...
+      require('postcss-import'),
+      require('tailwindcss'),
+      require('autoprefixer'),
+      ...process.env.NODE_ENV === 'production' ? [purgecss] : []
+      // ...
+    ]))
+    // ...
+    .pipe(cleancss({compatibility: 'ie8'}))
+    .pipe(dest('dist/'))
+    .pipe(livereload())
+}
+
+const cssWatcher = () => watch('src/css/**', css);
+const htmlWatcher = () => watch(['./**/*.html'], html);
+const watcher = parallel(cssWatcher, htmlWatcher);
+const build = css;
+const dev = series(build, serve, watcher);
+
+
+exports.build = build;
+exports.dev = dev;
+exports.default = build;
+

package.json

@@ -1,50 +1,29 @@
 {
     "name": "@mitsuminedamillora/yuika",
-  "version": "0.3.0",
+    "description": "A unified design system and a CSS components library for developing applications based on it",
-  "scripts": {
+    "version": "0.4.0",
-    "serve": "vue-cli-service serve",
+    "license": "MIT",
-    "build": "vue-cli-service build",
+    "author": {
-    "lint": "vue-cli-service lint",
+        "email": "developer@damillora.com"
-    "build-lib": "vue-cli-service build --target lib --name yuika src/main.js",
+    },
-    "docs:build": "vuepress build docs",
+    "scripts": {
-    "docs:dev": "vuepress dev docs"
+      "build": "gulp build"
     },
-  "main": "./dist/yuika.common.js",
     "dependencies": {
-    "@fullhuman/postcss-purgecss": "^1.3.0",
+        "gulp": "^4.0.2",
-    "core-js": "^3.4.4",
+        "gulp-clean-css": "^4.2.0",
-    "glob": "^7.1.6",
+        "gulp-concat": "^2.6.1",
-    "tailwindcss": "^1.1.4",
+        "gulp-livereload": "^4.0.2",
+        "gulp-postcss": "^8.0.0",
+        "gulp-uglify": "^3.0.2",
+        "gulp-zip": "^5.0.1",
+        "postcss-font-awesome": "^0.4.0",
+        "postcss-import": "^12.0.1",
+        "tailwindcss": "^1.1.3",
         "tailwindcss-transitions": "^2.1.0",
-    "vue": "^2.6.10"
+        "typeface-exo-2": "^0.0.72"
     },
     "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.0",
+        "@fullhuman/postcss-purgecss": "^1.3.0"
-    "@vue/cli-plugin-eslint": "^4.1.2",
-    "@vue/cli-service": "^4.1.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10",
-    "vuepress": "^1.2.0"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
     }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
-  "license": "MIT"
 }

postcss.config.js

@@ -1,27 +0,0 @@
-const autoprefixer = require('autoprefixer');
-const tailwindcss = require('tailwindcss');
-const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
-
-const purgecss = postcssPurgecss({
-  // Specify the paths to all of the template files in your project.
-  content: [
-    './public/**/*.html',
-    './src/**/*.vue',
-  ],
-  // Include any special characters you're using in this regular expression.
-  // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
-  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
-  // Whitelist auto generated classes for transitions and router links.
-  // From: https://github.com/ky-is/vue-cli-plugin-tailwind
-  whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/],
-});
-
-module.exports = {
-  plugins: [
-    tailwindcss,
-    autoprefixer,
-    ...process.env.NODE_ENV === 'production'
-      ? [purgecss]
-      : [],
-  ],
-};

public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>yuika</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but yuika doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/assets/css/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

src/components/Header/Header.vue

@@ -1,18 +0,0 @@
-<template>
-<header class="yuika-header">
-  <slot></slot>
-</header>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.yuika-header {
-    @apply h-16 w-full z-10 flex flex-row justify-start items-center bg-yuika-blue-500 text-white;
-
-}
-</style>

src/components/Header/HeaderLeft.vue

@@ -1,17 +0,0 @@
-<template>
-<div class="yuika-header-left">
-  <slot></slot>
-</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.yuika-header-left {
-  @apply ml-4;
-}
-</style>

src/components/Header/HeaderMiddle.vue

@@ -1,17 +0,0 @@
-<template>
-<div class="yuika-header-middle">
-  <slot></slot>
-</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.yuika-header-middle {
-  @apply flex-grow;
-}
-</style>

src/components/Header/HeaderRight.vue

@@ -1,17 +0,0 @@
-<template>
-<div class="yuika-header-right">
-  <slot></slot>
-</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.yuika-header-right {
-  @apply mr-4;
-}
-</style>

src/components/Header/index.js

@@ -1,11 +0,0 @@
-import Header from "./Header";
-import HeaderLeft from "./HeaderLeft";
-import HeaderMiddle from "./HeaderMiddle";
-import HeaderRight from "./HeaderRight";
-
-export {
-  Header,
-  HeaderLeft,
-  HeaderMiddle,
-  HeaderRight
-}

src/components/Navigation/NavigationBar.vue

@@ -1,20 +0,0 @@
-<template>
-<ul class="yuika-nav-bar">
-  <slot></slot>
-</ul>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.yuika-nav-bar {
-  @apply w-full flex flex-row;
-}
-.yuika-nav-bar .yuika-nav-item a {
-  @apply text-white no-underline;
-}
-</style>

src/components/Navigation/NavigationItem.vue

@@ -1,17 +0,0 @@
-<template>
-<li class="yuika-nav-item">
-  <slot></slot>
-</li>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.yuika-nav-item {
-  @apply mx-2 list-none;
-}
-</style>

src/components/Navigation/index.js

@@ -1,7 +0,0 @@
-import NavigationBar from "./NavigationBar";
-import NavigationItem from "./NavigationItem";
-
-export {
-  NavigationBar,
-  NavigationItem,
-}

src/components/index.js

@@ -1,10 +0,0 @@
-import { Header, HeaderLeft, HeaderMiddle, HeaderRight } from './Header';
-import { NavigationBar, NavigationItem } from './Navigation';
-export {
-  Header,
-  HeaderLeft,
-  HeaderMiddle,
-  HeaderRight,
-  NavigationBar,
-  NavigationItem,
-}

src/css/components/header.css

@@ -0,0 +1,16 @@
+.yuika-header {
+    @apply h-16 w-full z-10 flex flex-row justify-start items-center bg-yuika-blue-500 text-white;
+
+}
+
+.yuika-header-left {
+  @apply ml-4;
+}
+
+.yuika-header-middle {
+  @apply flex-grow;
+}
+
+.yuika-header-right {
+  @apply mr-4;
+}

src/css/components/navigation-bar.css

@@ -0,0 +1,11 @@
+.yuika-nav-bar {
+  @apply w-full flex flex-row;
+}
+
+.yuika-nav-bar .yuika-nav-item {
+  @apply mx-2 list-none;
+}
+.yuika-nav-bar .yuika-nav-item a {
+  @apply text-white no-underline;
+}
+

src/css/yuika.css

@@ -0,0 +1,4 @@
+
+/* Components */
+@import 'components/header.css';
+@import 'components/navigation-bar.css';

src/main.js

@@ -1,3 +0,0 @@
-
-export * from './components';
-