bullframe.css 4.2.1 → 5.0.0

package/src/scss/bullframe-classless-dark-prefers.scss

@@ -1,5 +1,2 @@
-/*! custom build: bullframe-classless-dark-prefers */
-// https://css-tricks.com/no-class-css-frameworks/
-
-@import 'bullframe-classless';
-@import 'utilities/utility-global-dark-prefers-classless';
+@use 'bullframe-classless' as bullframecssClassless;
+@use 'utilities/utility-global-dark-prefers-classless' as bfUtilGlobalDarkPrefersClassless;

package/src/scss/bullframe-classless-dark.scss

@@ -1,5 +1,2 @@
-/*! custom build: bullframe-classless-dark */
-// https://css-tricks.com/no-class-css-frameworks/
-
-@import 'bullframe-classless';
-@import 'utilities/utility-global-dark-classless';
+@use 'bullframe-classless' as bullframecssClassless;
+@use 'utilities/utility-global-dark-classless' as bfUtilGlobalDarkClassless;

package/src/scss/bullframe-classless-system-default.scss

@@ -1,5 +1,2 @@
-/*! custom build: bullframe-classless-system-default */
-// https://css-tricks.com/no-class-css-frameworks/
-
-@import 'bullframe-classless';
-@import 'utilities/utility-global-system-default-classless';
+@use 'bullframe-classless' as bullframecssClassless;
+@use 'utilities/utility-global-dark-prefers-classless' as bfUtilGlobalDarkPrefersClassless;

package/src/scss/bullframe-classless.scss

@@ -1,43 +1,49 @@
-/*! custom build: bullframe-classless */
-// https://css-tricks.com/no-class-css-frameworks/
-
-// colors, spacing and breakpoint variables
-// this is for an easy customisation
-@import 'variables/variables-colors';
-@import 'variables/variables-texts';
-@import 'variables/variables-spacing';
-@import 'variables/variables-breakpoints';
-
-// all about box-sizing and display
-@import 'miscellaneous/misc-layout';
-
-// this a wide range of text elements bug fixing and improvements
-@import 'typography/typography-html-body';
-@import 'typography/typography-headings';
-@import 'typography/typography-blockquotes';
-@import 'typography/typography-monospaced-elements';
-@import 'typography/typography-misc';
-
-// <a> linkage
-@import 'miscellaneous/misc-anchors';
-
-// <ul>, <ol> and <dl>
-@import 'miscellaneous/misc-lists';
-
-// img, audio, video, svg, and more
-@import 'miscellaneous/misc-embedded-content';
-
-// all about form elements
-@import 'forms/forms-normalization';
-@import 'forms/forms-styling';
-@import 'forms/forms-styling-select';
-@import 'forms/forms-styling-radio-checkbox';
-@import 'forms/forms-styling-range';
-
-// <table> and his elements
-@import 'miscellaneous/misc-tables';
-
-// this is just quick way to customise your styles
-// below these styles, you shouldn't override nothing but remove them
-// commented by default
-@import 'miscellaneous/misc-author-styles-in-css';
+@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 "mixins/mixin-layout" as bfMixinLayout;
+// @use "mixins/mixin-texts" as bfMixinTexts;
+// @use "mixins/mixin-grid-flex" as bfMixinGridFlex;
+
+@use 'miscellaneous/misc-layout' as bfMiscLayout;
+
+@use 'typography/typography-html-body' as bfTypographyHtmlBody;
+@use 'typography/typography-headings' as bfTypographyHeadings;
+@use 'typography/typography-blockquotes' as bfTypographyBlockquotes;
+@use 'typography/typography-monospaced-elements' as bfTypographyMonospacedElements;
+@use 'typography/typography-misc' as bfTypographyMisc;
+
+@use 'miscellaneous/misc-anchors' as bfMiscAnchors;
+@use 'miscellaneous/misc-focus' as bfMiscFocus;
+@use 'miscellaneous/misc-lists' as bfMiscLists;
+@use 'miscellaneous/misc-embedded-content' as bfMiscEmbeddedContent;
+@use 'miscellaneous/misc-interactive' as bfMiscInteractive;
+@use 'miscellaneous/misc-scrolling' as bfMiscScrolling;
+@use 'miscellaneous/misc-tables' as bfMiscTables;
+@use 'miscellaneous/misc-accessibility' as bfMiscAccessibility;
+
+@use 'forms/forms-normalization' as bfFormsNormalization;
+@use 'forms/forms-styling' as bfFormsStyling;
+@use 'forms/forms-styling-select' as bfFormsStylingSelect;
+@use 'forms/forms-styling-radio-checkbox' as bfFormsStylingRadioCheckbox;
+@use 'forms/forms-styling-range' as bfFormsStylingRange;
+
+// @use "utilities/utility-grid-system" as bfUtilityGridSystem;
+// @use "utilities/utility-layout" as bfUtilityLayout;
+// @use "utilities/utility-z-index" as bfUtilityZIndex;
+// @use "utilities/utility-spacing" as bfUtilitySpacing;
+// @use "utilities/utility-texts" as bfUtilityTexts;
+// @use "utilities/utility-buttons" as bfUtilityButtons;
+// @use "utilities/utility-form-states" as bfUtilityFormStates;
+// @use "utilities/utility-lists" as bfUtilityLists;
+// @use "utilities/utility-embeds" as bfUtilityEmbeds;
+// @use "utilities/utility-tables" as bfUtilityTables;
+// @use "utilities/utility-print" as bfUtilityPrint;
+// @use "utilities/utility-reduced-motion" as bfUtilityReducedMotion;
+
+@use 'custom/author-styles' as bfCustomAuthorStyles;
+@use 'miscellaneous/misc-shame' as bfMiscShame;
+
+@use 'utilities/utility-debugging' as bfUtilityDebugging;

package/src/scss/bullframe-dark-prefers.scss

@@ -1,4 +1,2 @@
-/*! custom build: bullframe-dark-prefers */
-
-@import 'bullframe';
-@import 'utilities/utility-global-dark-prefers';
+@use 'bullframe' as bullframecss;
+@use 'utilities/utility-global-dark-prefers' as bfUtilGlobalDarkPrefers;

package/src/scss/bullframe-dark.scss

@@ -1,4 +1,2 @@
-/*! custom build: bullframe-dark */
-
-@import 'bullframe';
-@import 'utilities/utility-global-dark';
+@use 'bullframe' as bullframecss;
+@use 'utilities/utility-global-dark' as bfUtilGlobalDark;

package/src/scss/bullframe-system-default.scss

@@ -1,4 +1,2 @@
-/*! custom build: bullframe-system-default */
-
-@import 'bullframe';
-@import 'utilities/utility-global-system-default';
+@use 'bullframe' as bullframecss;
+@use 'utilities/utility-global-system-default' as bfUtilGlobalSystemDefault;

package/src/scss/bullframe-utilities.scss

@@ -1,61 +1,21 @@
-/*! bullframe.css v4.2.1 | MIT License | https://github.com/marcop135/bullframe.css */
-/* custom build: bullframe-utilities */
-
-// colors, spacing and breakpoint variables
-// this is for an easy customisation
-@import 'variables/variables-colors';
-@import 'variables/variables-texts';
-@import 'variables/variables-spacing';
-@import 'variables/variables-breakpoints';
-
-// a set of default opinionated utilities
-// always put this as far as possible from the rest of the styles
-// 'print' and 'reduced-motion' are just an exception because target
-// exclusively a user behaviours
-//
-// take a look at all the Bootstrap's utilities
-// https://github.com/twbs/bootstrap/tree/v4.4.1/scss/utilities
-
-// the 12 columns IE8+ grid system
-@import 'utilities/utility-grid-system';
-
-// clearfix, sr-only, float, inline/block/flex, and more
-@import 'utilities/utility-layout';
-
-// CSS filters
-// https://developer.mozilla.org/en-US/docs/Web/CSS/filter
-// https://caniuse.com/css-filters
-@import 'utilities/utility-filters';
-
-@import 'utilities/utility-z-index';
-
-// reset margins and paddings adding a class
-@import 'utilities/utility-spacing';
-
-// font families, text truncated, text alignment, and more
-@import 'utilities/utility-texts';
-
-// '.btn' and '.btn--primary'
-@import 'utilities/utility-buttons';
-
-// '.placeholder', '.invalid', '.disabled'
-@import 'utilities/utility-form-states';
-
-// font families, text truncated, text alignment, and more
-@import 'utilities/utility-lists';
-
-// embed without worries iframes, video or whatever needed
-@import 'utilities/utility-embeds';
-
-// use this and the tables won't break the layout horizontally anymore
-@import 'utilities/utility-tables';
-
-// default print styles
-// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-@import 'utilities/utility-print';
-
-@import 'utilities/utility-reduced-motion';
-
-// this is useful for just for debugging purpouses
-// commented by default
-@import 'utilities/utility-debugging';
+@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 'mixins/mixin-layout' as bfMixinLayout;
+@use 'mixins/mixin-texts' as bfMixinTexts;
+@use 'mixins/mixin-grid-flex' as bfMixinGridFlex;
+
+@use 'utilities/utility-grid-system' as bfUtilityGridSystem;
+@use 'utilities/utility-layout' as bfUtilityLayout;
+@use 'utilities/utility-z-index' as bfUtilityZIndex;
+@use 'utilities/utility-spacing' as bfUtilitySpacing;
+@use 'utilities/utility-texts' as bfUtilityTexts;
+@use 'utilities/utility-buttons' as bfUtilityButtons;
+@use 'utilities/utility-form-states' as bfUtilityFormStates;
+@use 'utilities/utility-lists' as bfUtilityLists;
+@use 'utilities/utility-embeds' as bfUtilityEmbeds;
+@use 'utilities/utility-tables' as bfUtilityTables;
+@use 'utilities/utility-print' as bfUtilityPrint;
+@use 'utilities/utility-reduced-motion' as bfUtilityReducedMotion;

package/src/scss/bullframe.scss

@@ -1,121 +1,49 @@
-// colors, spacing and breakpoint variables
-// this is for an easy customisation
-@import 'variables/variables-colors';
-@import 'variables/variables-texts';
-@import 'variables/variables-spacing';
-@import 'variables/variables-breakpoints';
-
-// all about box-sizing and display
-@import 'miscellaneous/misc-layout';
-
-// this a wide range of text elements bug fixing and improvements
-@import 'typography/typography-html-body';
-@import 'typography/typography-headings';
-@import 'typography/typography-blockquotes';
-@import 'typography/typography-monospaced-elements';
-@import 'typography/typography-misc';
-
-// <a> linkage
-@import 'miscellaneous/misc-anchors';
-
-// outline styles
-@import 'miscellaneous/misc-focus';
-
-// <ul>, <ol> and <dl>
-@import 'miscellaneous/misc-lists';
-
-// img, audio, video, svg, and more
-@import 'miscellaneous/misc-embedded-content';
-
-// all about form elements
-@import 'forms/forms-normalization';
-@import 'forms/forms-styling';
-@import 'forms/forms-styling-select';
-@import 'forms/forms-styling-radio-checkbox';
-@import 'forms/forms-styling-range';
-
-// <table> and his elements
-@import 'miscellaneous/misc-tables';
-
-// this is just quick way to customise your styles
-// below these styles, you shouldn't override nothing but remove them
-// commented by default
-@import 'miscellaneous/misc-author-styles-in-css';
-
-// a set of default opinionated utilities
-// always put this as far as possible from the rest of the styles
-// 'print' and 'reduced-motion' are just an exception because target
-// exclusively a user behaviours
-//
-// take a look at all the Bootstrap's utilities
-// https://github.com/twbs/bootstrap/tree/v4.4.1/scss/utilities
-
-// the 12 columns IE8+ grid system
-@import 'utilities/utility-grid-system';
-
-// a flexbox-powered grid system alternative (IE10+)
-@import 'mixins/mixin-grid-flex';
-
-// clearfix, sr-only, float, inline/block/flex, and more
-@import 'utilities/utility-layout';
-
-@import 'utilities/utility-z-index';
-
-// reset margins and paddings adding a class
-@import 'utilities/utility-spacing';
-
-// font families, text truncated, text alignment, and more
-@import 'utilities/utility-texts';
-
-// '.btn' and '.btn--primary'
-@import 'utilities/utility-buttons';
-
-// '.placeholder', '.invalid', '.disabled'
-@import 'utilities/utility-form-states';
-
-// font families, text truncated, text alignment, and more
-@import 'utilities/utility-lists';
-
-// embed without worries iframes, video or whatever needed
-@import 'utilities/utility-embeds';
-
-// use this and the tables won't break the layout horizontally anymore
-@import 'utilities/utility-tables';
-
-// a base set of mixins
-@import 'mixins/mixin-layout';
-@import 'mixins/mixin-texts';
-
-// add dark mode via prefers-color-scheme media queries
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
-// No IE, Opera Mini and Samsung browser support
-// https://caniuse.com/#feat=prefers-color-scheme
-//
-// @import "utilities/utility-global-dark-prefers";
-
-// add dark using an <html> or <body> class
-// e.g. '.dark p { color: white }'
-// uncomment it if you need a dark mode as default
-//
-// @import "utilities/utility-global-dark";
-
-// default print styles
-// taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-@import 'utilities/utility-print';
-
-// styles for users that prefer reduced motion (e.g. user with disabilities)
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
-// The 'prefers-reduced-motion' CSS media feature is used to detect if the user
-// has requested that the system minimize the amount of animation or motion it uses.
-@import 'utilities/utility-reduced-motion';
-
-// improve several ARIA roles appearance
-@import 'miscellaneous/misc-accessibility';
-
-// shamy quick fixes...
-// https://csswizardry.com/2013/04/shame-css/
-@import 'miscellaneous/misc-shame';
-
-// this is useful for just for debugging purpouses
-// commented by default
-@import 'utilities/utility-debugging';
+@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 'mixins/mixin-layout' as bfMixinLayout;
+@use 'mixins/mixin-texts' as bfMixinTexts;
+@use 'mixins/mixin-grid-flex' as bfMixinGridFlex;
+
+@use 'miscellaneous/misc-layout' as bfMiscLayout;
+
+@use 'typography/typography-html-body' as bfTypographyHtmlBody;
+@use 'typography/typography-headings' as bfTypographyHeadings;
+@use 'typography/typography-blockquotes' as bfTypographyBlockquotes;
+@use 'typography/typography-monospaced-elements' as bfTypographyMonospacedElements;
+@use 'typography/typography-misc' as bfTypographyMisc;
+
+@use 'miscellaneous/misc-anchors' as bfMiscAnchors;
+@use 'miscellaneous/misc-focus' as bfMiscFocus;
+@use 'miscellaneous/misc-lists' as bfMiscLists;
+@use 'miscellaneous/misc-embedded-content' as bfMiscEmbeddedContent;
+@use 'miscellaneous/misc-interactive' as bfMiscInteractive;
+@use 'miscellaneous/misc-scrolling' as bfMiscScrolling;
+@use 'miscellaneous/misc-tables' as bfMiscTables;
+@use 'miscellaneous/misc-accessibility' as bfMiscAccessibility;
+
+@use 'forms/forms-normalization' as bfFormsNormalization;
+@use 'forms/forms-styling' as bfFormsStyling;
+@use 'forms/forms-styling-select' as bfFormsStylingSelect;
+@use 'forms/forms-styling-radio-checkbox' as bfFormsStylingRadioCheckbox;
+@use 'forms/forms-styling-range' as bfFormsStylingRange;
+
+@use 'utilities/utility-grid-system' as bfUtilityGridSystem;
+@use 'utilities/utility-layout' as bfUtilityLayout;
+@use 'utilities/utility-z-index' as bfUtilityZIndex;
+@use 'utilities/utility-spacing' as bfUtilitySpacing;
+@use 'utilities/utility-texts' as bfUtilityTexts;
+@use 'utilities/utility-buttons' as bfUtilityButtons;
+@use 'utilities/utility-form-states' as bfUtilityFormStates;
+@use 'utilities/utility-lists' as bfUtilityLists;
+@use 'utilities/utility-embeds' as bfUtilityEmbeds;
+@use 'utilities/utility-tables' as bfUtilityTables;
+@use 'utilities/utility-print' as bfUtilityPrint;
+@use 'utilities/utility-reduced-motion' as bfUtilityReducedMotion;
+
+@use 'custom/author-styles' as bfCustomAuthorStyles;
+@use 'miscellaneous/misc-shame' as bfMiscShame;
+
+@use 'utilities/utility-debugging' as bfUtilityDebugging;

package/src/scss/custom/_author-styles.scss

@@ -0,0 +1,5 @@
+@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';