biings-ds
Advanced tools
biings-ds - npm Package Compare versions
Comparing version 0.5.0 to 0.6.0
@@ -21,3 +21,3 @@ <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> | ||
| <h2 class="title is-4 has-text-weight-semibold">Sizes</h2> | ||
| <h2 class="title is-4">Sizes</h2> | ||
| Use classes `is-small`, `is-large` and `is-huge` to change the size of an avatar. | ||
@@ -33,5 +33,5 @@ <hr> | ||
| <hr class="is-visible"> | ||
| <hr class="is-visible is-large"> | ||
| <h2 class="title is-4 has-text-weight-semibold">Photo Avatar</h2> | ||
| <h2 class="title is-4">Photo Avatar</h2> | ||
| Avatars can nest an image to act as the person's photo.<br><br> | ||
@@ -38,0 +38,0 @@ |
@@ -8,4 +8,2 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Box</h1> | ||
| <h2 class="title is-4 has-text-weight-semibold">Basic usage</h2> | ||
| <div class="box is-well is-marginless"> | ||
@@ -19,3 +17,3 @@ <div class="box is-ground"> | ||
| <div class="box is-floating hover-to-popping"> | ||
| <!-- Boxed content.. --> | ||
| <!-- Boxed content.. --> | ||
| </div> | ||
@@ -26,3 +24,3 @@ ``` | ||
| <h2 class="title is-4 has-text-weight-semibold">Box depths</h2> | ||
| <h2 class="title is-4">Box depths</h2> | ||
@@ -62,3 +60,3 @@ You can alter or bring focus to a box by adding a `is-[type]` class.<br><br> | ||
| <h2 class="title is-4 has-text-weight-semibold">Depth transition</h2> | ||
| <h2 class="title is-4">Depth transition</h2> | ||
@@ -89,10 +87,10 @@ You can add an effect to <strong>change the depth on hover</strong> by using one of the following classes : | ||
| <h2 class="title is-4 has-text-weight-semibold">Link box</h2> | ||
| <h2 class="title is-4">Link box</h2> | ||
| Add class `is-link` to make a box behave like a link. | ||
| <div class="box is-well is-marginless"> | ||
| <div class="box is-ground"> | ||
| <div class="box is-floating">Boxed content about an entity or subject.</div> | ||
| </div> | ||
| <br> | ||
| <div class="box is-well is-relaxed"> | ||
| <div class="box is-white is-link">Boxed content about an entity or subject.</div> | ||
| </div> |
@@ -8,3 +8,3 @@ <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> | ||
| <h2 class="title is-4 has-text-weight-semibold">Types & States</h2> | ||
| <h2 class="title is-4">Types & States</h2> | ||
@@ -60,3 +60,3 @@ <table class="table is-fullwidth"> | ||
| <h2 class="title is-4 has-text-weight-semibold">Sizes</h2> | ||
| <h2 class="title is-4">Sizes</h2> | ||
| <p>Use classes `is-small`, `is-medium` and `is-large` to change the size of any button.</p> | ||
@@ -63,0 +63,0 @@ <br> |
@@ -6,3 +6,3 @@ <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> | ||
| <h2 class="title is-4 has-text-weight-semibold">Brand</h2> | ||
| <h2 class="title is-4">Brand</h2> | ||
@@ -15,7 +15,8 @@ <hr class="is-small"> | ||
| <div class="column is-3"><div class="notification has-background-dark"><br></div><span>dark</span><br>**Biings Black**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#363244</span></div> | ||
| <div class="column is-12"><br></div> | ||
| </div> | ||
| <h2 class="title is-4 has-text-weight-semibold">Palette</h2> | ||
| <hr class="is-visible is-large"> | ||
| <h2 class="title is-4">Palette</h2> | ||
| <div class="columns is-multiline"> | ||
@@ -54,3 +55,3 @@ <div class="column is-3"><div class="notification has-background-cyan"><br></div><span>cyan</span><br>**Viking**<br><span class="subtitle is-6 has-text-grey-dark has-text-monospace">#78C0E0</span></div> | ||
| <h2 class="title is-4 has-text-weight-semibold">Color modifiers</h2> | ||
| <h2 class="title is-4">Color modifiers</h2> | ||
@@ -75,3 +76,3 @@ Most elements and components have color variations thanks to modifiers with syntax `.is-[color]`, like `is-primary`, `is-dark` or `has-background-purple`. | ||
| <h2 class="title is-4 has-text-weight-semibold">Gradients</h2> | ||
| <h2 class="title is-4">Gradients</h2> | ||
@@ -78,0 +79,0 @@ <hr class="is-invisible is-small"> |
@@ -8,4 +8,2 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Columns</h1> | ||
| <h2 class="title is-4 has-text-weight-semibold">Basic usage</h2> | ||
| <div class="box is-well is-marginless is-relaxed"> | ||
@@ -12,0 +10,0 @@ <div class="columns"> |
@@ -8,4 +8,2 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Components</h6><h1 class="title is-1 has-text-weight-bold">Divider</h1> | ||
| <h2 class="title is-4 has-text-weight-semibold">Usage</h2> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
@@ -20,3 +18,3 @@ <hr class="is-visible"> | ||
| <h2 class="title is-4 has-text-weight-semibold">Variations</h2> | ||
| <h2 class="title is-4">Variations</h2> | ||
@@ -23,0 +21,0 @@ <ul class="list"> |
@@ -8,18 +8,16 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1">Dropdown</h1> | ||
| <h2 class="title is-4 has-text-weight-semibold">Basic usage</h2> | ||
| <div class="box is-well is-relaxed"> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="dropdown is-hoverable"> | ||
| <div class="dropdown-trigger"> | ||
| <div class="button" aria-haspopup="true" aria-controls="dropdown-menu"> | ||
| Dropdown <svg class="icon"><use xlink:href="media/bds-icons.min.svg#calendar"></use></svg> | ||
| <div class="button">Default dropdown</div> | ||
| </div> | ||
| </div> | ||
| <div class="dropdown-menu" id="dropdown-menu" role="menu"> | ||
| <div class="dropdown-content"> | ||
| <a href="#" class="dropdown-item">This Works!</a> | ||
| <a class="dropdown-item">This works</a> | ||
| <a class="dropdown-item">Without</a> | ||
| <a href="#" class="dropdown-item is-active">Any</a> | ||
| <a href="#" class="dropdown-item">Javascript 😉</a> | ||
| <a class="dropdown-item is-active">Any</a> | ||
| <a class="dropdown-item">Javascript 😉</a> | ||
| </div> | ||
@@ -29,2 +27,78 @@ </div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| <div class="dropdown is-hoverable"> | ||
| <div class="dropdown-trigger"> | ||
| <div class="button">Default Dropdown</div> | ||
| </div> | ||
| <div class="dropdown-menu"> | ||
| <div class="dropdown-content"> | ||
| <a class="dropdown-item">This works</a> | ||
| <a class="dropdown-item">Without</a> | ||
| <a class="dropdown-item is-active">Any</a> | ||
| <a class="dropdown-item">Javascript</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| <hr class="is-visible is-large"> | ||
| <h2 class="title is-4">Use a custom icon</h2> | ||
| Use `is-iconless` if you want to use your own icon in the dropdown button. | ||
| <hr class="is-small"> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="dropdown is-hoverable is-iconless"> | ||
| <div class="dropdown-trigger"> | ||
| <div class="button"> | ||
| <span>With custom icon </span> | ||
| <svg class="icon has-fill-green"><use xlink:href="media/bds-icons.min.svg#circle-plus"></use></svg> | ||
| </div> | ||
| </div> | ||
| <div class="dropdown-menu" id="dropdown-menu" role="menu"> | ||
| <div class="dropdown-content"> | ||
| <a class="dropdown-item">This has its </a> | ||
| <a class="dropdown-item">Own Icon</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <hr class="is-visible is-large"> | ||
| <h2 class="title is-4">Changer the trigger</h2> | ||
| Any element or component can trigger a dropdown when placed inside the `.dropdown-trigger` div. | ||
| <br><br> | ||
| Use the class `.is-active` if you want to control the dropdown with javascript (otherwise use `.is-hoverable`). | ||
| <hr class="is-small"> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="dropdown is-hoverable is-iconless is-active"> | ||
| <div class="dropdown-trigger"> | ||
| <div class="avatar"><img src="https://www.gravatar.com/avatar/68a50e21ee0b66aafee1831d3c6f130c?size=200&d=blank"></div> | ||
| <span class="title is-6 has-text-grey">Even this can have a dropdown menu.</span> | ||
| <br><br> | ||
| </div> | ||
| <div class="dropdown-menu" id="dropdown-menu" role="menu"> | ||
| <div class="dropdown-content"> | ||
| <a class="dropdown-item">This already has</a> | ||
| <a class="dropdown-item">The class `is-active`</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <hr class="is-large"> | ||
| <div class="box is-bordered"> | ||
| More possibilities on → <a href="https://bulma.io/documentation/components/dropdown/" target="blank">Bulma / <strong>Dropdown</strong></a> | ||
| </div> |
@@ -6,5 +6,5 @@ <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> | ||
| <hr> | ||
| <hr class="is-large is-visible"> | ||
| <h4 class="title is-4 has-text-weight-semibold">Icons</h4> | ||
| <h4 class="title is-4">Icons</h4> | ||
@@ -16,3 +16,3 @@ Icons should <u>not be less than 16 pixels</u> (width and height). Use, or make, an equivalent Glyph when displayed below 16px. | ||
| <div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey-dark"> | ||
| <div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings-care"></use></svg></div>biings-care</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings-claim"></use></svg></div>biings-claim</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings-pilot"></use></svg></div>biings-pilot</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings"></use></svg></div>biings</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#book"></use></svg></div>book</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#bubble"></use></svg></div>bubble</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#medical"></use></svg></div>medical</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-down"></use></svg></div>arrow-down</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-left"></use></svg></div>arrow-left</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-right"></use></svg></div>arrow-right</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-up"></use></svg></div>arrow-up</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#briefcase"></use></svg></div>briefcase</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#check"></use></svg></div>check</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#circle-minus"></use></svg></div>circle-minus</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#circle-plus"></use></svg></div>circle-plus</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#download"></use></svg></div>download</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#gear"></use></svg></div>gear</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#off"></use></svg></div>off</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#prefs"></use></svg></div>prefs</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><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-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings-care"></use></svg></div>biings-care</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings-claim"></use></svg></div>biings-claim</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings-pilot"></use></svg></div>biings-pilot</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#biings"></use></svg></div>biings</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#book"></use></svg></div>book</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#bubble"></use></svg></div>bubble</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#chevron_down"></use></svg></div>chevron_down</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#medical"></use></svg></div>medical</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-down"></use></svg></div>arrow-down</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-left"></use></svg></div>arrow-left</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-right"></use></svg></div>arrow-right</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#arrow-up"></use></svg></div>arrow-up</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#briefcase"></use></svg></div>briefcase</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#check"></use></svg></div>check</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#circle-minus"></use></svg></div>circle-minus</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#circle-plus"></use></svg></div>circle-plus</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#download"></use></svg></div>download</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#gear"></use></svg></div>gear</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#off"></use></svg></div>off</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#prefs"></use></svg></div>prefs</div><div class="column is-one-third-mobile is-one-fifth-tablet"><div class="box is-bordered is-relaxed"><svg class="icon is-medium"><use xlink:href="media/bds-icons.min.svg#search"></use></svg></div>search</div> | ||
| </div> | ||
@@ -22,4 +22,4 @@ | ||
| <h4 class="title is-4 has-text-weight-semibold">Glyphs</h4> | ||
| <h4 class="title is-4">Glyphs</h4> | ||
| Glyphs should <u>not exceed 16 pixels</u> (width and height) and should always be a filled icon. Fine stroke weights should also disappear. |
@@ -6,6 +6,2 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Menu</h1> | ||
| <h2 class="title is-4 has-text-weight-semibold">Example</h2> | ||
| <hr class="is-small"> | ||
| <div class="box is-well is-marginless"> | ||
@@ -12,0 +8,0 @@ <div class="menu"> |
| <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> | ||
| <p class="subtitle is-5"><span class="has-text-weight-semibold">Modals</span> communicate information via a overlayed window and allow the user to maintain the context of a particular task. Keep in mind that a Modal strongly interrupts user workflow.</p> | ||
| <p class="subtitle is-5"><span class="has-text-weight-semibold">Modals</span> communicate information via a overlayed window and allow the user to maintain the context of a particular task.</span></p> | ||
| <hr class="is-visible is-large"> | ||
| <h2 class="title is-4 has-text-weight-semibold">Example</h2> | ||
| <button onclick="openModal()" class="button is-medium is-primary">Click to Open</button> | ||
| <button onclick="openModal()" class="button is-rounded is-outlined is-primary">Open Modal</button> | ||
@@ -33,2 +32,5 @@ <hr class="is-small"> | ||
| !> Keep in mind that a Modal strongly interrupts user workflow. | ||
| <hr class="is-large "> | ||
@@ -35,0 +37,0 @@ |
@@ -6,5 +6,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Panel</h1> | ||
| <h2 class="title is-4 has-text-weight-semibold">Usage</h2> | ||
| <div class="columns"> | ||
| <div class="bo columns"> | ||
| <div class="column is-two-thirds"> | ||
@@ -11,0 +9,0 @@ <nav class="panel"> |
@@ -8,3 +8,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Typography</h1> | ||
| <h4 class="title is-4 has-text-weight-semibold">Font family</h4> | ||
| <h4 class="title is-4">Font family</h4> | ||
@@ -19,4 +19,6 @@ <ul class="list"> | ||
| <h4 class="title is-4 is-spaced has-text-weight-semibold">Scales</h4> | ||
| <h4 class="title is-4 is-spaced">Scales</h4> | ||
| <hr> | ||
| <h1 class="title is-1">Hero Title 1</h1><div class="subtitle is-6 has-text-grey">Hero title (website only)</div> | ||
@@ -23,0 +25,0 @@ <br> |
@@ -8,8 +8,10 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Voice & Tone</h1> | ||
| <h2 class="title is-4 has-text-weight-semibold">Do's & Dont's</h2> | ||
| <h2 class="title is-4">Do's & Dont's</h2> | ||
| These guidelines apply for developers working with Biings applications and public facing web pages. | ||
| <div class="section"> | ||
| <h3 class="subtitle is-5 has-text-grey-darker">Use simple tense</h3> | ||
| <br><br> | ||
| <div class="box is-relaxed is-bordered"> | ||
| <h3 class="subtitle is-5 has-text-weight-semibold has-text-grey-dark">Use simple tense</h3> | ||
| <table class="table is-fullwidth"> | ||
@@ -33,4 +35,5 @@ <thead> | ||
| </table> | ||
| <hr class="is-large"> | ||
| <h3 class="subtitle is-5 has-text-grey-darker">Use active voice</h3> | ||
| </div> | ||
| <div class="box is-relaxed is-bordered"> | ||
| <h3 class="subtitle is-5 has-text-weight-semibold has-text-grey-dark">Use active voice</h3> | ||
| <table class="table is-fullwidth"> | ||
@@ -37,0 +40,0 @@ <thead> |
| { | ||
| "name": "biings-ds", | ||
| "version": "0.5.0", | ||
| "version": "0.6.0", | ||
| "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
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.06%
10293383
- Number of package files
- increased by1.53%
133
- Lines of code
- increased by0.28%
6166
No dependency changes