bullframe.css 5.1.0 → 6.0.0

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

@@ -1,225 +0,0 @@
-@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;
-}
-
-.bf-t-transform-none {
-  text-transform: none !important;
-}
-
-.bf-t-left {
-  text-align: left !important;
-}
-
-.bf-t-center {
-  text-align: center !important;
-}
-
-.bf-t-right {
-  text-align: right !important;
-}
-
-.bf-t-shadow {
-  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 {
-  font-style: italic !important;
-}
-
-// useful to 'reset' <i> inherited style
-.bf-t-style-normal {
-  font-style: normal !important;
-}
-
-// useful to 'reset' <b> inherited style
-.bf-t-weight-300 {
-  font-weight: 300 !important;
-}
-
-.bf-t-weight-400 {
-  font-weight: 400 !important;
-}
-
-.bf-t-weight-500 {
-  font-weight: 500 !important;
-}
-
-.bf-t-weight-600 {
-  font-weight: 600 !important;
-}
-
-.bf-t-weight-700 {
-  font-weight: 700 !important;
-}
-
-.bf-t-weight-800 {
-  font-weight: 800 !important;
-}
-
-.bf-text-break {
-  word-wrap: break-word !important;
-}
-
-.bf-t-truncate {
-  max-width: 100% !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  word-wrap: normal !important;
-}
-
-.bf-t-truncate--multiline-2 {
-  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;
-}
-
-.bf-t-truncate--multiline-3 {
-  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;
-
-  // this is a not standard CSS property, so it's for webkit only
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
-  // useful on iOS
-  // https://css-tricks.com/force-selection-text-block/#article-header-id-7
-  // https://ishadeed.com/article/selection-in-css scroll down to
-  // 'selection on mobile' section
-  -webkit-touch-callout: none !important;
-}
-
-.bf-font-sans-serif {
-  font-family:
-    /* 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,
-    /* 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',
-    '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',
-    'Noto Color Emoji' !important;
-}
-
-.bf-font-monospace {
-  font-family:
-    /* 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;
-}
-
-.bf-h1,
-.bf-h2,
-.bf-h3,
-.bf-h4,
-.bf-h5,
-.bf-h6 { // fallback
-  font-weight: 600 !important;
-  margin-top: 0 !important;
-  line-height: 1.2 !important;
-  margin-bottom: bf-v-space.$bf-spacing-lg-px !important;
-  margin-bottom: bf-v-space.$bf-spacing-lg-rem !important;
-}
-
-.bf-h1 {
-  font-size: 36px !important;
-  font-size: 3.6rem !important;
-}
-
-.bf-h2 {
-  font-size: 30px !important;
-  font-size: 3rem !important;
-}
-
-.bf-h3 {
-  font-size: 24px !important;
-  font-size: 2.4rem !important;
-}
-
-.bf-h4 {
-  font-size: 20px !important;
-  font-size: 2rem !important;
-}
-
-.bf-h5,
-.bf-h6 {
-  font-size: 16px !important;
-  font-size: 1.6rem !important;
-}
-
-p.bf-lead {
-  font-size: 120% !important;
-}
-
-// responsive typography
-// https://codepen.io/marcop135/pen/eYmPmJm
-// https://css-tricks.com/snippets/css/fluid-typography/
-//
-// old browsers that don't support CSS variables ignore what follows
-// (mostly IE and Opera Mini)
-// in this way, old browsers will ignore 'calc' property too, avoiding issues
-// https://caniuse.com/#feat=calc
-// 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.5rem + 3 * ((100vw - 320px) / 680));
-  --body-rt-font-size-max: 1.8rem;
-}
-
-@media (min-width: 320px) {
-  body.bf-responsive-typography {
-    font-size: var(--body-rt-font-size-flex);
-  }
-}
-
-@media (min-width: 1000px) {
-  body.bf-responsive-typography {
-    font-size: var(--body-rt-font-size-max);
-  }
-}

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

@@ -1,83 +0,0 @@
-.bf-z-index-1 {
-  z-index: 1;
-}
-
-.bf-z-index-2 {
-  z-index: 2;
-}
-
-.bf-z-index-3 {
-  z-index: 3;
-}
-
-.bf-z-index-4 {
-  z-index: 4;
-}
-
-.bf-z-index-5 {
-  z-index: 5;
-}
-
-.bf-z-index-6 {
-  z-index: 6;
-}
-
-.bf-z-index-7 {
-  z-index: 7;
-}
-
-.bf-z-index-8 {
-  z-index: 8;
-}
-
-.bf-z-index-9 {
-  z-index: 9;
-}
-
-.bf-z-index-10 {
-  z-index: 10;
-}
-
-.bf-z-index-20 {
-  z-index: 20;
-}
-
-.bf-z-index-30 {
-  z-index: 30;
-}
-
-.bf-z-index-40 {
-  z-index: 40;
-}
-
-.bf-z-index-50 {
-  z-index: 50;
-}
-
-.bf-z-index-60 {
-  z-index: 60;
-}
-
-.bf-z-index-70 {
-  z-index: 70;
-}
-
-.bf-z-index-80 {
-  z-index: 80;
-}
-
-.bf-z-index-90 {
-  z-index: 90;
-}
-
-.bf-z-index-100 {
-  z-index: 100;
-}
-
-.bf-z-index-200 {
-  z-index: 200;
-}
-
-.bf-z-index-300 {
-  z-index: 200;
-}

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

@@ -1,6 +0,0 @@
-$bf-breakpoint-xs: 0;
-$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,34 +0,0 @@
-@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
-
-// hex to rgba online converter http://www.hex2rgba.devoth.com/
-
-// backgrounds, texts and borders
-$bf-white: #fff; // rgba(255,255,255,1)
-$bf-light: #f0f0f0; // rgba(240,240,240,1)
-$bf-gray-light-extra: #e9e9e9; // rgba(233,233,233,1)
-$bf-gray-light: #ccc; // rgba(204,204,204,1)
-$bf-gray: #999; // rgba(153,153,153,1)
-$bf-gray-dark: #666; // rgba(102,102,102,1)
-$bf-gray-dark-extra: #333; // rgba(51,51,51,1)
-$bf-dark: #222; // rgba(34,34,34,1)
-$bf-dark-extra: #111; // rgba(17,17,17,1)
-$bf-black: #000; // rgba(0,0,0,1)
-
-// <mark> and <ins>
-$bf-yellow-light: #ff9; // rgba(255,255,153,1)
-$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)
-
-// invalid forms
-$bf-red: #f00; // rgba(255,0,0,1)

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

@@ -1,24 +0,0 @@
-// customise this spacing selection as needed
-
-// the REM unit is the default,
-// preceded by the PX unit as fallback for old browsers (IE)
-// https://caniuse.com/#search=rem
-//
-// e.g.
-// html { font-size: 62.5%; }
-// body { font-size: 16px; }
-// h1 { font-size: 30px; font-size: 3rem; }
-
-$bf-spacing-sm-px: 2.5px;
-$bf-spacing-md-px: 5px;
-$bf-spacing-lg-px: 10px;
-$bf-spacing-xl-px: 20px;
-$bf-spacing-xxl-px: 30px;
-$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-rem: 1.5rem;

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

@@ -1,8 +0,0 @@
-$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-rem: 1.6rem;
-$bf-body-line-height: 1.5;

package/vite.config.js

@@ -1,148 +0,0 @@
-// Vite config tools and dependencies
-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";
-import postcss from "postcss";
-
-// Custom PostCSS plugin: adds license header as a comment at the top of each CSS file
-const addHeader = () => {
-  return {
-    postcssPlugin: "add-header",
-    Once(root) {
-      root.prepend({
-        type: "comment",
-        text: "! Bullframe CSS v5.1.0 | MIT License | https://github.com/marcop135/bullframe.css ",
-      });
-    },
-  };
-};
-addHeader.postcss = true;
-
-// Custom Vite plugin: compiles all SCSS files (except partials) to CSS and minified CSS
-function buildAllScss() {
-  return {
-    name: "build-all-scss",
-    async closeBundle() {
-      // Find all SCSS files in src/scss (excluding partials that start with _)
-      const files = await glob("src/scss/**/*.scss");
-      const scssFiles = files.filter(
-        (file) => !path.basename(file).startsWith("_")
-      );
-
-      // Output directory for generated CSS
-      const outDir = path.resolve("dist/css");
-      fs.mkdirSync(outDir, { recursive: true });
-
-      // Compile and process each SCSS file
-      for (const file of scssFiles) {
-        const name = path.basename(file, ".scss");
-        const outFile = path.join(outDir, `${name}.css`);
-        const minFile = path.join(outDir, `${name}.min.css`);
-
-        // Step 1: Compile SCSS to CSS with source maps
-        const result = await sass.compileAsync(file, {
-          style: "expanded",
-          sourceMap: true,
-          sourceMapIncludeSources: true,
-        });
-
-        // Step 2: Run PostCSS with header + autoprefixer
-        const postcssResult = await postcss([
-          addHeader(),
-          autoprefixer(),
-        ]).process(result.css, {
-          from: path.resolve(file),
-          to: outFile,
-          map: {
-            prev: result.sourceMap ? JSON.stringify(result.sourceMap) : false,
-            inline: false,
-            annotation: true,
-          },
-        });
-
-        // Write normal CSS and source map
-        fs.writeFileSync(outFile, postcssResult.css);
-        if (postcssResult.map) {
-          fs.writeFileSync(`${outFile}.map`, postcssResult.map.toString());
-        }
-
-        // Step 3: Minify with cssnano + autoprefixer (again) + source maps
-        const minified = await postcss([autoprefixer(), cssnano()]).process(
-          postcssResult.css,
-          {
-            from: outFile,
-            to: minFile,
-            map: {
-              prev: postcssResult.map ? postcssResult.map.toString() : false,
-              inline: false,
-              annotation: true,
-            },
-          }
-        );
-
-        // Write minified CSS and source map
-        fs.writeFileSync(minFile, minified.css);
-        if (minified.map) {
-          fs.writeFileSync(`${minFile}.map`, minified.map.toString());
-        }
-      }
-    },
-  };
-}
-
-// Copy static files from src/docs to dist/docs (e.g. demo HTML, images, etc.)
-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);
-    },
-  };
-}
-
-// Main Vite config
-export default defineConfig({
-  root: "src", // Vite project root
-  build: {
-    outDir: "../dist", // Output directory
-    emptyOutDir: true, // Clean before build
-    rollupOptions: {
-      input: path.resolve(__dirname, "src/docs/demo/index.html"), // Entry point for HTML
-      output: {
-        entryFileNames: `[name].js`,
-        chunkFileNames: `[name].js`,
-        assetFileNames: `[name][extname]`, // Keep asset file names flat
-      },
-    },
-    assetsDir: "", // No subdir for assets
-    sourcemap: true, // Enable source maps
-  },
-  plugins: [buildAllScss()], // Use the custom SCSS build plugin
-  server: {
-    open: "/docs/demo/index.html", // Dev server opens demo page
-  },
-});