bullframe.css 4.1.2 → 4.2.1

package/{index.html → 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="./docs/test/icons/apple-touch-icon.png?v=PYqzMzgx6v" />
-  <link rel="icon" type="image/png" sizes="32x32" href="./docs/test/icons/favicon-32x32.png?v=PYqzMzgx6v" />
-  <link rel="icon" type="image/png" sizes="16x16" href="./docs/test/icons/favicon-16x16.png?v=PYqzMzgx6v" />
-  <link rel="mask-icon" href="./docs/test/icons/safari-pinned-tab.svg?v=PYqzMzgx6v" color="#f95c1f" />
-  <link rel="shortcut icon" href="./docs/test/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="./dist/css/bullframe-system-default.min.css?v4.1.1" />
-
-  <!-- this is just for a nicer demo -->
-  <link rel="stylesheet" href="./docs/test/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">
@@ -35,9 +164,9 @@
         role="button">Download</a>
       <a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
       <p class="description">
-        This an is a quick look at a wide range of HTML elements, divided into
+        This is a quick look at a wide range of HTML elements, divided into
         several sections and rendered into unusual combinations, for testing
-        purpose only.
+        purposes only.
       </p>
 
       <hr />
@@ -95,7 +224,7 @@
             The <em>em element</em> example<br />
             The <em>i element</em> example<br />
             The img element
-            <img src="../docs/test/images/placeholder-img-16x16.jpg" alt="just a placeholder" loading="lazy" />
+            <img src="../images/placeholder-img-16x16.jpg" alt="just a placeholder" loading="lazy" />
             example<br />
             The <ins>ins element</ins> example<br />
             The <kbd>kbd element</kbd> example<br />
@@ -323,7 +452,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
           <h3>Linked figure with an image and a caption</h3>
           <figure>
             <a href="#">
-              <img src="../docs/test/images/placeholder-img-800x40.jpg" alt="just a placeholder" loading="lazy" />
+              <img src="../images/placeholder-img-800x40.jpg" alt="just a placeholder" loading="lazy" />
             </a>
             <figcaption>The image above is 800x400 pixels</figcaption>
           </figure>
@@ -339,7 +468,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
         <div class="bf-col-6">
           <div class="bf-m-b-3">
             <h3>HTML5 video with controls</h3>
-            <video poster="./docs/test/images/video-poster.png" controls width="450">
+            <video poster="./images/video-poster.png" controls width="450">
               <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
                 type="video/webm" />
               <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
@@ -616,7 +745,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
           <h3>Clickable inputs</h3>
           <fieldset class="bf-m-b-3">
             <div class="input-image">
-              <input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
+              <input alt="Image (input)" src="../images/placeholder-img-130x14.jpg" type="image" /><br />
               <code>input type="image" (130x40px)</code>
             </div>
             <div>
@@ -639,7 +768,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
           <fieldset disabled>
             <h3>Clickable inputs (disabled)</h3>
             <div class="input-image">
-              <input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
+              <input alt="Image (input)" src="../images/placeholder-img-130x14.jpg" type="image" /><br />
               <code>input type="image" (130x40px)</code>
             </div>
             <div>

package/gulpfile.js

@@ -1,18 +1,12 @@
-// Gulp-starter repository
-// File processing boilerplate for HTML, Sass, JS, PNG, JPEG, GIF and SVG files with Gulp.js
-// https://github.com/marcop135/gulp-starter
 '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');
@@ -22,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();
@@ -31,8 +25,8 @@ function reload(done) {
 function serve(done) {
   server.init({
     server: {
-      baseDir: './',
-      index: './index.html',
+      baseDir: './dist/',
+      index: '../docs/test-page/index.html',
     },
   });
   done();
@@ -40,61 +34,41 @@ function serve(done) {
 
 // File paths to watch
 const files = {
-  htmlPath: './*.html',
   scssPath: 'src/scss/**/*.scss',
 };
 
 // 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.1.2 | 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.htmlPath, files.scssPath], series(parallel(scssTask), reload));
+  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/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  base = "/"
+  publish = "dist/"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bullframe.css",
-  "version": "4.1.2",
+  "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.1.2 | 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/docs/test/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;
-}