cacao-css 3.20.0 → 4.0.0

package/src/padding/sm/top.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Top Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .pt-sm-0 {
+        padding-top: 0;
+    }
+    
+    .pt-sm-1 {
+        padding-top: 10px;
+    }
+    
+    .pt-sm-2 {
+        padding-top: 20px;
+    }
+    
+    .pt-sm-3 {
+        padding-top: 30px;
+    }
+    
+    .pt-sm-4 {
+        padding-top: 40px;
+    }
+    
+    .pt-sm-5 {
+        padding-top: 50px;
+    }
+}

package/src/padding/sm/vertical.css

@@ -0,0 +1,35 @@
+/* =========================================================================== *\
+    Vertical Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-sm) {
+    .py-sm-0 {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    
+    .py-sm-1 {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    
+    .py-sm-2 {
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+    
+    .py-sm-3 {
+        padding-top: 30px;
+        padding-bottom: 30px;
+    }
+    
+    .py-sm-4 {
+        padding-top: 40px;
+        padding-bottom: 40px;
+    }
+    
+    .py-sm-5 {
+        padding-top: 50px;
+        padding-bottom: 50px;
+    }
+}

package/src/padding/xl/all.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    All Sides Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .p-xl-0 {
+        padding: 0;
+    }
+    
+    .p-xl-1 {
+        padding: 10px;
+    }
+    
+    .p-xl-2 {
+        padding: 20px;
+    }
+    
+    .p-xl-3 {
+        padding: 30px;
+    }
+    
+    .p-xl-4 {
+        padding: 40px;
+    }
+    
+    .p-xl-5 {
+        padding: 50px;
+    }
+}

package/src/padding/xl/bottom.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Bottom Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .pb-xl-0 {
+        padding-bottom: 0;
+    }
+    
+    .pb-xl-1 {
+        padding-bottom: 10px;
+    }
+    
+    .pb-xl-2 {
+        padding-bottom: 20px;
+    }
+    
+    .pb-xl-3 {
+        padding-bottom: 30px;
+    }
+    
+    .pb-xl-4 {
+        padding-bottom: 40px;
+    }
+    
+    .pb-xl-5 {
+        padding-bottom: 50px;
+    }
+}

package/src/padding/xl/end.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    End Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .pe-xl-0 {
+        padding-right: 0;
+    }
+    
+    .pe-xl-1 {
+        padding-right: 10px;
+    }
+    
+    .pe-xl-2 {
+        padding-right: 20px;
+    }
+    
+    .pe-xl-3 {
+        padding-right: 30px;
+    }
+    
+    .pe-xl-4 {
+        padding-right: 40px;
+    }
+    
+    .pe-xl-5 {
+        padding-right: 50px;
+    }
+}

package/src/padding/xl/horizontal.css

@@ -0,0 +1,34 @@
+/* =========================================================================== *\
+    Horizontal Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .px-xl-0 {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .px-xl-1 {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+    
+    .px-xl-2 {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    
+    .px-xl-3 {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+    
+    .px-xl-4 {
+        padding-left: 40px;
+        padding-right: 40px;
+    }
+    
+    .px-xl-5 {
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+}

package/src/padding/xl/start.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Start Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .ps-xl-0 {
+        padding-left: 0;
+    }
+    
+    .ps-xl-1 {
+        padding-left: 10px;
+    }
+    
+    .ps-xl-2 {
+        padding-left: 20px;
+    }
+    
+    .ps-xl-3 {
+        padding-left: 30px;
+    }
+    
+    .ps-xl-4 {
+        padding-left: 40px;
+    }
+    
+    .ps-xl-5 {
+        padding-left: 50px;
+    }
+}

package/src/padding/xl/top.css

@@ -0,0 +1,29 @@
+/* =========================================================================== *\
+    Top Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .pt-xl-0 {
+        padding-top: 0;
+    }
+    
+    .pt-xl-1 {
+        padding-top: 10px;
+    }
+    
+    .pt-xl-2 {
+        padding-top: 20px;
+    }
+    
+    .pt-xl-3 {
+        padding-top: 30px;
+    }
+    
+    .pt-xl-4 {
+        padding-top: 40px;
+    }
+    
+    .pt-xl-5 {
+        padding-top: 50px;
+    }
+}

package/src/padding/xl/vertical.css

@@ -0,0 +1,35 @@
+/* =========================================================================== *\
+    Vertical Padding Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .py-xl-0 {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    
+    .py-xl-1 {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    
+    .py-xl-2 {
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+    
+    .py-xl-3 {
+        padding-top: 30px;
+        padding-bottom: 30px;
+    }
+    
+    .py-xl-4 {
+        padding-top: 40px;
+        padding-bottom: 40px;
+    }
+    
+    .py-xl-5 {
+        padding-top: 50px;
+        padding-bottom: 50px;
+    }
+}

package/src/reset/reset.css

@@ -0,0 +1,47 @@
+/* =========================================================================== *\
+    CSS Reset
+    Inspired by https://www.joshwcomeau.com/css/custom-css-reset/
+\* =========================================================================== */
+
+/*
+1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+/*
+2. Remove default margin
+*/
+* {
+    margin: 0;
+}
+
+/*
+3. Improve text rendering
+*/
+body {
+    -webkit-font-smoothing: antialiased;
+}
+
+/*
+4. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+
+/*
+5. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+    font: inherit;
+}
+
+/*
+6. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+}

package/src/{css/utils/background/background.css → size/core/size.css}

@@ -1,5 +1,11 @@
 /* =========================================================================== *\
-    Background Color Utility
+    Size Utilities
 \* =========================================================================== */
 
+.h-100 {
+    height: 100%;
+}
 
+.w-100 {
+    width: 100%;
+}

package/src/size/lg/size.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Size Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .h-lg-100 {
+        height: 100%;
+    }
+    
+    .w-lg-100 {
+        width: 100%;
+    }
+}

package/src/size/md/size.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Size Utilities
+\* =========================================================================== */
+
+@media (--c-bp-md) {
+    .h-md-100 {
+        height: 100%;
+    }
+    
+    .w-md-100 {
+        width: 100%;
+    }
+}

package/src/{css/components/content/content.css → size/sm/size.css}

@@ -1,18 +1,13 @@
 /* =========================================================================== *\
-    Content
+    Size Utilities
 \* =========================================================================== */
 
-
-/* @define Content */
-
-.Content {
-    background: #fff;
-    padding: 2rem;
-}
-
-
 @media (--c-bp-sm) {
-    .Content {
-        padding: 2rem 1rem;
+    .h-sm-100 {
+        height: 100%;
+    }
+    
+    .w-sm-100 {
+        width: 100%;
     }
 }

package/src/size/xl/size.css

@@ -0,0 +1,13 @@
+/* =========================================================================== *\
+    Size Utilities
+\* =========================================================================== */
+
+@media (--c-bp-xl) {
+    .h-xl-100 {
+        height: 100%;
+    }
+    
+    .w-xl-100 {
+        width: 100%;
+    }
+}

package/src/spacing/spacing.css

@@ -0,0 +1,15 @@
+/* =========================================================================== *\
+    Spacing Utilities
+\* =========================================================================== */
+
+/* Used to remove space from the first element within an element */
+.first-child-st-0 > *:first-child {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+}
+
+/* Used to remove space from the last element within an element */
+.last-child-sb-0 > *:last-child {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+}

package/src/{css/components/footer/footer.css → typography/align.css}

@@ -1,6 +1,7 @@
 /* =========================================================================== *\
-    Footer
+    Text Align Utilities
 \* =========================================================================== */
 
-
-/* @define Footer */
+.text-center {
+    text-align: center;
+}

package/src/typography/transform.css

@@ -0,0 +1,15 @@
+/* =========================================================================== *\
+    Text Transform Utilities
+\* =========================================================================== */
+
+.text-lower {
+    text-transform: lowercase;
+}
+
+.text-upper {
+    text-transform: uppercase;
+}
+
+.text-capital {
+    text-transform: capitalize;
+}

package/src/{css/components/form/label.css → typography/weight.css}

@@ -1,11 +1,11 @@
 /* =========================================================================== *\
-    FIELD LABEL
+    Font Weight Utilities
 \* =========================================================================== */
 
-.FormLabel {
-    font-weight: bold;
+.font-normal {
+    font-weight: 400;
 }
 
-.FormLabel--block {
-    display: block;
+.font-bold {
+    font-weight: 700;
 }

package/gulp/config.js

@@ -1,41 +0,0 @@
-// The source directory to build from
-var src = 'src';
-// The base directory to build into. A temporary location for things that need to be built first before moving to distribution
-var build = '_build';
-// The full destination folder where assets (images, css, js) will be built into for distribution
-var dist = 'dist';
-
-/**
- * Data that is set to the config variable in gulpfile.js
- */
-module.exports = {
-    /**
-     * Holds the name of the CSS file to be generated
-     */
-    cssName: 'main.css',
-
-    /**
-     * Paths for different asset sources and their distribution path
-     */
-    paths: {
-        src: {
-            base: src,
-            css: [
-                src + '/css/main.css'
-            ],
-            cssBase: src + '/css',
-            stylelint: [src + '/css/**/*.css'],
-        },
-        build: {
-            base: build,
-            css: build + '/css'
-        },
-        dist: {
-            base: dist,
-            css: dist + '/css'
-        },
-        watch: {
-            css: [src + '/css/**/*.css']
-        }
-    }
-};

package/gulp/css.js

@@ -1,147 +0,0 @@
-/* =========================================================================== *\
-    Handle CSS files
-\* =========================================================================== */
-
-
-// Configuration and utilities
-const config = require('./config.js');
-const util = require('./utilities.js');
-
-// Require gulp
-const gulp = require('gulp');
-
-// Require node packages
-const fs = require('fs');
-
-// Require plugins
-const cached = require('gulp-cached');
-const changedInPlace = require('gulp-changed-in-place');
-const cleanCss = require('gulp-clean-css');
-const header = require('gulp-header');
-const mergeStream = require('merge-stream');
-const penthouse = require('penthouse');
-const plumber = require('gulp-plumber');
-const postcss = require('gulp-postcss');
-const postcssImport = require('postcss-import');
-const postcssCssNext = require('postcss-cssnext');
-const gulpStylelint = require('gulp-stylelint');
-const tap = require('gulp-tap');
-
-
-/**
- * Run the stylelint
- *
- * BEM Linter options sets the utilitySelectors just like
- * https://github.com/postcss/postcss-bem-linter/blob/master/lib/preset-patterns.js
- * but with "xs-" added in.
- */
-function runStylelint() {
-    return gulp.src(config.paths.src.stylelint)
-        .pipe(cached('Stylelint'))
-        .pipe(tap((file) => {
-            util.logFile(file, 'Linting');
-        }))
-        .pipe(plumber({errorHandler: util.onError}))
-        .pipe(gulpStylelint({
-            failAfterError: false,
-            fix: true,
-            reporters: [
-                {
-                    formatter: 'string',
-                    console: true
-                }
-            ]
-        }))
-        .pipe(gulp.dest(config.paths.src.cssBase));
-}
-
-// Set the display properties of the stylelint function
-runStylelint.displayName = 'stylelint';
-runStylelint.description = 'Runs the CSS linter';
-
-/**
- * Stylesheets
- * PostCSS processors list order is important. css-import has be first
- * and cssnano needs to be last
- */
-const processors = [
-    postcssImport,
-    postcssCssNext()
-];
-
-/**
- * Process the CSS files
- */
-function processCss() {
-    var tasks = config.paths.src.css.map(function(cssFile) {
-        return gulp.src(cssFile)
-            .pipe(tap((file) => {
-                util.logFile(file, 'Start Build CSS');
-            }))
-            .pipe(plumber({errorHandler: util.onError}))
-            .pipe(postcss(processors))
-            .pipe(cleanCss({level: 2, compatibility: 'ie8'}))
-            .pipe(changedInPlace({firstPass: true}))
-            .pipe(header(util.banner))
-            .pipe(tap((file) => {
-                util.logFile(file, 'Output CSS');
-            }))
-            .pipe(gulp.dest(config.paths.dist.css));
-    });
-    return mergeStream(tasks);
-}
-
-// Set the display properties of the process CSS function
-processCss.displayName = 'css';
-processCss.description = 'Combines, minifies, and cleans the CSS files';
-
-/**
- * Generate the critical CSS for each template
- */
-function criticalCss(callback) {
-    util.synchLoop(config.criticalCss, generateCriticalCSS, () => {
-        callback();
-    });
-}
-
-// Set the display properties of the critical CSS function
-criticalCss.description = 'Creates the inline CSS in a snippet to be included in the head for a page.';
-
-
-/**
- * Generate the critical CSS
- * @param {object} data The template data
- * @param {integer} i The loop value index
- * @param {function} callback The parameterless function to call on completion
- */
-function generateCriticalCSS(data, i, callback) {
-    const src = config.url + data.url;
-    const dest = config.paths.src.themeFolder + '/snippets/criticalcss-' + data.template + '.twig';
-    util.logFileTo('Critical CSS', src, dest);
-
-    penthouse({
-        url: src,
-        css: config.paths.dist.css  + '/' + config.cssName,
-        renderWaitTime: 500,
-        width: 1200,
-        height: 1200
-    }).then(criticalCss => {
-        fs.writeFile(
-            dest,
-            '<style>' + criticalCss + '</style>',
-            (err) => {
-                if (err) throw err;
-            }
-        );
-        callback();
-    }).catch(err => {
-        util.log('ERROR generating Critial CSS: ' + err);
-        callback();
-    });
-}
-
-// Export
-exports.criticalCss = criticalCss
-exports.css = gulp.series(runStylelint, processCss);
-exports.stylelint = runStylelint;
-