FD

├── test └── test.js ├── docs └── index.html ├── src ├── components │ ├── _all.styl │ └── RootContainer.js ├── elements │ ├── _all.styl │ ├── button.styl │ └── Button.js ├── base │ ├── _all.styl │ ├── base.styl │ └── variables.styl ├── fluent-design.styl └── fluent-design.js ├── .gitignore ├── README.md ├── .babelrc ├── index.html ├── .editorconfig ├── dev-server.js ├── LICENSE ├── webpack.config.js ├── package.json └── gulpfile.js /test/test.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/_all.styl: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib -------------------------------------------------------------------------------- /src/elements/_all.styl: -------------------------------------------------------------------------------- 1 | @import "button" -------------------------------------------------------------------------------- /src/base/_all.styl: -------------------------------------------------------------------------------- 1 | @import "base" 2 | 3 | @import "variables" -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Fluent 2 | A CSS framework based on Fluent Design System By Microsoft 3 | -------------------------------------------------------------------------------- /src/fluent-design.styl: -------------------------------------------------------------------------------- 1 | @import "./base/_all" 2 | 3 | @import "./components/_all" 4 | 5 | @import "./elements/_all" 6 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "react-hot-loader/babel" 9 | ] 10 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FD 5 | 6 | 7 | 8 |

9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/elements/button.styl: -------------------------------------------------------------------------------- 1 | .fd-button 2 | background: $BaseLow 3 | color: #000000 4 | font-size: 15px 5 | border: none 6 | text-align: center 7 | text-decoration: none 8 | display: inline-block 9 | padding: 8px 25px; 10 | cursor: pointer; -------------------------------------------------------------------------------- /src/base/base.styl: -------------------------------------------------------------------------------- 1 | /**** responsiveness 2 | ** small(phones): 320x569, 360x640, 480x854 3 | ** small breaking point: 640px or less than 640px 4 | ** medium(phablets, tablets, TVs): 960x540, 1024x640 5 | ** medium breaking point: 641px to 1007px 6 | ** large(PCs, laptops, Surface Hubs): 1366x768, 1920x1080 7 | ** large breaking point: 1008px or more than 1008px 8 | **/ -------------------------------------------------------------------------------- /src/elements/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import './button.styl'; 5 | import '../base/_all.styl' 6 | 7 | class Button extends React.Component { 8 | render() { 9 | return ( 10 | 11 | ) 12 | } 13 | } 14 | 15 | export default Button -------------------------------------------------------------------------------- /src/components/RootContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Button from '../elements/Button' 4 | 5 | class RootContainer extends React.Component { 6 | render() { 7 | return ( 8 |

9 |

11 | ) 12 | } 13 | } 14 | 15 | export default RootContainer -------------------------------------------------------------------------------- /src/base/variables.styl: -------------------------------------------------------------------------------- 1 | /** Color 2 | **** Light Theme 3 | **/ 4 | //Base 5 | BaseLow = #CCCCCC 6 | BaseMediumLow = #999999 7 | BaseMedium = #666666 8 | BaseMediumHigh = #333333 9 | BaseHigh = #000000 10 | //Backup 11 | // AltLow = #33FFFF 12 | // AltMediumLow = #FFFF66 13 | // AltMedium = #FFFF99 14 | // AltMediumHigh = #FFFFCC 15 | // AltHigh = #FFFFFF 16 | //List 17 | ListLow = #E6E6E6 18 | ListMedium = #CCCCCC 19 | ListAccentLow = #99C9EF 20 | ListAccentMedium = #66AEE7 21 | ListAccentHight = #4DA1E3 22 | 23 | -------------------------------------------------------------------------------- /dev-server.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const WebpackDevServer = require('webpack-dev-server'); 3 | const config = require('./webpack.config'); 4 | new WebpackDevServer(webpack(config), { 5 | // contentBase: "./", 6 | publicPath: config.output.publicPath, 7 | hot: true, 8 | stats: { 9 | colors: true 10 | }, 11 | noInfo: false, 12 | historyApiFallback: true 13 | }).listen(2333, '127.0.0.1', function (err, result) { 14 | if (err) { 15 | console.log(err); 16 | } 17 | console.log('Listening at localhost:2333'); 18 | console.log('Pleae wait'); 19 | 20 | }); -------------------------------------------------------------------------------- /src/fluent-design.js: -------------------------------------------------------------------------------- 1 | import 'react-hot-loader/patch'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import { AppContainer } from 'react-hot-loader'; 5 | import RootContainer from './components/RootContainer'; 6 | 7 | ReactDOM.render(( 8 | 9 | 10 | 11 | ), document.getElementById('root')); 12 | 13 | if (module.hot) { 14 | module.hot.accept('./components/RootContainer', () => { 15 | const NextRootContainer = require('./components/RootContainer').default; 16 | 17 | ReactDOM.render(( 18 | 19 | 20 | 21 | ), document.getElementById('root')); 22 | }) 23 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Elven 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: { 6 | index: [ 7 | 'webpack-dev-server/client?http://localhost:2333', 8 | 'webpack/hot/only-dev-server', 9 | './src/fluent-design.js' 10 | ] 11 | }, 12 | output: { 13 | filename: 'bundle.js', 14 | path: path.resolve(__dirname, 'lib'), 15 | publicPath: '/lib' 16 | }, 17 | module: { 18 | loaders: [ 19 | { 20 | test: /\.css$/, 21 | loader: 'style-loader!css-loader' 22 | }, 23 | // { 24 | // test: /\.js$/, 25 | // loader: 'babel-loader' 26 | // }, 27 | { 28 | test: /\.js?$/, 29 | loaders: ['babel-loader'], 30 | include: path.join(__dirname, 'src') 31 | }, 32 | { 33 | test: /\.styl$/, 34 | loader: 'style-loader!css-loader!stylus-loader' 35 | } 36 | ] 37 | }, 38 | resolve: { 39 | extensions: ['.js', '.json', '.styl'] 40 | }, 41 | plugins: [ 42 | new webpack.HotModuleReplacementPlugin(), 43 | new webpack.NoEmitOnErrorsPlugin() 44 | ] 45 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fluent-design", 3 | "version": "0.0.1", 4 | "description": "a ui framework based on fluent design system", 5 | "main": "lib/css/fluent-design.css", 6 | "scripts": { 7 | "start": "gulp watch", 8 | "build": "gulp", 9 | "dev": "node dev-server.js", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/FluentFramework/fluent-design.git" 15 | }, 16 | "keywords": [ 17 | "fluent" 18 | ], 19 | "author": "fuling,kokororin,kirainmoe,cdog", 20 | "organization": "MoeFront Studio", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/FluentFramework/fluent-ui/issues" 24 | }, 25 | "homepage": "https://github.com/FluentFramework/fluent-ui#readme", 26 | "dependencies": { 27 | "react": "^15.5.4", 28 | "react-dom": "^15.5.4" 29 | }, 30 | "devDependencies": { 31 | "babel-core": "^6.24.1", 32 | "babel-loader": "^7.0.0", 33 | "babel-preset-es2015": "^6.24.1", 34 | "babel-preset-react": "^6.24.1", 35 | "babel-preset-stage-0": "^6.24.1", 36 | "css-loader": "^0.28.4", 37 | "gulp": "^3.9.1", 38 | "gulp-header": "^1.8.8", 39 | "gulp-rename": "^1.2.2", 40 | "gulp-stylus": "^2.6.0", 41 | "gulp-uglifycss": "^1.0.8", 42 | "react-hot-loader": "^3.0.0-beta.7", 43 | "run-sequence": "^1.2.2", 44 | "style-loader": "^0.18.1", 45 | "stylus": "^0.54.5", 46 | "stylus-loader": "^3.0.1", 47 | "webpack": "^2.6.1", 48 | "webpack-dev-server": "^2.4.5" 49 | } 50 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | <<<<<<< HEAD 2 | const gulp = require('gulp'); 3 | const stylus = require('gulp-stylus'); 4 | 5 | gulp.task('to-css', function () { 6 | return gulp.src('./src/fluent-design.styl') 7 | .pipe(stylus()) 8 | .pipe(gulp.dest('./lib/css')); 9 | }); 10 | gulp.task('watch', function () { 11 | // watch source 12 | gulp.watch('./src/**/*.styl', ['to-css']) 13 | }); 14 | ======= 15 | const fs = require('fs'); 16 | const gulp = require('gulp'); 17 | const header = require('gulp-header'); 18 | const stylus = require('gulp-stylus'); 19 | const rename = require('gulp-rename'); 20 | const uglifycss = require('gulp-uglifycss'); 21 | const runSequence = require('run-sequence'); 22 | const pkg = require('./package.json'); 23 | 24 | const opts = { 25 | // Task options 26 | destPath: './lib/css', 27 | 28 | minRename: { 29 | suffix: '.min' 30 | }, 31 | 32 | banner: [ 33 | '/*!', 34 | ' * <%= name %> - <%= homepage %>', 35 | ' * Version - <%= version %>', 36 | ' * Licensed under the MIT license - http://opensource.org/licenses/MIT', 37 | ' *', 38 | ' * Copyright (c) <%= new Date().getFullYear() %> <%= organization %>', 39 | ' */\n\n' 40 | ].join('\n') 41 | }; 42 | 43 | gulp.task('default', function () { 44 | runSequence('to-css', 'add-header'); 45 | }); 46 | 47 | gulp.task('to-css', function () { 48 | return gulp.src('./src/fluent-design.styl') 49 | .pipe(stylus()) 50 | .pipe(gulp.dest(opts.destPath)) 51 | .pipe(rename(opts.minRename)) 52 | .pipe(uglifycss()) 53 | .pipe(gulp.dest(opts.destPath)); 54 | }); 55 | 56 | gulp.task('watch', function () { 57 | // watch source 58 | gulp.watch('./src/**/*.styl', ['to-css']) 59 | }); 60 | 61 | gulp.task('add-header', function () { 62 | return gulp.src(`${opts.destPath}/*.css`) 63 | .pipe(header(opts.banner, pkg)) 64 | .pipe(gulp.dest(opts.destPath)); 65 | }); 66 | >>>>>>> dev 67 | --------------------------------------------------------------------------------