Added separate nav breakpoint and text sizes to editor
This commit is contained in:
parent
bd493e99ed
commit
d6c2e451f9
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -6,6 +6,7 @@ $breakpoint-lg: 1280px;
|
|||
$breakpoint-md: 1024px;
|
||||
$breakpoint-sm: 768px;
|
||||
$breakpoint-xs: 480px;
|
||||
$breakpoint-nav: 1000px;
|
||||
|
||||
/**
|
||||
* Typography
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -38,6 +38,7 @@ Text Domain: barebones
|
|||
@import 'layout/main';
|
||||
@import 'layout/header';
|
||||
@import 'layout/footer';
|
||||
@import 'layout/sections';
|
||||
|
||||
// 6 .Components
|
||||
@import 'components/buttons';
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
})
|
||||
));
|
Loading…
Reference in New Issue