@knighttower/bootstrap-mini
Advanced tools
@knighttower/bootstrap-mini - npm Package Compare versions
Comparing version 0.1.5 to 0.1.6
@@ -5,3 +5,3 @@ { | ||
| "description": "Abstracted Bootstrap for utility prototypes", | ||
| "version": "0.1.5", | ||
| "version": "0.1.6", | ||
| "keywords": [ | ||
@@ -8,0 +8,0 @@ "css", |
108
README.md
@@ -14,3 +14,3 @@ # Bootstrap Mini | ||
| <br> | ||
| Usage: <br> | ||
| Usage (stand-alone): | ||
@@ -21,14 +21,18 @@ ``` | ||
| ```scss | ||
| @import '~@knighttower/bootstrap-mini/src/bootstrap-mini.scss'; | ||
| ``` | ||
| yarn add @knighttower/bootstrap-mini -D | ||
| <br> | ||
| Usage (monorepo): | ||
| ``` | ||
| npm install knighttower | ||
| ``` | ||
| ```scss | ||
| @import '~@knighttower/bootstrap-mini/src/bootstrap-mini.scss'; | ||
| @import '~knighttower/bootstrap-mini/src/bootstrap-mini.scss'; | ||
| ``` | ||
| <br> | ||
| <br> | ||
| or as a drop-in css file into vite or webpack | ||
| <br> | ||
| ``` | ||
@@ -97,2 +101,4 @@ import "@knighttower/bootstrap-mini/dist/bootstrap-mini.css" | ||
| Note: standard bootstrap variables for the modules included are also possible to be used. | ||
| Ex: $container (for the container module), $grid-gutter-width (for the grid module), etc... | ||
| <br> | ||
@@ -127,3 +133,3 @@ | ||
| ## Features | ||
| ## Features and Utilities included | ||
@@ -145,2 +151,6 @@ - Cool set of mixins (in addition to the bootstrap default ones) | ||
| * @include breakpoint(<breakdown name>,'max-width:800px'){rules...};, etc... | ||
| * @example | ||
| * @include breakpoint(mobile){rules...}; or | ||
| * @include breakpoint(000px,'max-width:800px'){rules...}; or | ||
| * @include breakpoint(mobile,landscape){rules...}; | ||
| */ | ||
@@ -156,5 +166,85 @@ .ex-class { | ||
| } | ||
| ```` | ||
| // /** | ||
| // * Merge maps | ||
| // * @param {Array} $maps Array or list of Arrays of maps to merge | ||
| // * @return {Array} | ||
| // * @example | ||
| // * $button-group: ($base-hiearchy, $base-states, $shared-states); | ||
| // * $buttons: mapMerge($button-group); | ||
| // */ | ||
| @function mapMerge($maps...) { | ||
| $m: (); | ||
| // Check if single list of lists | ||
| @if type-of(nth($maps, 1)) == "list" and length($maps) == 1 { | ||
| @each $map in nth($maps, 1) { | ||
| $m: map-merge($m, $map); | ||
| } | ||
| } | ||
| // Multiple parameters | ||
| @else { | ||
| @each $map in $maps { | ||
| $m: map-merge($m, $map); | ||
| } | ||
| } | ||
| @return $m; | ||
| } | ||
| // /** | ||
| // * @mixin disabled | ||
| // * Add "disabled" state to an element | ||
| // * @return {String} | ||
| // * @example | ||
| // * // .class{ @include disabled();} | ||
| // */ | ||
| @mixin disabled() { | ||
| &, | ||
| &:hover { | ||
| background: var(--bs-disabled); | ||
| color: var(--bs-disabled); | ||
| border-color: var(--bs-disabled); | ||
| position: relative; | ||
| } | ||
| &:before { | ||
| position: absolute; | ||
| height: 1px; | ||
| width: 100%; | ||
| top: 50%; | ||
| left: 0; | ||
| display: block; | ||
| border-bottom: 1px solid var(--bs-gray-300); | ||
| content: " "; | ||
| transform: rotate(15deg); | ||
| } | ||
| &:hover { | ||
| cursor: not-allowed; | ||
| } | ||
| } | ||
| // /** | ||
| // * add transition effect to an element | ||
| // * @mixin transitionProp | ||
| // * @param {String} $property Property name | ||
| // * @param {Number} $duration 0.5s | ||
| // * @param {String} $method ease | ||
| // * @param {Number} $delay 0s | ||
| // * @return {String} | ||
| // * @example | ||
| // * // .class{ @include transitionProp(all, 0.5s, ease, 0s);} | ||
| // */ | ||
| @mixin transitionProp($property, $duration: 0.5s, $method: ease, $delay: 0s) { | ||
| transition: $property $duration $method $delay; | ||
| -moz-transition: $property $duration $method $delay; | ||
| -webkit-transition: $property $duration $method $delay; | ||
| -o-transition: $property $duration $method $delay; | ||
| } | ||
| ```` | ||
| <br> | ||
| ## Specific classes | ||
@@ -161,0 +251,0 @@ - A set of utility classes that can be used to build websites and web applications. Only the most used classes are included. The rest can be added by the user. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.17%
112334
- Number of lines in readme file
- increased by46.15%
285