diff --git a/assets/styles/components/_nav.scss b/assets/styles/components/_nav.scss index 35252bc..febb417 100755 --- a/assets/styles/components/_nav.scss +++ b/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; } diff --git a/assets/styles/config/_variables.scss b/assets/styles/config/_variables.scss index 089db4a..b9d66ef 100755 --- a/assets/styles/config/_variables.scss +++ b/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 diff --git a/assets/styles/layout/_header.scss b/assets/styles/layout/_header.scss index fa40a34..0543ae4 100755 --- a/assets/styles/layout/_header.scss +++ b/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; diff --git a/assets/styles/layout/_sections.scss b/assets/styles/layout/_sections.scss new file mode 100755 index 0000000..e69de29 diff --git a/assets/styles/style.scss b/assets/styles/style.scss index 0cc0b61..7eeb0c8 100755 --- a/assets/styles/style.scss +++ b/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'; diff --git a/functions.php b/functions.php index 7e1b468..4649739 100755 --- a/functions.php +++ b/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' => '', - // 'selector' => '', - // 'classes' => '' - // ], - // [ - // 'title' => 'Buttons', - // 'items' => [ - // [ - // 'title' => 'Primary', - // 'selector' => 'a', - // 'classes' => 'btn btn--primary' - // ], - // [ - // 'title' => 'Secondary', - // 'selector' => 'a', - // 'classes' => 'btn btn--secondary' - // ] - // ] - // ] + [ + 'title' => 'Text Sizes', + 'items' => [ + [ + 'title' => '2XL', + 'selector' => 'span, p', + 'classes' => 'text-2xl' + ], + [ + 'title' => 'XL', + 'selector' => 'span, p', + 'classes' => 'text-xl' + ], + [ + 'title' => 'LG', + 'selector' => 'span, p', + '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); diff --git a/gulpfile.babel.js b/gulpfile.babel.js deleted file mode 100755 index 8537b64..0000000 --- a/gulpfile.babel.js +++ /dev/null @@ -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(); - }); - }) -));