Mitsumine/Yuika
Mitsumine/Yuika
1
0
Fork 0
Code Issues Pull Requests Releases 5 Wiki Activity

CSS library

Browse Source
This commit is contained in:
Damillora 2020-03-03 09:54:54 +07:00
parent 2873710440
commit 41339b4f10
31 changed files with 1275 additions and 7500 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.eslintrc.js
View File

@ -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'
}
}

21
LICENSE
View File

@ -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.

24
README.md
View File

@ -1,31 +1,13 @@
# Yuika
> A unified design system and Vue component library for developing applications based on
> the design system
> A unified design system and CSS library for developing applications based on it.
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn run serve
```
### Compiles and minifies for production
### Compiles
```
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/).

5
babel.config.js
View File

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

27
docs/.vuepress/config.js
View File

@ -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,
]
}
};

17
docs/.vuepress/enhanceApp.js
View File

@ -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);
}

1
docs/README.md
View File

@ -1 +0,0 @@
# Yuika

10
docs/components/Header/README.md
View File

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

15
docs/components/Navigation/README.md
View File

@ -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>

4
docs/components/README.md
View File

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

62
gulpfile.js Normal file
View File

@ -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;

61
package.json
View File

@ -1,50 +1,29 @@
{
"name": "@mitsuminedamillora/yuika",
"version": "0.3.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build-lib": "vue-cli-service build --target lib --name yuika src/main.js",
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs"
"description": "A unified design system and a CSS components library for developing applications based on it",
"version": "0.4.0",
"license": "MIT",
"author": {
"email": "developer@damillora.com"
},
"scripts": {
"build": "gulp build"
},
"main": "./dist/yuika.common.js",
"dependencies": {
"@fullhuman/postcss-purgecss": "^1.3.0",
"core-js": "^3.4.4",
"glob": "^7.1.6",
"tailwindcss": "^1.1.4",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"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",
"@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"
"@fullhuman/postcss-purgecss": "^1.3.0"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"license": "MIT"
}

27
postcss.config.js
View File

@ -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]
: [],
],
};

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html
View File

@ -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>

3
src/assets/css/tailwind.css
View File

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

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

18
src/components/Header/Header.vue
View File

@ -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>

17
src/components/Header/HeaderLeft.vue
View File

@ -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>

17
src/components/Header/HeaderMiddle.vue
View File

@ -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>

17
src/components/Header/HeaderRight.vue
View File

@ -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>

11
src/components/Header/index.js
View File

@ -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
}

20
src/components/Navigation/NavigationBar.vue
View File

@ -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>

17
src/components/Navigation/NavigationItem.vue
View File

@ -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>

7
src/components/Navigation/index.js
View File

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

10
src/components/index.js
View File

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

16
src/css/components/header.css Normal file
View File

@ -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;
}

11
src/css/components/navigation-bar.css Normal file
View File

@ -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;
}

4
src/css/yuika.css Normal file
View File

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

3
src/main.js
View File

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

8286
yarn.lock
View File

File diff suppressed because it is too large Load Diff