bolts-lib - npm Package Compare versions
Comparing version 1.0.2 to 1.0.3
| { | ||
| "name": "bolts-lib", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "Front-end helper library", | ||
@@ -5,0 +5,0 @@ "main": "src/js/index.js", |
118
README.md
| # Bolts | ||
| *v1.0.2* | ||
| *v1.0.3* | ||
@@ -8,3 +8,12 @@ Bolts is a collection of practical Sass mixins and JS functions helping you deal with all the mundane website building and styling tasks, so that you can focus on creating something new. It aims to be a toolkit that does the things you're tired of. | ||
| ### Installation | ||
| *Installation is currently not documented.* | ||
| <br> | ||
| ------------ | ||
| <br> | ||
| #### All config variables | ||
@@ -49,8 +58,14 @@ The available options are: | ||
| ### JS setup | ||
| <br> | ||
| JS setup is extremely simple. Just import and init it [as described above](#installation "as described above") and you are good to go. | ||
| ------------ | ||
| <br> | ||
| ### JavaScript setup | ||
| *JavaScript setup currently has no documentation.* | ||
| <br> | ||
| ------------ | ||
@@ -77,3 +92,3 @@ | ||
| ```sass | ||
| ```scss | ||
| .columns { | ||
@@ -116,3 +131,3 @@ @include inline-layout; | ||
| ```sass | ||
| ```scss | ||
| .icon { | ||
@@ -157,3 +172,3 @@ @media ( retina() ) { background-image: url('icon@2x.jpg'); } | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -187,3 +202,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| .page { | ||
@@ -224,3 +239,3 @@ @include sticky-footer( | ||
| ```sass | ||
| ```scss | ||
| @include font( | ||
@@ -276,3 +291,3 @@ $family: FontAwesome, | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -308,3 +323,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| .page { | ||
@@ -343,3 +358,3 @@ .page-inner { | ||
| ```sass | ||
| ```scss | ||
| .header { | ||
@@ -380,3 +395,3 @@ @include clear-whitespace($font-size: 12px); | ||
| ```sass | ||
| ```scss | ||
| .hero { | ||
@@ -418,3 +433,3 @@ position relative; | ||
| ```sass | ||
| ```scss | ||
| .icon { | ||
@@ -449,3 +464,3 @@ @include background( | ||
| *This mixin currently has no description* | ||
| Sets transition with pre set vales for duration and easing. Second argument queues a second transition after the initial transition is done. | ||
@@ -456,3 +471,34 @@ <br> | ||
| ```sass | ||
| ```scss | ||
| .button { | ||
| background-color: black; | ||
| @include transition(background-color); | ||
| &:hover { | ||
| background-color: red; | ||
| } | ||
| } | ||
| ``` | ||
| **Usage with $queue:** | ||
| ```scss | ||
| .header-icon { | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| @include transition(opacity, $queue: visibility); | ||
| @include state('menu-open') { | ||
| visibility: visible; | ||
| opacity: 1; | ||
| @include transition(opacity); | ||
| } | ||
| } | ||
| ``` | ||
| <br> | ||
| **Usage:** | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -485,3 +531,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -514,3 +560,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| .hero { | ||
@@ -547,3 +593,3 @@ @include background('../images/background.jpg'); | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -576,3 +622,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| .hero { | ||
@@ -617,3 +663,3 @@ position: relative; | ||
| ```sass | ||
| ```scss | ||
| .hero { | ||
@@ -665,3 +711,3 @@ @include vertical-align(middle); | ||
| ```sass | ||
| ```scss | ||
| .hero-text { | ||
@@ -698,3 +744,3 @@ color: white; | ||
| ```sass | ||
| ```scss | ||
| .modal-inner { | ||
@@ -721,3 +767,3 @@ @include scroll; | ||
| ```sass | ||
| ```scss | ||
| .photo { | ||
@@ -764,3 +810,3 @@ @include transition(filter -webkit-filter); | ||
| ```sass | ||
| ```scss | ||
| .items { | ||
@@ -813,3 +859,3 @@ @include inline-layout; | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -842,3 +888,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| .menu.is-open { | ||
@@ -886,3 +932,3 @@ | ||
| ```sass | ||
| ```scss | ||
| .columns { | ||
@@ -923,3 +969,3 @@ @include inline-layout; | ||
| ```sass | ||
| ```scss | ||
| .items { | ||
@@ -952,3 +998,3 @@ @include inline-layout; | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -981,3 +1027,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -1010,3 +1056,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -1039,3 +1085,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -1068,3 +1114,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -1097,3 +1143,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -1127,3 +1173,3 @@ ``` | ||
| ```sass | ||
| ```scss | ||
| // This mixin currently has no example | ||
@@ -1148,2 +1194,2 @@ ``` | ||
| *Javascript functionality currently has no documentation* | ||
| *Javascript functionality currently has no documentation* |
| /** | ||
| * Bolts 1.0.2 | MIT License | ||
| * Bolts 1.0.3 | MIT License | ||
| * | ||
@@ -4,0 +4,0 @@ * Developed by Pocketsize |
| /** | ||
| * Bolts 1.0.2 | MIT License | ||
| * Bolts 1.0.3 | MIT License | ||
| * | ||
@@ -4,0 +4,0 @@ * Developed by Pocketsize |
| /** | ||
| * Bolts 1.0.2 | MIT License | ||
| * Bolts 1.0.3 | MIT License | ||
| * | ||
@@ -4,0 +4,0 @@ * Developed by Pocketsize |
| /** | ||
| * Bolts 1.0.2 | MIT License | ||
| * Bolts 1.0.3 | MIT License | ||
| * | ||
@@ -4,0 +4,0 @@ * Developed by Pocketsize |
| /** | ||
| * Bolts 1.0.2 | MIT License | ||
| * Bolts 1.0.3 | MIT License | ||
| * | ||
@@ -12,2 +12,3 @@ * Developed by Pocketsize | ||
| remove, | ||
| toggle, | ||
| getDOMState, | ||
@@ -175,2 +176,71 @@ setDOMState, | ||
| /** | ||
| * toggle | ||
| * | ||
| * @param {string} key | ||
| * @param {(string|number|boolean|Array)} value | ||
| * @param {Node} node - Defaults to HTML (global state) if not set | ||
| */ | ||
| function toggle(key, value = [true, false], node = false) { | ||
| const typecheck = val => { | ||
| if ( | ||
| typeof val == 'number' | ||
| || typeof val == 'string' | ||
| || typeof val == 'boolean' | ||
| ) { | ||
| return true | ||
| } | ||
| return false | ||
| } | ||
| if (value && Array.isArray(value)) { | ||
| value.forEach(val => { | ||
| if (typecheck(val) === false) { | ||
| throw new Error('state.toggle() — Unsupported type in passed array. Type must be number, string or boolean.') | ||
| } | ||
| }) | ||
| } else if (value && typecheck(value) === false) { | ||
| throw new Error('state.toggle() — Parameter "value" must be a number, string, boolean, or an array containing values of these types.') | ||
| } | ||
| if (!value) { | ||
| if (!get(key, node)) { | ||
| set(key, true, node) | ||
| } else { | ||
| remove(key, node) | ||
| } | ||
| } else { | ||
| if (Array.isArray(value)) { | ||
| value = Array.from(new Set(value)) | ||
| let current = get(key, node) | ||
| if (typeof current == 'undefined') { | ||
| set(key, value[0], node) | ||
| } else { | ||
| let index = value.indexOf(current) | ||
| if (value.length - 1 > index) { | ||
| index++ | ||
| } else { | ||
| index = 0 | ||
| } | ||
| current = value[index] | ||
| set(key, current, node) | ||
| } | ||
| } else { | ||
| if (get(key, node) == value) { | ||
| remove(key, node) | ||
| } else { | ||
| set(key, value, node) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * setDOMState | ||
@@ -177,0 +247,0 @@ * Render the current state as data-attributes on elements in the DOM |
| /** | ||
| * Bolts 1.0.2 | MIT License | ||
| * Bolts 1.0.3 | MIT License | ||
| * | ||
@@ -4,0 +4,0 @@ * Developed by Pocketsize |
Sorry, the diff of this file is not supported yet
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 by4.26%
79423
- Number of package files
- increased by9.09%
12
- Lines of code
- increased by11.22%
585
- Number of lines in readme file
- increased by4.22%
1161