Merge pull request #76 from atolye15/develop

v4.4.0

.eslintrc.json

@@ -2,6 +2,9 @@
   "extends": ["airbnb-base", "prettier"],
   "parser": "babel-eslint",
   "plugins": ["prettier"],
+  "env": {
+    "browser": true
+  },
   "rules": {
     "prettier/prettier": "error"
   }

.gitignore

@@ -11,3 +11,4 @@ dev/
 dist/
 styleguide
 package-lock.json
+yarn-error.log

.stylelintrc

@@ -15,7 +15,7 @@
       }
     ],
     "plugin/declaration-block-no-ignored-properties": true,
-    "max-nesting-depth": 2,
+    "max-nesting-depth": 3,
     "order/properties-alphabetical-order": null,
     "order/properties-order": [
       [

CHANGELOG.md

@@ -0,0 +1,33 @@
+# Web Starter Kit Changelog
+
+## 4.4.0 (03.05.2018)
+
+### New Stuff
+
+* Added `footerVendorsBlock` block including vendor javascript files in to twig layout #52
+* Added ability to change background color of the kss demo container #47
+* Added margin auto utilities and documented #34
+* Added background-color utilities and documented #73
+* `yarn-error.log` added in gitignore #56
+* Added ability to manage transition on global link by a scss variable #54
+
+### Refactors
+
+* Improved Form Controls styleguide documentation #28
+* Removed incorrect things from styleguide documentation of Buttons #53
+* Removed unnecesary callback function from gulp stylegulde task #59
+* Updated npm packages #68
+* scss de vendor-extension klasörünün kaldırılması #62
+* Added `env` config in eslintrc #66
+* Improved styleguide documentation for Icons #51
+* Removed `font-size` property from `html` tag #58
+* Project colors ve backgrounds utility lerinin uncss ignore a eklenmesi #74
+* stylelint max-nesting-depth rule increased from 2 to 3 #71
+* Twig `assets` function renamed as `asset` in order to ensure synchronization between backend and frontend #72
+
+### Fixes
+
+* Added transform to the stylegude example div element to keep fixed things inside to example container #69
+* Fixed wrong variable problem in `image-retina` mixin #61
+* Fixed the problem that when occurs production build related with uncss #70
+* Added `u` prefix to `flex-column-reverse` utility class #63

configs.js

@@ -38,7 +38,7 @@ const configs = {
   styleGuide: {
     source: ['src/scss'],
     destination: 'styleguide/',
-    custom: ['HideOriginal', 'Colors', 'Icons'],
+    custom: ['HideOriginal', 'DemoBgColor', 'Colors', 'Icons'],
     extend: 'kss/extend',
     // The css and js paths are URLs, like '/misc/jquery.js'.
     // The following paths are relative to the generated style guide.

gulp/tasks/styles/main.js

@@ -1,3 +1,5 @@
+import fs from 'fs';
+import path from 'path';
 import gulp from 'gulp';
 import lazypipe from 'lazypipe';
 import postcss from 'gulp-postcss';
@@ -16,6 +18,22 @@ import cssnano from 'cssnano';
 
 import configs from '../../../configs';
 
+function inlineCssImporter(url, prev) {
+  if (!url.endsWith('.css')) {
+    return { file: url };
+  }
+
+  const resolvedPath = path.resolve(path.dirname(prev), url);
+
+  if (!fs.existsSync(resolvedPath)) {
+    return new Error(`Could not find url: ${url}`);
+  }
+
+  const contents = fs.readFileSync(resolvedPath, 'utf-8');
+
+  return { contents };
+}
+
 export default function({ isProduction }) {
   const envPath = isProduction ? configs.paths.dist : configs.paths.dev;
 
@@ -39,7 +57,7 @@ export default function({ isProduction }) {
       .src([`${configs.paths.src}/scss/**/*.scss`])
       .pipe(plumber({ errorHandler: notify.onError('Hata: <%= error.message %>') }))
       .pipe(isProduction ? util.noop() : sourcemaps.init())
-      .pipe(sass({ precision: 10 }).on('error', sass.logError))
+      .pipe(sass({ precision: 10, importer: inlineCssImporter }).on('error', sass.logError))
       .pipe(
         postcss([
           autoprefixer({ cascade: false }),

gulpfile.babel.js

@@ -11,6 +11,7 @@
 // https://babeljs.io/docs/learn-es2015/
 
 import gulp from 'gulp';
+import path from 'path';
 import runSequence from 'run-sequence';
 import browserSync from 'browser-sync';
 import util from 'gulp-util';
@@ -28,6 +29,8 @@ const isDeploy = util.env.deploy;
 
 const envPath = isProduction ? configs.paths.dist : configs.paths.dev;
 
+runSequence.options.ignoreUndefinedTasks = true;
+
 /**
  * STYLES
  * Sass dosyalarını derleme ve prefix ekleme
@@ -127,8 +130,8 @@ gulp.task('notify:build', tasks.notify('Build işlemi başarılı bir şekilde t
 gulp.task('build', cb =>
   runSequence(
     ['clean:dist', 'clean:tempJs'],
-    'html',
-    ['styles', 'scripts', 'images', 'copy:fonts', 'copy:vendors'],
+    ['html', 'scripts'],
+    ['styles', 'images', 'copy:fonts', 'copy:vendors'],
     'deploy',
     'notify:build',
     () => {
@@ -189,19 +192,22 @@ gulp.task('sync:deploy-vendors', tasks.sync.deploy({ isProduction, isDeploy }, '
 gulp.task('serve', () => {
   browserSync(configs.browserSync);
 
-  gulp
-    .watch([
-      `${configs.paths.src}/twig/**/*.{twig,html}`,
-      `${configs.paths.src}/scss/**/*.{twig,html}`,
-    ])
-    .on('change', () => {
-      if (configs.uncss.active) {
-        return runSequence('html:main', 'styles:main', 'styleguide', reload);
-      }
-      return runSequence('html:main', 'styleguide', reload);
-    });
+  gulp.watch([`${configs.paths.src}/{twig,scss}/**/*.twig`], e => {
+    if (path.extname(e.path) !== '.twig') {
+      return;
+    }
+    runSequence(
+      'html:main',
+      isProduction && configs.uncss.active ? 'styles:main' : null,
+      'styleguide',
+      reload,
+    );
+  });
   gulp.watch([`${configs.paths.src}/img/{icons,icons/**}`], ['html'], reload);
-  gulp.watch([`${configs.paths.src}/scss/**/*.scss`], () => {
+  gulp.watch([`${configs.paths.src}/scss/**/*.scss`], e => {
+    if (path.extname(e.path) !== '.scss') {
+      return;
+    }
     runSequence('styles', 'sync:deploy-styles', 'styleguide', reload);
   });
   gulp.watch([`${configs.paths.src}/fonts/**/*`], () => {
@@ -236,6 +242,6 @@ gulp.task('pagespeed', tasks.pagespeed());
  * Generates KSS living styleguide
  */
 
-gulp.task('styleguide', cb => kss(configs.styleGuide, cb));
+gulp.task('styleguide', () => kss(configs.styleGuide));
 
 gulp.task('bump', tasks.bump());

kss/builders/atolye15/index.twig

@@ -199,7 +199,7 @@
               </div>
             {% endif %}
 
-          <div class="kss-modifier__example">
+          <div class="kss-modifier__example" {% if section.demobgcolor %}style="background-color: {{section.demobgcolor}}"{% endif %}>
             {{ section.example|raw }}
             <div class="kss-modifier__example-footer"></div>
           </div>
@@ -231,7 +231,7 @@
             <pre class="prettyprint linenums lang-html"><code data-language="html">{{ section.markup|escape('html') }}</code></pre>
           </details>
         {% endif %}
-        {% if section.example %}
+        {% if section.example and not section.icons %}
           <details class="kss-markup kss-style">
             <summary>
               {% if section.markupFile %}

kss/builders/atolye15/kss-assets/kss.scss

@@ -650,6 +650,7 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
     border: 2px dashed transparent;
     margin: -2px -2px ($kss-vertical-rhythm - 2px);
     clear: left;
+    transform: translate3d(0, 0, 0);
 
     &:last-child {
       margin-bottom: 0;

kss/extend/assets.js

@@ -1,5 +1,5 @@
 /* eslint-disable func-names */
 
 module.exports = function(Twig) {
-  Twig.extendFunction('assets', file => `../dev/${file}`);
+  Twig.extendFunction('asset', file => `../dev/${file}`);
 };

package.json

@@ -1,24 +1,24 @@
 {
-  "version": "v4.3.0",
+  "version": "v4.4.0",
   "devDependencies": {
-    "autoprefixer": "^8.1.0",
-    "babel-core": "^6.21.0",
-    "babel-eslint": "^8.2.2",
+    "autoprefixer": "^8.4.1",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
     "babel-preset-es2015": "^6.18.0",
     "babel-register": "^6.26.0",
-    "browser-sync": "^2.23.6",
+    "browser-sync": "^2.24.1",
     "classnames": "^2.2.5",
     "css-mqpacker": "^6.0.2",
     "cssnano": "^3.10.0",
     "del": "^3.0.0",
-    "eslint": "^4.18.2",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-prettier": "^2.6.0",
     "gulp": "^3.9.0",
     "gulp-babel": "^7.0.1",
-    "gulp-bump": "^3.1.0",
+    "gulp-bump": "^3.1.1",
     "gulp-concat": "^2.6.1",
     "gulp-directory-sync": "^1.2.3",
     "gulp-foreach": "^0.1.0",
@@ -28,27 +28,27 @@
     "gulp-plumber": "^1.2.0",
     "gulp-postcss": "^7.0.1",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^3.1.0",
+    "gulp-sass": "^4.0.1",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-svgstore": "^6.1.0",
     "gulp-twig": "^1.2.0",
     "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.8",
-    "kss": "^3.0.0-beta.18",
+    "kss": "3.0.0-beta.18",
     "lazypipe": "^1.0.1",
-    "postcss-flexbugs-fixes": "^3.3.0",
-    "prettier": "^1.11.1",
+    "postcss-flexbugs-fixes": "^3.3.1",
+    "prettier": "^1.12.1",
     "prettier-stylelint": "^0.4.2",
     "psi": "^3.1.0",
     "run-sequence": "^2.2.1",
-    "stylelint": "^9.1.1",
-    "stylelint-config-prettier": "^2.1.0",
+    "stylelint": "^9.2.0",
+    "stylelint-config-prettier": "^3.2.0",
     "stylelint-config-sass-guidelines": "^5.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^1.1.0",
     "stylelint-declaration-strict-value": "^1.0.4",
     "stylelint-order": "^0.8.1",
-    "stylelint-scss": "^2.4.0",
-    "uncss": "^0.16.1"
+    "stylelint-scss": "^3.1.0",
+    "uncss": "^0.16.2"
   },
   "engines": {
     "node": ">=5.2.0"

src/scss/abstracts/_variables.scss

@@ -13,15 +13,19 @@ $g-body-bg: $color-white !default;
 //** `<body>` nin Global text rengi.
 $g-text-color: $color-oil !default;
 
-// Global link rengi
-$g-link-color: $primary-color !default;
+// Border Color
+$g-border-color: $color-smoke;
 
-// Global link hover rengi
-$g-link-hover-color: darken($g-link-color, 15%) !default;
+// Transition Duration
+$g-transition-duration: 0.4s;
 
-$g-link-hover-decoration: underline !default;
+//  LINK
+// -------------------------
 
-$g-border-color: $color-smoke;
+$g-link-color: $primary-color !default;
+$g-link-transition: null;
+$g-link-hover-color: darken($g-link-color, 15%) !default;
+$g-link-hover-decoration: underline !default;
 
 //  TYPOGRAPHY
 // -------------------------
@@ -80,6 +84,7 @@ $g-font-size-xlarge: px-to-rem($g-font-size-base-px + 8px);
 // -------------------------
 $g-base-gap: $g-line-height-computed;
 $g-gaps: (
+  auto: auto,
   normal: $g-base-gap,
   small: ($g-base-gap / 1.5),
   xsmall: ($g-base-gap / 3),
@@ -113,15 +118,18 @@ $g-pads: (
 $c-button-function-factor: -20% !default; // Butunun arkaplan rengini aydınlatma oranı
 $c-button-font-family: null !default; // Butonun fontu
 $c-button-bg-color: $primary-color !default; // Buton default bg color
-$c-button-bg-hover: scale-color($c-button-bg-color, $lightness: $c-button-function-factor) !default; // Button default hover rengi
+$c-button-bg-hover: scale-color(
+  $c-button-bg-color,
+  $lightness: $c-button-function-factor
+) !default; // Button default hover rengi
 $c-button-border-color: $c-button-bg-hover !default; // Button default border rengi
 $c-button-radius: px-to-rem(3px) !default; // Button default border radius
 $c-button-font-size: px-to-rem(16px) !default; // Button default font boyutu
 $c-button-line-height: (24 / 16) !default; // Button line-height
 $c-button-font-color: $color-white !default; // Button default font rengi
 $c-button-font-color-alt: $color-oil !default; // Button default font rengi
 $c-button-padding-vertical: px-to-rem(10px) !default; // Button dikey padding
-$c-button-padding-horizontal: px-to-rem(20px)!default; // Button default yatay padding
+$c-button-padding-horizontal: px-to-rem(20px) !default; // Button default yatay padding
 $c-button-border-width: 0 !default; // Button default border width
 
 //  FORMS CONTROL VARIABLES
@@ -141,35 +149,32 @@ $c-input-line-height: $g-line-height-computed !default;
 $c-input-padding-vertical: px-to-rem(6px);
 $c-input-padding-horizontal: px-to-rem(12px);
 $c-input-height-base: (
-    $c-input-line-height + ($c-input-padding-vertical * 2) + (px-to-rem($c-input-border-width) * 2)
-  )
-  !default; // Default `.form-control` height
+  $c-input-line-height + ($c-input-padding-vertical * 2) + (px-to-rem($c-input-border-width) * 2)
+) !default; // Default `.form-control` height
 
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
 $grid-breakpoints: (
-    xs: 0,
-    sm: px-to-rem(544px),
-    md: px-to-rem(768px),
-    lg: px-to-rem(992px),
-    xl: px-to-rem(1200px)
-  )
-  !default;
+  xs: 0,
+  sm: px-to-rem(544px),
+  md: px-to-rem(768px),
+  lg: px-to-rem(992px),
+  xl: px-to-rem(1200px)
+) !default;
 
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-    sm: px-to-rem(576px),
-    md: px-to-rem(720px),
-    lg: px-to-rem(940px),
-    xl: px-to-rem(1140px)
-  )
-  !default;
+  sm: px-to-rem(576px),
+  md: px-to-rem(720px),
+  lg: px-to-rem(940px),
+  xl: px-to-rem(1140px)
+) !default;
 
 // Grid columns
 //
@@ -178,12 +183,6 @@ $container-max-widths: (
 $grid-columns: 12 !default;
 $grid-gutter-width: px-to-rem(32px) !default;
 
-//
-// Transition Duration
-// -------------------------
-
-$g-transition-duration: 0.4s;
-
 //
 // Z-index
 // Site genelinde kullanılan z-indexler burada tanımlanmalıdır