devbridge / front-end-toolkit Goto Github PK

I refactored error catching, using this example: http://stackoverflow.com/questions/23971388/prevent-errors-from-breaking-crashing-gulp-watch
Would be good to add it to toolkit

Attached example:
.eslintrc.txt

Add documentation, how to enable eslint on your ide (webstorm)

Update baseUrl
baseUrl: '/scripts/'

Need to update gruntfile due to grunt spritesmith version changes. Sprites generation won't work if you using current version.

Add automated image minification.
I suggest to use: https://github.com/sindresorhus/gulp-imagemin
Requires additional configuration.

Easier to set up: http://prntscr.com/8dwkw3

We just need to decide if we want to add this to gulp starter or we will add this only for webpack based boilerplate

Recommended tool, from Kestutis:
http://chir.ag/projects/name-that-color/

Provide color and it will provide name for it.
Can be added as recommended tool for naming color variables.

I would suggest to use this mixin:
@mixin clearfix($extend: true) {
@if $extend
{ @extend %clearfix; }
@else {
&:after
{ content: ‘’; display: table; clear: both; }
}
}
%clearfix
{ @include clearfix($extend: false); }
Read more here: https://ihatetomatoes.net/what-ive-learned-at-cssconfau-2015/

Add setup process and link to perfTool
Maybe, it is good idea, to have it predefined in starter project?

Current Sass documentation is outdated. We need to update setup process (Libsass) and add info about the frameworks (Bourbon, Neat, Susy).

Add actual nodeJs version, to readme.md, as a requirement.

in spriting.scss we should have only these mixins included and sprite maps scss, now mixins are incorrect:
@mixin get-sprite($sprite, $sprite2x: false, $center: false, $center-y: false, $center-x: false) {
$sprite-half-sprite: 50%;
$sprite-icn-height: nth($sprite, 6);
$sprite-icn-width: nth($sprite, 5);
background: url(nth($sprite, 9)) nth($sprite, 3) nth($sprite, 4) no-repeat;
@include sprite-width($sprite);
@include sprite-height($sprite);
@content;
@if $sprite2x {
@media only screen and (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2.0) {
background: url(nth($sprite2x, 9)) nth($sprite2x, 3)/2 nth($sprite2x, 4)/2 no-repeat;
background-size: nth($sprite2x, 7)/2 nth($sprite2x, 8)/2;
@content;
}
}
@if $center {
position: absolute;
top: $sprite-half-sprite;
left: $sprite-half-sprite;
margin: {
top: -($sprite-icn-height / 2);
left: -($sprite-icn-width / 2);
}
} @else if $center-y {
position: absolute;
top: $sprite-half-sprite;
margin: {
top: -($sprite-icn-height / 2);
}
} @else if $center-x {
position: absolute;
left: $sprite-half-sprite;
margin: {
left: -($sprite-icn-width / 2);
}
}
}

@mixin sprite-background-size($sprite) {
background-size: nth($sprite, 7) nth($sprite, 8);
}

Lets try this service http://outdatedbrowser.com/en

http://csswizardry.com/2013/04/shame-css/
https://github.com/heroheman/shepherd/blob/master/sass/_shame.scss

Create category for best resources about front-end.
My suggestion is to add these:
http://news.layervault.com/
http://frontendfront.com/
http://sassnews.com
http://pinboard.in/popular/t:html/
http://pinboard.in/popular/t:sass/
http://pinboard.in/popular/t:css/
http://pinboard.in/popular/t:javascript/
http://www.reddit.com/r/css/
http://www.reddit.com/r/javascript/
www.codrops.com
http://css-weekly.com/
http://html5weekly.com/
www.dailyjs.com

Suggestion to add:
$base-font-size
$base-line-height
$font-family-primary
$font-family-secondary

maybe let's use node-bourbon instead of adding whole library to the project?

We should group them, to be able to provide direct link to form elements snippets page only

Then icon is added and when removed - spriting task is broken, because map returns "nan" pixels for each icon. I think, that this is issue with task sequence. Will try to fix this on Vitalijus project and then add fix to front-end toolkit.

More info - here: http://editorconfig.org

Main.js, lets remove .js extension on line 15 of main.js

Merge and apply changes from "internal-documentation" branch to master

Basic print styles should be included.
Basic styling is added to "documentation" branch

We need to review existing javascript structure:

1. We need to add references to CDN resources with appropieate fallbacks.
2. We need to check for latest versions of the libraries.
3. We need to check if new libraries needed in default templates.
4. Predefined default modules for plugins initiation in site.js file (like module.modal = function(){..})

http://stackoverflow.com/questions/21080433/gulp-sass-watch-stops-when-invalid-property-name

Components naming isn't very informative in Scss world. Modules would be much better.
For 3rd party party modules, create additional folder Modules -> Libs (jqueryUI, default slider styles and etc goes here).
Bring normalize to core folder.
Extenders (change name to helpers, like in other projects?) should go to core too.

We need to add default selectors to scss as a reminder to fill them up. Example below but check if there are any more:

a {
}

h1, .heading1 {
}

h2, .heading2 {
}

h3, .heading3 {
}

h4, .heading4 {
}

ul {

}

ol {

}

figure {

}

strong {

}

modal.scss should be rewritten, javascript classes should be changed too

• add pull request in this repo:
  https://github.com/tkirda/modal-box

Suggestion, to add silent classes like(better consistency across projects):

%hidden {
display: none;
visibility: hidden;
}

%visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

// Extends the .visuallyhidden class to allow the element to be focusable
// when navigated to via the keyboard: h5bp.com/p

&.focusable:active,
&.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}

Now, dependencies in package json are defined incorrectly, need to fix this.

Review article and cheatsheet and add info to "Seo best practices" cheatsheet:
https://moz.com/blog/seo-cheat-sheet
https://d2eeipcrcdle6.cloudfront.net/seo-cheat-sheet.pdf

This will help to sync node version with current project.
You can read more about it here:
https://github.com/creationix/nvm

Add predefined task for devbridge styleguide, like a gulp task to front-end toolkit?

add
watch: {
options: {
spawn: false
}
}

for faster compiling

Create documentation and default styling, which could help styling modal windows and prevent issues on mobile devices.

How to:
https://devbridge.atlassian.net/browse/PM-128

Remove @mixin box-sizing - outdated, alternative in bourbon
@mixin ellipsis - there is an alternative in borubon

Example: http://codepen.io/anon/pen/XbWJMQ

This line (/libs/jquery-1.8.3.min) in scripts/main.js is wrong - no need '/' at the beginning or I misunderstood something?