Added separate nav breakpoint and text sizes to editor

This commit is contained in:
Dan Coulthard 2023-09-06 16:24:06 +01:00
parent bd493e99ed
commit d6c2e451f9
7 changed files with 40 additions and 219 deletions

View File

@ -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;
}

View File

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

View File

@ -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;

View File

View File

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

View File

@ -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);

View File

@ -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();
});
})
));