fevrcoding / wok Goto Github PK
View Code? Open in Web Editor NEWA loosely opinionated boilerplate for web development built with flexibility and productivity in mind.
License: Other
wok's People
Contributors
Stargazers
Watchers
wok's Issues
CSS improvements
A couple of tools to improve CSS workflow:
version bump options
When --type is not passed to gulp bump, task should asks which version to bump to.
Add a build option to disable $.notify
Sometimes it could be nice to disable the notifications. It would be cool if we had an option in properties.js (or similar) to shut it up!
Could send a pull request (soon™) if you like the idea!
Add flexbox grid
Forked a SCSS flexbox-grid from http://flexboxgrid.com/ 's issues.
It would be cool to add it to the base styles!
I fixed names to be injectable in wok without actually breaking anything and to use wok's breakpoints!
(Though it could need a check!)
// containers
.l-flex-container,
.l-flex-container-fluid {
margin-right: auto;
margin-left: auto;
}
.l-flex--container-fluid {
padding-right: 2rem;
padding-left: 2rem;
}
// rows
.l-flex-row {
display: flex;
flex-direction: row;
flex: 0 1 auto;
flex-wrap: wrap;
box-sizing: border-box;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.l-flex-row.reverse {
flex-direction: row-reverse;
}
.l-flex-col.reverse {
flex-direction: column-reverse;
}
// column helpers
@mixin col-offset($flex-column) {
margin-left: 100% / 12 * $flex-column;
}
@mixin col-numbered($flex-column) {
flex-basis: 100% / 12 * $flex-column;
max-width: 100% / 12 * $flex-column;
}
@mixin break($mq-key) {
@if $mq-key {
@include mq($mq-key) { @content; }
}
@else {
@content;
}
}
// build columns for each size is sizes map
@each $mq-size, $mq-key in $mq-breakpoints {
@include break($mq-key) {
%col-base-#{$mq-size} {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
%col-auto-#{$mq-size} {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.l-flex-col--#{$mq-size} {
@extend %col-base-#{$mq-size};
@extend %col-auto-#{$mq-size};
}
@for $num from 0 through 12 {
.l-flex-col--#{$mq-size}-offset-#{$num} {
@extend %col-base-#{$mq-size};
@include col-offset($num);
}
}
@for $num from 1 through 12 {
.l-flex-col--#{$mq-size}-#{$num} {
@extend %col-base-#{$mq-size};
@include col-numbered($num);
}
}
.start-#{$mq-size} {
justify-content: flex-start;
text-align: start;
}
.center-#{$mq-size} {
justify-content: center;
text-align: center;
}
.end-#{$mq-size} {
justify-content: flex-end;
text-align: end;
}
.top-#{$mq-size} {
align-items: flex-start;
}
.middle-#{$mq-size} {
align-items: center;
}
.bottom-#{$mq-size} {
align-items: flex-end;
}
.around-#{$mq-size} {
justify-content: space-around;
}
.between-#{$mq-size} {
justify-content: space-between;
}
.first-#{$mq-size} {
order: -1;
}
.last-#{$mq-size} {
order: 1;
}
}
}
Test gulp4
Let's test an upgrade to Gulp 4
v8 proposals
Hi,
I didn't looked into Wok for some time now, I'm sorry for that. I was thinking about improvements we could do to a future release (maybe version 8.x).
Modularity
I was thinking about splitting wok into multiple npm modules. One for each task maybe. This way we could have for example individual modules for Webpack, babel and sass, making them optional and allowing for more configurations. This is something I've already explored with Umeboshi and it works fine.
The only problem is to determine how we are going to orchestrate those modules. A configuration file or something like that?
Folder structure
I'd like to let people choose their folder structure, with the modular approach that should be possible but I cannot figure it out completely right now.
@kino90 @liqueflies what do you think?
Lots of "Warning: watch ENOSPC" warnings running watch task
Like that:
Running "watch" task
Waiting...Warning: watch ENOSPC
Remove paths.src.partials
We might remove this path in config since it seems it's unused.
scss bug
in _mixins @147 missing comma between selector
$selector: unquote("h#{$current-heading}, .h#{$current-heading}");
Typo in README.md
change:
Node.js >= 4.0.0 (we strongly succest to use something like nvm)
to:
Node.js >= 4.0.0 (we strongly suggest to use something like nvm)
Moving to Nunjucks
I was wondering if it's worth moving to Nunjucks since it's way more powerfull and ejs
Moving to Eslint
Moving from jscs and jshint ot eslint.
Eslint code sample:
{
"parser": "babel-eslint", // https://github.com/babel/babel-eslint
"env": { // http://eslint.org/docs/user-guide/configuring.html#specifying-environments
"browser": true, // browser global variables
"node": true // Node.js global variables and Node.js-specific rules
},
"ecmaFeatures": {
"arrowFunctions": true,
"blockBindings": true,
"classes": true,
"defaultParams": true,
"destructuring": true,
"forOf": true,
"generators": false,
"modules": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": false,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"spread": true,
"superInFunctions": true,
"templateStrings": true,
"jsx": false
},
"rules": {
/**
* Strict mode
*/
// babel inserts "use strict"; for us
"strict": [2, "never"], // http://eslint.org/docs/rules/strict
/**
* ES6
*/
"no-var": 0, // http://eslint.org/docs/rules/no-var
"prefer-const": 0, // http://eslint.org/docs/rules/prefer-const
/**
* Variables
*/
"no-shadow": 2, // http://eslint.org/docs/rules/no-shadow
"no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
"no-unused-vars": [2, { // http://eslint.org/docs/rules/no-unused-vars
"vars": "local",
"args": "after-used"
}],
"no-use-before-define": 2, // http://eslint.org/docs/rules/no-use-before-define
/**
* Possible errors
*/
"comma-dangle": [2, "never"], // http://eslint.org/docs/rules/comma-dangle
"no-cond-assign": [2, "always"], // http://eslint.org/docs/rules/no-cond-assign
"no-console": 1, // http://eslint.org/docs/rules/no-console
"no-debugger": 1, // http://eslint.org/docs/rules/no-debugger
"no-alert": 1, // http://eslint.org/docs/rules/no-alert
"no-constant-condition": 1, // http://eslint.org/docs/rules/no-constant-condition
"no-dupe-keys": 2, // http://eslint.org/docs/rules/no-dupe-keys
"no-duplicate-case": 2, // http://eslint.org/docs/rules/no-duplicate-case
"no-empty": 2, // http://eslint.org/docs/rules/no-empty
"no-ex-assign": 2, // http://eslint.org/docs/rules/no-ex-assign
"no-extra-boolean-cast": 0, // http://eslint.org/docs/rules/no-extra-boolean-cast
"no-extra-semi": 2, // http://eslint.org/docs/rules/no-extra-semi
"no-func-assign": 2, // http://eslint.org/docs/rules/no-func-assign
"no-inner-declarations": 2, // http://eslint.org/docs/rules/no-inner-declarations
"no-invalid-regexp": 2, // http://eslint.org/docs/rules/no-invalid-regexp
"no-irregular-whitespace": 2, // http://eslint.org/docs/rules/no-irregular-whitespace
"no-obj-calls": 2, // http://eslint.org/docs/rules/no-obj-calls
"no-sparse-arrays": 2, // http://eslint.org/docs/rules/no-sparse-arrays
"no-unreachable": 2, // http://eslint.org/docs/rules/no-unreachable
"use-isnan": 2, // http://eslint.org/docs/rules/use-isnan
"block-scoped-var": 2, // http://eslint.org/docs/rules/block-scoped-var
/**
* Best practices
*/
"consistent-return": 2, // http://eslint.org/docs/rules/consistent-return
"curly": [2, "all"], // http://eslint.org/docs/rules/curly
"default-case": 2, // http://eslint.org/docs/rules/default-case
"dot-notation": [2, { // http://eslint.org/docs/rules/dot-notation
"allowKeywords": true
}],
"eqeqeq": 2, // http://eslint.org/docs/rules/eqeqeq
"guard-for-in": 2, // http://eslint.org/docs/rules/guard-for-in
"no-caller": 2, // http://eslint.org/docs/rules/no-caller
"no-else-return": 2, // http://eslint.org/docs/rules/no-else-return
"no-eq-null": 2, // http://eslint.org/docs/rules/no-eq-null
"no-eval": 2, // http://eslint.org/docs/rules/no-eval
"no-extend-native": 2, // http://eslint.org/docs/rules/no-extend-native
"no-extra-bind": 2, // http://eslint.org/docs/rules/no-extra-bind
"no-fallthrough": 2, // http://eslint.org/docs/rules/no-fallthrough
"no-floating-decimal": 2, // http://eslint.org/docs/rules/no-floating-decimal
"no-implied-eval": 2, // http://eslint.org/docs/rules/no-implied-eval
"no-lone-blocks": 2, // http://eslint.org/docs/rules/no-lone-blocks
"no-loop-func": 2, // http://eslint.org/docs/rules/no-loop-func
"no-multi-str": 2, // http://eslint.org/docs/rules/no-multi-str
"no-native-reassign": 2, // http://eslint.org/docs/rules/no-native-reassign
"no-new": 2, // http://eslint.org/docs/rules/no-new
"no-new-func": 2, // http://eslint.org/docs/rules/no-new-func
"no-new-wrappers": 2, // http://eslint.org/docs/rules/no-new-wrappers
"no-octal": 2, // http://eslint.org/docs/rules/no-octal
"no-octal-escape": 2, // http://eslint.org/docs/rules/no-octal-escape
"no-param-reassign": 2, // http://eslint.org/docs/rules/no-param-reassign
"no-proto": 2, // http://eslint.org/docs/rules/no-proto
"no-redeclare": 2, // http://eslint.org/docs/rules/no-redeclare
"no-return-assign": 2, // http://eslint.org/docs/rules/no-return-assign
"no-script-url": 2, // http://eslint.org/docs/rules/no-script-url
"no-self-compare": 2, // http://eslint.org/docs/rules/no-self-compare
"no-sequences": 2, // http://eslint.org/docs/rules/no-sequences
"no-throw-literal": 2, // http://eslint.org/docs/rules/no-throw-literal
"no-with": 2, // http://eslint.org/docs/rules/no-with
"radix": 2, // http://eslint.org/docs/rules/radix
"vars-on-top": 2, // http://eslint.org/docs/rules/vars-on-top
"wrap-iife": [2, "any"], // http://eslint.org/docs/rules/wrap-iife
"yoda": 2, // http://eslint.org/docs/rules/yoda
/**
* Style
*/
"indent": [2, 4], // http://eslint.org/docs/rules/indent
"brace-style": [2, // http://eslint.org/docs/rules/brace-style
"1tbs", {
"allowSingleLine": true
}],
"quotes": [
2, "single", "avoid-escape" // http://eslint.org/docs/rules/quotes
],
"camelcase": [2, { // http://eslint.org/docs/rules/camelcase
"properties": "always"
}],
"comma-spacing": [2, { // http://eslint.org/docs/rules/comma-spacing
"before": false,
"after": true
}],
"comma-style": [2, "last"], // http://eslint.org/docs/rules/comma-style
"eol-last": 0, // http://eslint.org/docs/rules/eol-last
"func-names": 1, // http://eslint.org/docs/rules/func-names
"key-spacing": [2, { // http://eslint.org/docs/rules/key-spacing
"beforeColon": false,
"afterColon": true
}],
"new-cap": [2, { // http://eslint.org/docs/rules/new-cap
"newIsCap": true
}],
"no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
"max": 3
}],
"no-nested-ternary": 2, // http://eslint.org/docs/rules/no-nested-ternary
"no-new-object": 2, // http://eslint.org/docs/rules/no-new-object
"no-spaced-func": 2, // http://eslint.org/docs/rules/no-spaced-func
"no-trailing-spaces": 2, // http://eslint.org/docs/rules/no-trailing-spaces
"no-extra-parens": [2, "functions"], // http://eslint.org/docs/rules/no-extra-parens
"no-underscore-dangle": 0, // http://eslint.org/docs/rules/no-underscore-dangle
"one-var": [2, {
"var": "always", // Exactly one var declaration per function
"let": "always", // Exactly one let declaration per block
"const": "never" // Exactly one declarator per const declaration per block
}], // http://eslint.org/docs/rules/one-var
"padded-blocks": 0, // http://eslint.org/docs/rules/padded-blocks
"semi": [2, "always"], // http://eslint.org/docs/rules/semi
"semi-spacing": [2, { // http://eslint.org/docs/rules/semi-spacing
"before": false,
"after": true
}],
"space-after-keywords": 2, // http://eslint.org/docs/rules/space-after-keywords
"space-before-blocks": 2, // http://eslint.org/docs/rules/space-before-blocks
"space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], // http://eslint.org/docs/rules/space-before-function-paren
"space-infix-ops": 2, // http://eslint.org/docs/rules/space-infix-ops
"space-return-throw-case": 2, // http://eslint.org/docs/rules/space-return-throw-case
"spaced-comment": 0
}
}
ESLint ignore:
application/assets/vendors/
node_modules
Disable ghostMode by default
Disable ghostMode in browsersync config by default
Extract SCSS to a standalone project
WOK is JavaScript agnostic but not CSS agostic. While advocating for node-sass and postcss as CSS tools, we should allow every developer to setup its own application's structure (BEM, SMACSS, Atomic...)
Remove touch-action:manipulation
handleing image deletion in watch mode
When images are deleted from src in watch mode, corresponding images in dist folder arent removed.
Add a watcher like this one
Add system fonts to css as defaults
Unused mixin make-row
I just noticed that the make-row mixin in _mixins-grid.scss file is not used.
Instead in _layout.scss the row is created from scratch without using it.
I'll make a PR to fix that soon!
Add node-sassdown task
Add node-sassdown styleguide task:
module.exports = function (gulp, $, options) {
gulp.task('styleguide', function (done) {
var Sassdown = require('node-sassdown');
var srcGlob = '{components,objects}/*.scss';
var srcPath = options.assetsPath('src.sass');
var destPath = options.paths.dist.root + '/styleguide/';
console.log(options.paths.dist.root + '/styleguide/styleguide.js');
var opts = {
assets: [options.assetsPath('dist.css', '{styleguide,application}.css')],
scripts: [options.assetsPath('src.js', 'styleguide.js')],
theme: options.assetsPath('dist.css', 'styleguide-theme.css'),
excludeMissing: true,
readme: 'README.md',
title: 'Mediaset Play Styleguide',
highlight: 'solarized-dark',
baseUrl: '/styleguide/',
commentStart: /\/\* (?:[=]{4,}\n+[ ]+|(?!\n))/,
commentEnd: /[ ]+[=]{4,} \*\//
};
var sassdown = new Sassdown(srcGlob, srcPath, destPath, opts);
sassdown.run(done);
});
};Drop support for ie9
Remove IE 9 related styles and move on!
Update Modernizr to v3
We should update modernizr dep from 2.8.3 to the recently released 3.x
- use npm version instead of bower
- use customizr inside the related gulp task
gulp --production build errors
Hello,
On a clean project when I build with gulp --production i get some wrong files inside assets folder.
assets/stylesheets/
- application-1c964ac21c.min.css
- application-1c964ac21c.min.html <---- this file is wrong!!
- application.min.css
- application.min.css.map
Also, those .html files get injected inside the compiled views
vinyl-map outdated deps
vinyl-map installs an old version of through2 which seems a bit buggy.
Solution: remove the package and make a custom function
Nested views does not trigger live reload
Found this some time ago, didn't have the time to look into.
At the moment we watch all the njk or html files into /views and into the folders inside it (e.g. partials and templates). But when creating a subfolder it won't watch the nested files.
a quick example of what I mean:
views/
- partials/_my-partial.njk -> OK
- partials/about/_about-partial.njk --> FAIL won't trigger reload
- index.njk -> OK
It surely is an issue with the path at this line but I don't know the cleanest way to fix it (without possibly breaking any case!)
Gulp is failing on windows
Hello @dwightjack
In the readme the install package could be wrong.
We couldn't be able to start wok using gulp but instead it worked installing gulp-cli
Bye!
Rows without gutters
Hi!
What about a l-row--no-gutter class, even if that requires a level of nesting?
.l-row
- .l-col--xx-xx
- [...]
.l-row--no-gutter
- .l-col--xx-xx
- [...]
This way all the columns code would be duplicated, but that shouldn't be an issue.
What do you think about it? Could it be useful?
I could make a PR for this, too!
Bump node to >=8.9.x
@kino90 What about dropping support for node 6 and use node 8.9.x as the lowest required version of node? This way we could even use async/await
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.