biings-ds
Advanced tools
biings-ds - npm Package Compare versions
Comparing version 1.1.6 to 1.2.2
@@ -23,9 +23,8 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Avatar</h1> | ||
| Use classes `is-small`, `is-large` and `is-huge` to change the size of an avatar. | ||
| <hr> | ||
| <div class="box"> | ||
| <div class="columns is-gapless"> | ||
| <div class="column is-3"><div class="avatar is-small"><div>S</div></div><span class="subtitle is-6">Small</span></div> | ||
| <div class="column"><div class="avatar is-large"><div>L</div></div><span class="subtitle is-5">Large</span></div> | ||
| <div class="column"><div class="avatar is-huge"><div>H</div></div><span class="subtitle is-4">Huge</span></div> | ||
| </div> | ||
| <hr class="is-small"> | ||
| <div class="level"> | ||
| <div class="level-item has-text-left"><div class="avatar is-small"><div>S</div></div><span class="is-size-7">Small</span></div> | ||
| <div class="level-item"><div class="avatar"><div>D</div></div><span class="is-size-6 has-text-grey">Default</span></div> | ||
| <div class="level-item"><div class="avatar is-large"><div>L</div></div><span class="is-size-5">Large</span></div> | ||
| <div class="level-item"><div class="avatar is-huge"><div>H</div></div><span class="is-size-4">Huge</span></div> | ||
| </div> | ||
@@ -36,8 +35,10 @@ | ||
| <h2 class="title is-4">Photo Avatar</h2> | ||
| Avatars can nest an image to act as the person's photo.<br><br> | ||
| Avatars can nest an image to act as a person's photo. | ||
| <hr class="is-small"> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="avatar is-large"><img src="https://www.gravatar.com/avatar/7c8b112654185af6614a3df144135b0d?size=100&d=blank"></div><span class="subtitle is-5">Aamir Khan</span> | ||
| <div class="avatar"><img src="https://www.gravatar.com/avatar/7c8b112654185af6614a3df144135b0d?size=100&d=blank"></div><span class="subtitle is-5">**Aamir Khan**</span> | ||
| </div> | ||
| ``` | ||
@@ -49,1 +50,20 @@ <div class="avatar is-large"> | ||
| ``` | ||
| <hr class="is-large is-visible"> | ||
| <h2 class="title is-4">Status</h2> | ||
| Use the modifier syntax `.is-status-[color]` to add a color badge to an Avatar. | ||
| <hr class="is-small"> | ||
| <div class="box is-large is-well is-marginless"> | ||
| <div class="avatar is-status-green"><img src="https://www.gravatar.com/avatar/ded2d271be31a09049209089b50cb882?s=200&d=blank&r=g"></div> | ||
| <span class="subtitle is-5">**Tom** is online</span> | ||
| </div> | ||
| <div class="avatar is-status-green"> | ||
| <!-- <div> or <image> --> | ||
| <div> | ||
| <br> | ||
| ?> **Available colors are:**<br><span class="has-text-purple">purple</span>, <span class="has-text-cyan">cyan</span>, <span class="has-text-blue">blue</span>, <span class="has-text-pink">pink</span>, <span class="has-text-red">red</span>, <span class="has-text-orange">orange</span>, <span class="has-text-yellow">yellow</span>, <span class="has-text-turquoise">turquoise</span>, <span class="has-text-green">green</span>, <span class="has-text-grey">grey</span>, <span class="has-text-black">black</span> and <span class="has-text-white has-background-cyan-dark">white</span>. |
@@ -65,9 +65,11 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Button</h1> | ||
| <span class="button is-small">Small</span> | ||
| <span class="button">Normal</span> | ||
| <span class="button is-medium">Medium</span> | ||
| <span class="button is-large">Large</span> | ||
| <hr class="is-small"> | ||
| <div class="button is-beefy is-primary">Beefy</div> | ||
| <div class="button is-rounded is-medium">Rounded</div> | ||
| <div class="box is-well is-large"> | ||
| <span class="button is-small">Small</span> | ||
| <span class="button">Normal</span> | ||
| <span class="button is-medium">Medium</span> | ||
| <span class="button is-large">Large</span> | ||
| <hr class="is-small"> | ||
| <div class="button is-beefy is-primary">Beefy</div> | ||
| <div class="button is-rounded is-medium">Rounded</div> | ||
| </div> | ||
@@ -79,16 +81,16 @@ | ||
| <div class="field has-addons"> | ||
| <p class="control"> | ||
| <a class="button">Yes</a> | ||
| </p> | ||
| <p class="control"> | ||
| <a class="button">No</a> | ||
| </p> | ||
| <p class="control"> | ||
| <a class="button">Maybe</a> | ||
| </p> | ||
| <div class="box is-well is-marginless is-large"> | ||
| <div class="field has-addons"> | ||
| <p class="control"> | ||
| <a class="button">Yes</a> | ||
| </p> | ||
| <p class="control"> | ||
| <a class="button">No</a> | ||
| </p> | ||
| <p class="control"> | ||
| <a class="button">Maybe</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <br> | ||
| <div class="field has-addons"> | ||
@@ -95,0 +97,0 @@ <p class="control"> |
@@ -87,4 +87,4 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Color</h1> | ||
| <div class="column is-3"><div class="notification has-background-green"><br></div><span>**green** / Emerald</span><br><span class="has-text-grey-dark is-monospace">#5BCC72</span></div> | ||
| <div class="column is-3"><div class="notification has-background-green-light"><br></div><span>**green-light**</span><br><span class="has-text-grey-dark is-monospace is-size-7">#8CDB9C</span></div> | ||
| <div class="column is-3"><div class="notification has-background-green-lighter"><br></div><span>**green-lighter**</span><br><span class="has-text-grey-dark is-monospace is-size-7">#BDEBC7</span></div> | ||
| <div class="column is-3"><div class="notification has-background-green-light"><br></div><span>**green-light**</span><br><span class="has-text-grey-dark is-monospace">#8CDB9C</span></div> | ||
| <div class="column is-3"><div class="notification has-background-green-lighter"><br></div><span>**green-lighter**</span><br><span class="has-text-grey-dark is-monospace">#BDEBC7</span></div> | ||
| </div> | ||
@@ -100,9 +100,9 @@ | ||
| <div class="column is-12"><div class="notification has-background-gradient-1"><br></div></div> | ||
| <div class="column is-12">**gradient–1**<span class="is-pulled-right is-size-7 has-text-grey-dark"><span class="is-monospace">Primary</span> → <span class="is-monospace">Pink</span></span></div> | ||
| <div class="column is-12">**gradient–1**<span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Primary</span> → <span class="is-monospace">Pink</span></span></div> | ||
| <div class="column is-12"></div> | ||
| <div class="column is-12"><div class="notification has-background-gradient-2"><br></div></div> | ||
| <div class="column is-12">**gradient–2** <span class="is-pulled-right is-size-7 has-text-grey-dark"><span class="is-monospace">Cyan</span> → <span class="is-monospace">Turquoise</span></span></div> | ||
| <div class="column is-12">**gradient–2** <span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Cyan</span> → <span class="is-monospace">Turquoise</span></span></div> | ||
| <div class="column is-12"></div> | ||
| <div class="column is-12"><div class="notification has-background-gradient-3"><br></div></div> | ||
| <div class="column is-12">**gradient–3** <span class="is-pulled-right is-size-7 has-text-grey-dark"><span class="is-monospace">Red</span> → <span class="is-monospace">Yellow</span></span></div> | ||
| <div class="column is-12">**gradient–3** <span class="is-pulled-right has-text-grey-dark is-size-7"><span class="is-monospace">Red</span> → <span class="is-monospace">Yellow</span></span></div> | ||
| </div> | ||
@@ -112,5 +112,5 @@ | ||
| <h2 class="title is-4">Color classes</h2> | ||
| <h2 class="title is-4">Color modifiers</h2> | ||
| Most elements and components have color variations thanks to modifiers with syntax `.is-[color]`, like `is-primary`, `is-dark` or `has-background-purple`. | ||
| Most elements and components have color variations thanks to modifiers with syntax `.is-[color]` (`is-primary`, `is-dark`) or `.has-text-[color]` (`has-background-red`, `has-background-gradient-1`). | ||
@@ -126,7 +126,7 @@ <hr class="is-small"> | ||
| <tr><td>Background</td><td>`has-background-[color]`</td></tr> | ||
| <tr><td>Text <sup class="has-text-cyan">1</sup></td><td>`has-text-[color]`</td></tr> | ||
| <tr><td>Icon <sup class="has-text-cyan">1</sup></td><td>`has-fill-[color]`</td></tr> | ||
| <tr><td>Text <sup class="has-text-red">( i )</sup></td><td>`has-text-[color]`</td></tr> | ||
| <tr><td>Icon <sup class="has-text-red">( i )</sup></td><td>`has-fill-[color]`</td></tr> | ||
| </tbody> | ||
| </table> | ||
| ?> <span class="has-text-cyan">**1** :</span> *does not work with gradients.* | ||
| !> *does not work with gradients* |
@@ -39,2 +39,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1> | ||
| <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search"></use></svg></div>search</div> | ||
| <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search-list"></use></svg></div>search-list</div> | ||
| <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-large"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div> | ||
@@ -41,0 +42,0 @@ </div> |
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Layout</h1> | ||
| <p class="subtitle is-5"> | ||
| Used only within the Biings desktop app, <span class="has-text-weight-semibold">Layout</span> is the page structure in which content and components live. | ||
| <span class="has-text-weight-semibold">Layout</span> is the page structure in which content and components live. | ||
| </p> | ||
@@ -14,2 +14,4 @@ | ||
| !> Layout is used only in a Biings Desktop or Tablet app. | ||
| <a id="basic"></a> | ||
@@ -16,0 +18,0 @@ <hr class="is-large is-visible"> |
@@ -7,6 +7,5 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Modal</h1> | ||
| <button onclick="openModal()" class="button is-rounded is-outlined is-primary">Open Modal</button> | ||
| <hr class="is-small"> | ||
| <div class="box is-well is-large has-text-centered is-marginless"> | ||
| <button onclick="openModal()" class="button is-rounded is-primary">Open Modal</button> | ||
| </div> | ||
| <div id="js-modal" class="modal"> | ||
@@ -32,4 +31,6 @@ <div class="modal-background" onclick="closeModal()"></div> | ||
| !> Don't forget to add `.is-clipped` to the `<html>` tag in order to prevent background scrolling. | ||
| <br> | ||
| ?> Don't forget to add `.is-clipped` to the `<html>` tag in order to prevent background scrolling. | ||
| <hr class="is-large is-visible"> | ||
@@ -36,0 +37,0 @@ |
@@ -11,5 +11,15 @@ <h1 class="title is-2">Biings <span class="has-text-weight-light">Design System</span></h1> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/color" class="box is-well is-relaxed hover-to-popping"> | ||
| <img src="media/appcomp.png" width="80" class="no-zoom"/> | ||
| <a href="#/avatar" class="box is-well is-relaxed is-link"> | ||
| <img src="media/components.png" width="80" class="no-zoom"/> | ||
| <div> | ||
| <div class="title is-3 has-text-primary has-text-weight-light">Components</div> | ||
| <div class="subtitle is-6">A library of all BDS components.</div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="column is-12 is-hidden-desktop"></div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/color" class="box is-well is-relaxed is-link"> | ||
| <img src="media/style.png" width="80" class="no-zoom"/> | ||
| <div> | ||
| <div class="title is-3 has-text-primary has-text-weight-light">Colors</div> | ||
@@ -22,7 +32,7 @@ <div class="subtitle is-6">Color brings a design to life.</div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/voice" class="box is-well is-relaxed hover-to-popping"> | ||
| <a href="#/voice" class="box is-well is-relaxed is-link"> | ||
| <img src="media/voice.png" width="80" class="no-zoom"/> | ||
| <div> | ||
| <div class="title is-3 has-text-primary has-text-weight-light">Voice & Tone</div> | ||
| <div class="subtitle is-6">Good design starts with good copy.</div> | ||
| <div class="subtitle is-6">Good design starts with good copy. Voice expresses our personality.</div> | ||
| </div> | ||
@@ -32,4 +42,4 @@ </a> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/illustration" class="box is-well is-relaxed hover-to-popping"> | ||
| <img src="media/layout.png" width="80" class="no-zoom"/> | ||
| <a href="#/illustration" class="box is-well is-relaxed is-link"> | ||
| <img src="media/layout.png" width="75" class="no-zoom"/> | ||
| <div> | ||
@@ -41,21 +51,9 @@ <div class="title is-3 has-text-primary has-text-weight-light">Illustrations</div> | ||
| </div> | ||
| <div class="column is-12 is-hidden-desktop"></div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/avatar" class="box is-well is-relaxed hover-to-popping"> | ||
| <img src="media/components.png" width="80" class="no-zoom"/> | ||
| <div> | ||
| <div class="title is-3 has-text-primary has-text-weight-light">Components</div> | ||
| <div class="subtitle is-6">All BDS components, with code and usage guidelines.</div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <hr> | ||
| <hr class="is-small"> | ||
| <div class="box is-bordered is-relaxed"> | ||
| <div class="title is-spaced is-3 has-text-weight-light has-text-grey-darker">How to use?</div> | ||
| <div class="subtitle is-6 has-text-grey-darker"> | ||
| We welcome all feedback, designs, or ideas in order to produce the best possible experience for our users. If you're interested in contributing, check out the <a href="#/readme">**Readme**</a> to get started. | ||
| </div> | ||
| <div class="title is-3 has-text-weight-light has-text-primary"><a href="#/readme">Getting Started</a></div> | ||
| <div class="subtitle is-6">Onboarding for designers and developers who are using BDS for the first time or want to contribute. Check out the <a href="#/readme">**Readme**</a> to get started.</div> | ||
| </div> |
| { | ||
| "name": "biings-ds", | ||
| "version": "1.1.6", | ||
| "version": "1.2.2", | ||
| "description": "Biings Design System", | ||
@@ -5,0 +5,0 @@ "main": "build/bds.css", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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 by0.14%
10646326
- Lines of code
- increased by1.84%
6471
- Number of lines in readme file
- increased by7.41%
58
No dependency changes