bullframe.css 4.2.2 → 5.0.1

package/src/scss/utilities/_utility-spacing.scss

@@ -1,3 +1,9 @@
+@use '../variables/variables-colors' as bf-v-color;
+@use '../variables/variables-texts' as bf-v-text;
+@use '../variables/variables-spacing' as bf-v-space;
+@use '../variables/variables-breakpoints' as bf-v-bp;
+@use 'sass:color';
+
 // this is something similar to Bootstrap's spacing utility
 // https://getbootstrap.com/docs/4.4/utilities/spacing/
 
@@ -24,43 +30,51 @@
 }
 
 .bf-m-1 {
-  margin-bottom: $bf-spacing-md-px !important;
-  margin-bottom: $bf-spacing-md-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-md-rem !important;
 }
 
 .bf-m-2 {
-  margin-bottom: $bf-spacing-lg-px !important;
-  margin-bottom: $bf-spacing-lg-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;
 }
 
 .bf-m-3 {
-  margin-bottom: $bf-spacing-xl-px !important;
-  margin-bottom: $bf-spacing-xl-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-xl-rem !important;
 }
 
 .bf-m-4 {
-  margin-bottom: $bf-spacing-xxl-px !important;
-  margin-bottom: $bf-spacing-xxl-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
+}
+
+.bf-m-t-1 {
+  margin-top: bf-v-space.$bf-spacing-md-rem !important;
+}
+
+.bf-m-t-2 {
+  margin-top: bf-v-space.$bf-spacing-lg-rem !important;
+}
+
+.bf-m-t-3 {
+  margin-top: bf-v-space.$bf-spacing-xl-rem !important;
+}
+
+.bf-m-t-4 {
+  margin-top: bf-v-space.$bf-spacing-xxl-rem !important;
 }
 
 .bf-m-b-1 {
-  margin-bottom: $bf-spacing-md-px !important;
-  margin-bottom: $bf-spacing-md-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-md-rem !important;
 }
 
 .bf-m-b-2 {
-  margin-bottom: $bf-spacing-lg-px !important;
-  margin-bottom: $bf-spacing-lg-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;
 }
 
 .bf-m-b-3 {
-  margin-bottom: $bf-spacing-xl-px !important;
-  margin-bottom: $bf-spacing-xl-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-xl-rem !important;
 }
 
 .bf-m-b-4 {
-  margin-bottom: $bf-spacing-xxl-px !important;
-  margin-bottom: $bf-spacing-xxl-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
 }
 
 // paddings
@@ -86,61 +100,49 @@
 }
 
 .bf-p-1 {
-  padding-bottom: $bf-spacing-md-px !important;
-  padding-bottom: $bf-spacing-md-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-md-rem !important;
 }
 
 .bf-p-2 {
-  padding-bottom: $bf-spacing-lg-px !important;
-  padding-bottom: $bf-spacing-lg-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-lg-rem !important;
 }
 
 .bf-p-3 {
-  padding-bottom: $bf-spacing-xl-px !important;
-  padding-bottom: $bf-spacing-xl-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-xl-rem !important;
 }
 
 .bf-p-4 {
-  padding-bottom: $bf-spacing-xxl-px !important;
-  padding-bottom: $bf-spacing-xxl-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
 }
 
 .bf-p-t-1 {
-  padding-top: $bf-spacing-md-px !important;
-  padding-top: $bf-spacing-md-rem !important;
+  padding-top: bf-v-space.$bf-spacing-md-rem !important;
 }
 
 .bf-p-t-2 {
-  padding-top: $bf-spacing-lg-px !important;
-  padding-top: $bf-spacing-lg-rem !important;
+  padding-top: bf-v-space.$bf-spacing-lg-rem !important;
 }
 
 .bf-p-t-3 {
-  padding-top: $bf-spacing-xl-px !important;
-  padding-top: $bf-spacing-xl-rem !important;
+  padding-top: bf-v-space.$bf-spacing-xl-rem !important;
 }
 
 .bf-p-t-4 {
-  padding-top: $bf-spacing-xxl-px !important;
-  padding-top: $bf-spacing-xxl-rem !important;
+  padding-top: bf-v-space.$bf-spacing-xxl-rem !important;
 }
 
 .bf-p-b-1 {
-  padding-bottom: $bf-spacing-md-px !important;
-  padding-bottom: $bf-spacing-md-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-md-rem !important;
 }
 
 .bf-p-b-2 {
-  padding-bottom: $bf-spacing-lg-px !important;
-  padding-bottom: $bf-spacing-lg-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-lg-rem !important;
 }
 
 .bf-p-b-3 {
-  padding-bottom: $bf-spacing-xl-px !important;
-  padding-bottom: $bf-spacing-xl-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-xl-rem !important;
 }
 
 .bf-p-b-4 {
-  padding-bottom: $bf-spacing-xxl-px !important;
-  padding-bottom: $bf-spacing-xxl-rem !important;
+  padding-bottom: bf-v-space.$bf-spacing-xxl-rem !important;
 }

package/src/scss/utilities/_utility-tables.scss

@@ -1,40 +1,34 @@
+@use '../variables/variables-colors' as bf-v-color;
+@use '../variables/variables-texts' as bf-v-text;
+@use '../variables/variables-spacing' as bf-v-space;
+@use '../variables/variables-breakpoints' as bf-v-bp;
+@use 'sass:color';
+
 .bf-table th,
 .bf-table td {
-  padding: $bf-spacing-lg-px;
-  padding: $bf-spacing-lg-rem;
-  border-bottom: 1px solid $bf-gray;
-  margin-bottom: $bf-spacing-md-px;
-  margin-bottom: $bf-spacing-md-rem;
+  padding: bf-v-space.$bf-spacing-lg-rem;
+  border-bottom: 1px solid bf-v-color.$bf-gray;
+  margin-bottom: bf-v-space.$bf-spacing-md-rem;
 }
 
 // responsive tables
-// ! issues on Opera 10-11, Opera Mobile Presto and Opera Mini
-// Read more about Opera: http://barrow.io/overflow-scrolling
-
 .bf-table-responsive {
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  // this is a not standard CSS property, so it's for IE only
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style
+  overflow: auto hidden;
   -ms-overflow-style: scrollbar;
 }
 
 .bf-table-responsive table {
   width: 100%;
-  margin-bottom: $bf-spacing-md-px;
-  margin-bottom: $bf-spacing-md-rem;
+  margin-bottom: bf-v-space.$bf-spacing-md-rem;
 }
 
 // force webkit scrollbars appearance
 .bf-table-responsive.scrollbar {
-  // this is a not standard CSS property, so it's for webkit only
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
   -webkit-overflow-scrolling: auto;
 }
 
 // zebra striping
 .bf-table--zebra tbody tr:nth-child(odd),
 .bf-table-responsive--zebra tbody tr:nth-child(odd) {
-  background-color: $bf-gray-light-extra;
+  background-color: bf-v-color.$bf-gray-light-extra;
 }

package/src/scss/utilities/_utility-texts.scss

@@ -1,3 +1,9 @@
+@use '../variables/variables-colors' as bf-v-color;
+@use '../variables/variables-texts' as bf-v-text;
+@use '../variables/variables-spacing' as bf-v-space;
+@use '../variables/variables-breakpoints' as bf-v-bp;
+@use 'sass:color';
+
 .bf-t-transform-uppercase {
   text-transform: uppercase !important;
 }
@@ -19,8 +25,8 @@
 }
 
 .bf-t-shadow {
-  text-shadow: 0 0 2px $bf-dark !important;
-  text-shadow: 0 0 .2rem $bf-dark !important;
+  text-shadow: 0 0 2px bf-v-color.$bf-dark !important;
+  text-shadow: 0 0 0.2rem bf-v-color.$bf-dark !important;
 }
 
 .bf-t-italic {
@@ -73,6 +79,7 @@
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   display: -webkit-box !important;
+  line-clamp: 2 !important;
   -webkit-line-clamp: 2 !important;
   -webkit-box-orient: vertical !important;
 }
@@ -81,11 +88,11 @@
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   display: -webkit-box !important;
+  line-clamp: 3 !important;
   -webkit-line-clamp: 3 !important;
   -webkit-box-orient: vertical !important;
 }
 
-
 .bf-no-select {
   user-select: none !important;
 
@@ -100,30 +107,50 @@
 
 .bf-font-sans-serif {
   font-family:
-    /* Safari for OS X and iOS (San Francisco) */ -apple-system,
+    /* Safari for OS X and iOS (San Francisco) */
+    -apple-system,
     /* Chrome < 56 for OS X (San Francisco) */ BlinkMacSystemFont,
-    /* Windows */ 'Segoe UI', /* Android */ Roboto,
-    /* Linux with KDE */ Oxygen-Sans, /* Ubuntu (all variants) */ Ubuntu,
+    /* Windows */ 'Segoe UI',
+    /* Android */ Roboto,
+    /* Linux with KDE */ Oxygen-Sans,
+    /* Ubuntu (all variants) */ Ubuntu,
     /* Linux with GNOME Shell */ Cantarell,
-    /* macOS 1.10 and below */ 'Helvetica Neue', Helvetica,
-    /* Basic web fallback */ Arial, sans-serif,
-    /* emoji fonts */ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    /* macOS 1.10 and below */ 'Helvetica Neue',
+    Helvetica,
+    /* Basic web fallback */ Arial,
+    sans-serif,
+    /* emoji fonts */ 'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
     'Noto Color Emoji' !important;
 }
 
 .bf-font-serif {
-  font-family: Georgia, Times, 'Times New Roman', serif,
-    /* emoji fonts */ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  font-family:
+    Georgia,
+    Times,
+    'Times New Roman',
+    serif,
+    /* emoji fonts */ 'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
     'Noto Color Emoji' !important;
 }
 
 .bf-font-monospace {
   font-family:
-    /* macOS 1.10+ */ 'Menlo', /* Windows 6+ */ 'Consolas',
-    /* Android 4+ */ 'Roboto Mono', /* Ubuntu 1.10+ */ 'Ubuntu Monospace',
-    /* KDE Plasma 5+ */ 'Noto Mono', /* KDE Plasma 4+ */ 'Oxygen Mono',
-    /* Linux/OpenOffice fallback */ 'Liberation Mono', /* fallback */ monospace,
-    /* emoji fonts */ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    /* macOS 1.10+ */
+    Menlo,
+     Consolas,
+     'Roboto Mono',
+     'Ubuntu Monospace',
+     'Noto Mono',
+     'Oxygen Mono',
+     'Liberation Mono',
+     monospace,
+     'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
     'Noto Color Emoji' !important;
 }
 
@@ -132,13 +159,12 @@
 .bf-h3,
 .bf-h4,
 .bf-h5,
-.bf-h6 {
-  font-weight: 700 !important; // fallback
+.bf-h6 { // fallback
   font-weight: 600 !important;
   margin-top: 0 !important;
   line-height: 1.2 !important;
-  margin-bottom: $bf-spacing-lg-px !important;
-  margin-bottom: $bf-spacing-lg-rem !important;
+  margin-bottom: bf-v-space.$bf-spacing-lg-px !important;
+  margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;
 }
 
 .bf-h1 {
@@ -182,8 +208,8 @@ p.bf-lead {
 // https://caniuse.com/#feat=css-variables
 // https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 body.bf-responsive-typography {
-  --body-rt-font-size-flex: calc(1.6rem + 3 * ((100vw - 320px) / 680));
-  --body-rt-font-size-max: 1.9rem;
+  --body-rt-font-size-flex: calc(1.5rem + 3 * ((100vw - 320px) / 680));
+  --body-rt-font-size-max: 1.8rem;
 }
 
 @media (min-width: 320px) {

package/src/scss/utilities/_utility-z-index.scss

@@ -80,4 +80,4 @@
 
 .bf-z-index-300 {
   z-index: 200;
-}
+}

package/src/scss/variables/_variables-breakpoints.scss

@@ -3,3 +3,4 @@ $bf-breakpoint-sm: 576px;
 $bf-breakpoint-md: 768px;
 $bf-breakpoint-lg: 992px;
 $bf-breakpoint-xl: 1200px;
+$bf-breakpoint-xxl: 1400px;

package/src/scss/variables/_variables-colors.scss

@@ -1,6 +1,9 @@
-// ! CSS Variables (Custom Properties) are not IE-friendly
-// https://caniuse.com/#feat=css-variables
-// let's Sass do the job instead
+@use 'sass:color';
+
+// TIP: make colors lighter/darker with Sass
+// https://sass-lang.com/documentation/modules/color/
+// e.g., lighter: "color: color.adjust($gray, $lightness: 15%);"
+// e.g., darker: "color: color.adjust($gray, $lightness: -15%);"
 
 // customise/enlarge this small selection as needed
 
@@ -25,7 +28,7 @@ $bf-yellow: #ff0; // rgba(255,255,0,1)
 // anchors and accent
 $bf-blue: #007bff; // rgba(0,123,255,1)
 $bf-blue-light: #0056b3; // rgba(0,86,179,1)
-$bf-blue-light-extra: #bed8fe; //rgba(190, 216, 254, 1)
+$bf-blue-light-extra: #bed8fe; // rgba(190, 216, 254, 1)
 
 // invalid forms
-$bf-red: #ff0000; // rgba(255,0,0,1)
+$bf-red: #f00; // rgba(255,0,0,1)

package/src/scss/variables/_variables-spacing.scss

@@ -14,13 +14,11 @@ $bf-spacing-md-px: 5px;
 $bf-spacing-lg-px: 10px;
 $bf-spacing-xl-px: 20px;
 $bf-spacing-xxl-px: 30px;
-
-$bf-spacing-sm-rem: .25rem;
-$bf-spacing-md-rem: .5rem;
+$bf-spacing-sm-rem: 0.25rem;
+$bf-spacing-md-rem: 0.5rem;
 $bf-spacing-lg-rem: 1rem;
 $bf-spacing-xl-rem: 2rem;
 $bf-spacing-xxl-rem: 3rem;
 
 // ! grid system only
-$bf-spacing-grid-gutter-px: 15px;
-$bf-spacing-grid-gutter-rem: 1.5rem;
+$bf-spacing-grid-gutter-rem: 1.5rem;

package/src/scss/variables/_variables-texts.scss

@@ -1,12 +1,8 @@
-$bf-font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-  Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
+$bf-font-sans-serif:
+  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol', 'Noto Color Emoji';
 $bf-font-serif: Georgia, Times, 'Times New Roman', serif;
-
-$bf-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-  'Courier New', monospace;
-
-$bf-body-font-size-px: 16px;
+$bf-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 $bf-body-font-size-rem: 1.6rem;
 $bf-body-line-height: 1.5;

package/vite.config.js

@@ -0,0 +1,116 @@
+import { defineConfig } from "vite";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import path from "path";
+import fs from "fs";
+import { glob } from "glob";
+import * as sass from "sass"; // Needed for compileAsync
+import postcss from "postcss";
+
+function buildAllScss() {
+  return {
+    name: "build-all-scss",
+    async closeBundle() {
+      const files = await glob("src/scss/**/*.scss");
+
+      const scssFiles = files.filter(
+        (file) => !path.basename(file).startsWith("_")
+      );
+
+      for (const file of scssFiles) {
+        const name = path.basename(file, ".scss");
+        const outDir = "dist/css";
+        const outFile = path.join(outDir, `${name}.css`);
+        const minFile = path.join(outDir, `${name}.min.css`);
+
+        const result = await sass.compileAsync(file, {
+          style: "expanded",
+          sourceMap: true,
+        });
+
+        const cssWithHeader =
+          `/*! Bullframe CSS v5.0.0 | MIT License | https://github.com/marcop135/bullframe.css */\n` +
+          result.css;
+
+        const postcssResult = await postcss([autoprefixer()]).process(
+          cssWithHeader,
+          {
+            from: file,
+            to: outFile,
+            map: {
+              prev: result.sourceMap,
+              inline: false,
+            },
+          }
+        );
+
+        fs.mkdirSync(outDir, { recursive: true });
+        fs.writeFileSync(outFile, postcssResult.css);
+        fs.writeFileSync(`${outFile}.map`, postcssResult.map.toString());
+
+        const minified = await postcss([autoprefixer(), cssnano()]).process(
+          cssWithHeader,
+          {
+            from: file,
+            to: minFile,
+            map: { inline: false },
+          }
+        );
+
+        fs.writeFileSync(minFile, minified.css);
+        fs.writeFileSync(`${minFile}.map`, minified.map.toString());
+      }
+    },
+  };
+}
+
+function copyDocsFiles() {
+  return {
+    name: "copy-docs-files",
+    closeBundle() {
+      const srcDir = path.resolve(__dirname, "src/docs");
+      const destDir = path.resolve(__dirname, "dist/docs");
+
+      function copyRecursive(src, dest) {
+        if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+
+        const entries = fs.readdirSync(src, { withFileTypes: true });
+
+        for (const entry of entries) {
+          const srcPath = path.join(src, entry.name);
+          const destPath = path.join(dest, entry.name);
+
+          if (entry.isDirectory()) {
+            copyRecursive(srcPath, destPath);
+          } else {
+            fs.copyFileSync(srcPath, destPath);
+          }
+        }
+      }
+
+      copyRecursive(srcDir, destDir);
+    },
+  };
+}
+
+export default defineConfig({
+  root: "src",
+  build: {
+    outDir: "../dist",
+    emptyOutDir: true,
+    rollupOptions: {
+      input: path.resolve(__dirname, "src/docs/demo/index.html"),
+      output: {
+        entryFileNames: `[name].js`,
+        chunkFileNames: `[name].js`,
+        assetFileNames: `[name][extname]`,
+      },
+    },
+    assetsDir: "", // Avoid dist/assets
+    sourcemap: true,
+  },
+  plugins: [buildAllScss(), copyDocsFiles()],
+  server: {
+    open: "/docs/demo/index.html",
+  },
+});

package/.nvmrc

@@ -1 +0,0 @@
-22.14

package/.prettierrc

@@ -1,19 +0,0 @@
-{
-  "arrowParens": "always",
-  "bracketSpacing": true,
-  "embeddedLanguageFormatting": "auto",
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "jsxBracketSameLine": false,
-  "jsxSingleQuote": false,
-  "printWidth": 80,
-  "proseWrap": "preserve",
-  "quoteProps": "as-needed",
-  "requirePragma": false,
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "vueIndentScriptAndStyle": false
-}

package/gulpfile.js

@@ -1,67 +0,0 @@
-'use strict';
-
-// Initialize modules
-const { src, dest, watch, series, parallel } = require('gulp');
-
-// Upgrade gulp-sass to v5
-const sass = require('gulp-sass')(require('sass'));
-
-// Import all the Gulp-related packages
-const postcss = require('gulp-postcss');
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
-const rename = require('gulp-rename');
-const replace = require('gulp-replace');
-const browserSync = require('browser-sync');
-
-const server = browserSync.create();
-
-// Setup the BrowserSync server
-function reload(done) {
-  server.reload();
-  done();
-}
-
-function serve(done) {
-  server.init({
-    server: {
-      baseDir: './dist/',
-      index: '../docs/test-page/index.html',
-    },
-  });
-  done();
-}
-
-// File paths to watch
-const files = {
-  scssPath: 'src/scss/**/*.scss',
-};
-
-// Sass task
-function scssTask() {
-  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.2 | MIT License | https://github.com/marcop135/bullframe.css */'
-      )
-    ) // 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
-function watchTask() {
-  watch([files.scssPath], series(parallel(scssTask), reload));
-}
-
-// Export the default Gulp task
-exports.default = series(parallel(scssTask), serve, watchTask);