Added separate nav breakpoint and text sizes to editor

assets/styles/components/_nav.scss

@@ -15,7 +15,7 @@
     margin: 8px auto;
     transition: all $animation-speed $animation;
 
-    @include resp-max($breakpoint-md) {
+    @include resp-max($breakpoint-nav) {
         display: block;
     }
 
@@ -57,7 +57,7 @@
 }
 
 .nav--header {
-    @include resp-max($breakpoint-md) {
+    @include resp-max($breakpoint-nav) {
         ul {
             list-style: none;
         }

assets/styles/config/_variables.scss

@@ -6,6 +6,7 @@ $breakpoint-lg: 1280px;
 $breakpoint-md: 1024px;
 $breakpoint-sm: 768px;
 $breakpoint-xs: 480px;
+$breakpoint-nav: 1000px;
 
 /**
  * Typography

assets/styles/layout/_header.scss

@@ -2,7 +2,7 @@
 	padding: $base-spacing-unit 0;
 	margin-bottom: ($base-spacing-unit * 2);
 	.header__navigation {
-		@include resp-max($breakpoint-md) {
+		@include resp-max($breakpoint-nav) {
 			display: none;
 			position: fixed;
 			left: 0;

assets/styles/style.scss

@@ -38,6 +38,7 @@ Text Domain: barebones
 @import 'layout/main';
 @import 'layout/header';
 @import 'layout/footer';
+@import 'layout/sections';
 
 // 6 .Components
 @import 'components/buttons';

functions.php

@@ -239,26 +239,41 @@ add_filter('mce_buttons_2', 'barebones_mce_buttons_2');
 
 function barebones_tiny_mce_before_init( $settings ) {
     $style_formats = [
-        // [
+        [
-        //     'title'    => '',
+            'title' => 'Text Sizes',
-        //     'selector' => '',
+            'items' => [
-        //     'classes'  => ''
+                [
-        // ],
+                    'title'    => '2XL',
-        // [
+                    'selector' => 'span, p',
-        //     'title' => 'Buttons',
+                    'classes'  => 'text-2xl'
-        //     'items' => [
+                ],
-        //         [
+                [
-        //             'title'    => 'Primary',
+                    'title'    => 'XL',
-        //             'selector' => 'a',
+                    'selector' => 'span, p',
-        //             'classes'  => 'btn btn--primary'
+                    'classes'  => 'text-xl'
-        //         ],
+                ],
-        //         [
+                [
-        //             'title'    => 'Secondary',
+                    'title'    => 'LG',
-        //             'selector' => 'a',
+                    'selector' => 'span, p',
-        //             'classes'  => 'btn btn--secondary'
+                    'classes'  => 'text-lg'
-        //         ]
+                ],
-        //     ]
+                [
-        // ]
+                    'title'    => 'MD',
+                    'selector' => 'span, p',
+                    'classes'  => 'text-md'
+                ],
+                [
+                    'title'    => 'SM',
+                    'selector' => 'span, p',
+                    'classes'  => 'text-sm'
+                ],
+                [
+                    'title'    => 'XD',
+                    'selector' => 'span, p',
+                    'classes'  => 'text-xs'
+                ],                
+            ]
+        ]
     ];
 
     $settings['style_formats'] = json_encode($style_formats);

gulpfile.babel.js

@@ -1,196 +0,0 @@
-import gulp from 'gulp';
-import clean from 'gulp-clean';
-import sass from 'gulp-sass';
-import gulpif from 'gulp-if';
-import autoprefixer from 'gulp-autoprefixer';
-import sourcemaps from 'gulp-sourcemaps';
-import { rollup } from 'rollup';
-import buble from 'rollup-plugin-buble';
-import nodeResolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import json from 'rollup-plugin-json';
-import replace from 'rollup-plugin-replace';
-import multiEntry from 'rollup-plugin-multi-entry';
-import uglify from 'rollup-plugin-uglify';
-import { minify } from 'uglify-js';
-import imagemin from 'gulp-imagemin';
-import notify from 'gulp-notify';
-import runSequence from 'run-sequence';
-import path from 'path';
-
-/**
- * Barebones config
- */
-import config from './config.barebones';
-
-const { log } = console;
-let production = false; // = build
-let error = false;
-
-/**
- * Tasks - in order
- */
-const tasks = ['styles', 'scripts', 'images'];
-
-/**
- * Notification
- *
- * @param {string} message
- * @param {string} status
- */
-function notification(message = '', status = 'success') {
-  return gulp.src('./node_modules/gulp-notify/test/fixtures/1.txt')
-    .pipe(notify({
-      title: 'Barebones',
-      message,
-      icon: path.join(__dirname, `assets/icons/${status}.png`),
-    }));
-}
-
-/**
- * Clean
- */
-gulp.task('clean', () => (
-  gulp.src([`${config.base.public}/js`], {
-    read: false,
-  })
-  .pipe(clean())
-));
-
-/**
- * Styles
- */
-gulp.task('styles', () => {
-  const stylesheets = config.styles;
-  stylesheets.push(`${config.base.src}/styles/*.scss`);
-
-  gulp.src(stylesheets)
-    .pipe(gulpif(!production, sourcemaps.init()))
-    .pipe(sass({
-      outputStyle: production ? 'compressed' : 'nested',
-    }).on('error', (err) => {
-      notification('Failed to compile styles. 😱', 'error');
-      log(err.stack);
-      error = true;
-    }))
-    .pipe(autoprefixer({
-      browsers: ['last 10 versions'],
-    }))
-    .pipe(gulpif(!production, sourcemaps.write('.')))
-    .pipe(gulp.dest(`${config.base.public}`));
-});
-
-const roll = (entry, dest) => {
-  let env = 'development';
-  if (production) {
-    env = 'production';
-  }
-
-  return rollup({
-    entry,
-    plugins: [
-      multiEntry(),
-      buble(),
-      nodeResolve({
-        browser: true,
-        main: true,
-        jsnext: true,
-      }),
-      commonjs({
-        include: [
-          'node_modules/**',
-          `${config.base.src}/**`,
-        ],
-      }),
-      json(),
-      replace({
-        'process.env.NODE_ENV': JSON.stringify(env),
-      }),
-      production ? uglify({}, minify) : '',
-    ],
-  }).then((bundle) => {
-    bundle.write({
-      format: 'iife',
-      moduleName: 'BarebonesBundle',
-      sourceMap: !production,
-      dest,
-    });
-  }).catch((err) => {
-    notification('Failed to compile scripts. 😱', 'error');
-    log(err.stack);
-    error = true;
-  });
-};
-
-gulp.task('scripts', (cb) => {
-  if (config.scripts.length) {
-    config.scripts.forEach((filePath) => {
-      const formattedPath = filePath.replace(/^\/|\/$/g, ''); // remove leading forward slash
-      const entry = `${config.base.src}/scripts/${formattedPath}`;
-      const dest = `${config.base.public}/js/${formattedPath.replace('.js', '.min.js')}`;
-      // regex to remove duplicate forward slashes
-      roll(entry.replace(/([^:]\/)\/+/g, '$1'), dest.replace(/([^:]\/)\/+/g, '$1'));
-    });
-  }
-  cb();
-});
-
-/**
- * Watch
- */
-gulp.task('watch-files', tasks, () => {
-  gulp.watch(`${config.base.src}/styles/**/*.scss`, ['styles']);
-  gulp.watch(`${config.base.src}/scripts/**/*.js`, ['scripts']);
-  gulp.watch(`${config.base.src}/images/**/*.*`, ['images']);
-});
-
-/**
- * Images
- */
-gulp.task('images', (cb) => {
-  // hadle all images that are not svg
-  gulp.src(`${config.base.src}/images/**/*.*`)
-    .pipe(imagemin({
-      progressive: true,
-      svgoPlugins: [{
-        removeViewBox: false,
-      }],
-    }))
-    .pipe(gulp.dest(`${config.base.public}/img`))
-    .on('end', () => cb());
-});
-
-/**
- * Main Tasks
- */
-gulp.task('watch', cb => (
-  runSequence('clean', () => {
-    runSequence(tasks, 'watch-files', () => {
-      if (!error) {
-        notification('Watching files... 👀');
-      }
-      cb();
-    });
-  })
-));
-
-gulp.task('build', (cb) => {
-  production = true;
-
-  runSequence('clean', () => {
-    runSequence(tasks, () => {
-      if (!error) {
-        notification('Build complete! 🍻');
-        cb();
-      }
-    });
-  });
-});
-
-gulp.task('default', cb => (
-  runSequence('clean', () => {
-    runSequence(tasks, () => {
-      cb();
-    });
-  })
-));