bullframe.css 4.2.0 → 4.2.1

package/{dist → docs/test-page}/index.html

@@ -8,21 +8,150 @@
 
   <title>Test page — bullframe.css Sass (SCSS) framework</title>
   <meta name="description"
-    content="A quick look at a wide range of HTML elements, divided into several sections and rendered into unusual combinations, for testing purposes only." />
+    content="Explore bullframe.css, a robust and fluid Sass (SCSS) framework for cross-browser compatibility. View a comprehensive range of HTML elements in dynamic combinations, designed for thorough testing and responsive design." />
 
   <!-- https://realfavicongenerator.net/ -->
-  <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png?v=PYqzMzgx6v" />
-  <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png?v=PYqzMzgx6v" />
-  <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png?v=PYqzMzgx6v" />
-  <link rel="mask-icon" href="./icons/safari-pinned-tab.svg?v=PYqzMzgx6v" color="#f95c1f" />
-  <link rel="shortcut icon" href="./icons/favicon.ico?v=PYqzMzgx6v" />
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/icons/apple-touch-icon.png?v=PYqzMzgx6v" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/favicon-32x32.png?v=PYqzMzgx6v" />
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/favicon-16x16.png?v=PYqzMzgx6v" />
+  <link rel="mask-icon" href="assets/icons/safari-pinned-tab.svg?v=PYqzMzgx6v" color="#f95c1f" />
+  <link rel="shortcut icon" href="assets/icons/favicon.ico?v=PYqzMzgx6v" />
   <meta name="msapplication-TileColor" content="#da532c" />
   <meta name="theme-color" content="#f95c1f" />
 
-  <link rel="stylesheet" href="css/bullframe-system-default.min.css?v4.2.0" />
-
-  <!-- this is just for a nicer demo -->
-  <link rel="stylesheet" href="assets-demo/css/style.css" />
+  <link rel="stylesheet" href="./css/bullframe-system-default.min.css?v4.2.1" />
+
+  <!-- custom styles -->
+  <style>
+    .test .bf-row {
+      margin-bottom: 20px;
+      margin-bottom: 2rem;
+    }
+
+    .test [class^='bf-col'] {
+      margin-bottom: 10px;
+      margin-bottom: 1rem;
+    }
+
+    @media (max-width: 575px) {
+      .test header {
+        margin-bottom: 1rem;
+      }
+    }
+
+    .test header h1 {
+      margin-top: 10px;
+      margin-top: 1rem;
+      margin-bottom: 0;
+    }
+
+    .test header h1 span {
+      color: #f95c1f;
+    }
+
+    @media (min-width: 600px) {
+      .test header h1 {
+        font-size: 55px;
+        font-size: 5.5rem;
+      }
+    }
+
+    @media (min-width: 1000px) {
+      .test header h1 {
+        font-size: 70px;
+        font-size: 7rem;
+      }
+    }
+
+    .test .description {
+      max-width: 800px;
+      max-width: 80rem;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .test header a {
+      margin-right: 10px;
+      margin-right: 1rem;
+    }
+
+    @media (min-width: 600px) {
+      .test .h2--section {
+        font-size: 40px;
+        font-size: 4rem;
+      }
+    }
+
+    .test .h2--section {
+      padding-top: 20px;
+      padding-bottom: 2rem;
+      text-transform: uppercase;
+    }
+
+    .test legend {
+      padding-bottom: 10px;
+      padding-bottom: 1rem;
+    }
+
+    .test button,
+    .test .bf-btn,
+    .test .input-image,
+    .test input,
+    .test select,
+    .test textarea {
+      margin-bottom: 20px;
+      margin-bottom: 2rem;
+    }
+
+    .test [type='image'],
+    .test [type='checkbox'],
+    .test [type='radio'] {
+      margin-bottom: 0;
+    }
+
+    .test .grid .col-wrapper {
+      background-color: #888;
+      height: 60px;
+      height: 6rem;
+      line-height: 60px;
+      line-height: 6rem;
+      overflow-y: hidden;
+      color: #fff;
+      font-size: 80%;
+      text-align: center;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      font-weight: 700;
+    }
+
+    .test .grid .bf-row:nth-child(odd) .col-wrapper {
+      background-color: #ccc;
+      color: #000;
+    }
+
+    @media (max-width: 767px) {
+      .test .grid .bf-row {
+        margin-bottom: 0;
+      }
+
+      .test .grid [class*='bf-col-'] {
+        margin-bottom: 20px;
+        margin-bottom: 2rem;
+      }
+    }
+
+    .test .back-to-top {
+      text-align: center;
+      display: block;
+      margin: 60px 0 120px 0;
+      margin: 6rem 0 12rem 0;
+    }
+
+    .test .back-to-top a i {
+      vertical-align: middle;
+      font-style: normal;
+    }
+  </style>
 </head>
 
 <body class="bf-responsive-typography bf-reduced-motion">

package/gulpfile.js

@@ -1,16 +1,12 @@
-// Gulpfile for bullframe.css
 'use strict';
 
 // Initialize modules
-// Import specific gulp API functions lets us write them below as series()
-// instead of gulp.series()
 const { src, dest, watch, series, parallel } = require('gulp');
 
 // Upgrade gulp-sass to v5
-// https://github.com/dlmanning/gulp-sass/tree/master#migrating-to-version-5
 const sass = require('gulp-sass')(require('sass'));
 
-// Import all the Gulp-related packages we want to use
+// Import all the Gulp-related packages
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
@@ -20,7 +16,7 @@ const browserSync = require('browser-sync');
 
 const server = browserSync.create();
 
-// setup the BrowserSync server
+// Setup the BrowserSync server
 function reload(done) {
   server.reload();
   done();
@@ -30,7 +26,7 @@ function serve(done) {
   server.init({
     server: {
       baseDir: './dist/',
-      index: './index.html',
+      index: '../docs/test-page/index.html',
     },
   });
   done();
@@ -43,55 +39,36 @@ const files = {
 
 // Sass task
 function scssTask() {
-  return (
-    src(files.scssPath, {
-      sourcemaps: true,
-    })
-      // compile SCSS to CSS
-      .pipe(sass.sync({ outputStyle: 'expanded' }))
-
-      // replace Node-sass auto-built charset with a useful comment
-      // https://stackoverflow.com/a/51886455/4027098
-      .pipe(
-        replace(
-          '@charset "UTF-8";',
-          '/*! bullframe.css v4.2.0 | MIT License | https://github.com/marcop135/bullframe.css */'
-        )
+  return src(files.scssPath, { sourcemaps: true })
+    .pipe(
+      sass.sync({ outputStyle: 'expanded' }).on('error', sass.logError)
+    ) // Compile SCSS to CSS
+    .pipe(
+      replace(
+        '@charset "UTF-8";',
+        '/*! bullframe.css v4.2.1 | MIT License | https://github.com/marcop135/bullframe.css */'
       )
-
-      // PostCSS plugins
-      .pipe(postcss([autoprefixer()]))
-
-      // write pre-minifies styles
-      .pipe(dest('dist/css'))
-
-      // PostCSS plugins
-      .pipe(postcss([cssnano()]))
-
-      // rename files
-      .pipe(
-        rename({
-          suffix: '.min',
-        })
-      )
-
-      // put final CSS in dist folder
-      .pipe(
-        dest('dist/css', {
-          sourcemaps: '.',
-        })
-      )
-  );
+    ) // Replace Node-sass auto-built charset with a useful comment
+    .pipe(postcss([autoprefixer()])) // Apply PostCSS plugins
+    .pipe(dest('dist/css')) // Write pre-minified styles
+    .pipe(postcss([cssnano()])) // Minify CSS
+    .pipe(
+      rename({
+        suffix: '.min',
+      })
+    ) // Rename files
+    .pipe(dest('dist/css', { sourcemaps: '.' })); // Output final CSS
 }
 
-// watch task: watch SCSS, JS, image and HTML files for changes
-// If any change, run scss, js and image tasks simultaneously
-// then reload via browsersync
+
+// Watch task: watch SCSS, JS, image, and HTML files for changes
 function watchTask() {
   watch([files.scssPath], series(parallel(scssTask), reload));
 }
 
-// Export the default Gulp task so it can be run
-// Runs the scss, js, image and cache busting tasks simultaneously
-// start local server and watch tasks
-exports.default = series(parallel(scssTask), serve, watchTask);
+// Export the default Gulp task
+exports.default = series(
+  parallel(scssTask),
+  serve,
+  watchTask
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bullframe.css",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "Solid, fluid, cross-browser Sass (SCSS) framework.",
   "jsdelivr": "dist/css/bullframe.css",
   "unpkg": "dist/css/bullframe.css",

package/src/scss/bullframe-utilities.scss

@@ -1,4 +1,4 @@
-/*! bullframe.css v4.2.0 | MIT License | https://github.com/marcop135/bullframe.css */
+/*! bullframe.css v4.2.1 | MIT License | https://github.com/marcop135/bullframe.css */
 /* custom build: bullframe-utilities */
 
 // colors, spacing and breakpoint variables

package/dist/assets-demo/css/style.css

@@ -1,130 +0,0 @@
-/* just for a nicer demo */
-
-.test .bf-row {
-  margin-bottom: 20px;
-  margin-bottom: 2rem;
-}
-
-.test [class^='bf-col'] {
-  margin-bottom: 10px;
-  margin-bottom: 1rem;
-}
-
-@media (max-width: 575px) {
-  .test header {
-    margin-bottom: 1rem;
-  }
-}
-
-.test header h1 {
-  margin-top: 10px;
-  margin-top: 1rem;
-  margin-bottom: 0;
-}
-
-.test header h1 span {
-  color: #f95c1f;
-}
-
-@media (min-width: 600px) {
-  .test header h1 {
-    font-size: 55px;
-    font-size: 5.5rem;
-  }
-}
-
-@media (min-width: 1000px) {
-  .test header h1 {
-    font-size: 70px;
-    font-size: 7rem;
-  }
-}
-
-.test .description {
-  max-width: 800px;
-  max-width: 80rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.test header a {
-  margin-right: 10px;
-  margin-right: 1rem;
-}
-
-@media (min-width: 600px) {
-  .test .h2--section {
-    font-size: 40px;
-    font-size: 4rem;
-  }
-}
-
-.test .h2--section {
-  padding-top: 20px;
-  padding-bottom: 2rem;
-  text-transform: uppercase;
-}
-
-.test legend {
-  padding-bottom: 10px;
-  padding-bottom: 1rem;
-}
-
-.test button,
-.test .bf-btn,
-.test .input-image,
-.test input,
-.test select,
-.test textarea {
-  margin-bottom: 20px;
-  margin-bottom: 2rem;
-}
-
-.test [type='image'],
-.test [type='checkbox'],
-.test [type='radio'] {
-  margin-bottom: 0;
-}
-
-.test .grid .col-wrapper {
-  background-color: #888;
-  height: 60px;
-  height: 6rem;
-  line-height: 60px;
-  line-height: 6rem;
-  overflow-y: hidden;
-  color: #fff;
-  font-size: 80%;
-  text-align: center;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  font-weight: 700;
-}
-
-.test .grid .bf-row:nth-child(odd) .col-wrapper {
-  background-color: #ccc;
-  color: #000;
-}
-
-@media (max-width: 767px) {
-  .test .grid .bf-row {
-    margin-bottom: 0;
-  }
-
-  .test .grid [class*='bf-col-'] {
-    margin-bottom: 20px;
-    margin-bottom: 2rem;
-  }
-}
-
-.test .back-to-top {
-  text-align: center;
-  display: block;
-  margin: 60px 0 120px 0;
-  margin: 6rem 0 12rem 0;
-}
-
-.test .back-to-top a i {
-  vertical-align: middle;
-  font-style: normal;
-}