biings-ds
Advanced tools
biings-ds - npm Package Compare versions
Comparing version 1.3.0 to 1.4.0
@@ -8,3 +8,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Avatar</h1> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="box has-background-light is-relaxed is-marginless"> | ||
| <div class="avatar"><div>JD</div></div><span class="subtitle is-5">John Doe</span> | ||
@@ -39,3 +39,3 @@ </div> | ||
| <hr class="is-small"> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="box has-background-light is-relaxed is-marginless"> | ||
| <div class="avatar"><img src="https://www.gravatar.com/avatar/7c8b112654185af6614a3df144135b0d?size=100&d=blank"></div><span class="subtitle is-5">**Aamir Khan**</span> | ||
@@ -58,3 +58,3 @@ </div> | ||
| <hr class="is-small"> | ||
| <div class="box is-large is-well is-marginless"> | ||
| <div class="box is-large has-background-light is-marginless"> | ||
| <div class="avatar is-status-green"><img src="https://www.gravatar.com/avatar/ded2d271be31a09049209089b50cb882?s=200&d=blank&r=g"></div> | ||
@@ -61,0 +61,0 @@ <span class="subtitle is-5">**Tom** is online</span> |
@@ -8,4 +8,4 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Box</h1> | ||
| <div class="box is-well is-marginless"> | ||
| <div class="box is-ground"> | ||
| <div class="box has-background-light is-marginless"> | ||
| <div class="box"> | ||
| <div class="box is-floating">Boxed content about an entity or subject.</div> | ||
@@ -16,3 +16,3 @@ </div> | ||
| ``` | ||
| <div class="box is-floating hover-to-popping"> | ||
| <div class="box is-floating"> | ||
| <!-- Boxed content.. --> | ||
@@ -28,4 +28,3 @@ </div> | ||
| <div class="box is-well"> | ||
| <div class="section"> | ||
| <div class="box has-background-light is-large"> | ||
@@ -47,7 +46,5 @@ <div class="box"> | ||
| </div> | ||
| <div class="box is-floating"> | ||
| <div class="subtitle has-text-grey-dark is-6">**Floating**</div> | ||
| </div> | ||
| <div class="box is-popping"> | ||
@@ -57,3 +54,2 @@ <div class="subtitle has-text-grey-dark is-6">**Popping**</div> | ||
| </div> | ||
| </div> | ||
@@ -75,3 +71,3 @@ <hr class="is-large is-visible"> | ||
| <div class="box is-well is-marginless"> | ||
| <div class="box has-background-light is-marginless"> | ||
| <div class="box is-ground"> | ||
@@ -95,4 +91,4 @@ <div class="box is-raised hover-to-popping">Box with depth transition effect ( hover me )</div> | ||
| <div class="box is-well is-relaxed"> | ||
| <div class="box has-background-light is-relaxed"> | ||
| <div class="box is-white is-link">Boxed content about an entity or subject.</div> | ||
| </div> |
@@ -65,3 +65,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Button</h1> | ||
| <div class="box is-well is-large"> | ||
| <div class="box has-background-light is-large"> | ||
| <span class="button is-small">Small</span> | ||
@@ -76,8 +76,7 @@ <span class="button">Normal</span> | ||
| <hr class="is-large is-visible"> | ||
| <h2 class="title is-4 has-text-weight-semibold">Button Group</h2> | ||
| <h2 class="title is-4">Button Group</h2> | ||
| <div class="box is-well is-marginless is-large"> | ||
| <div class="box has-background-light is-marginless is-large"> | ||
| <div class="field has-addons"> | ||
@@ -107,8 +106,1 @@ <p class="control"> | ||
| </div> | ||
| <hr class="is-large"> | ||
| <div class="box is-bordered"> | ||
| Find more variations on → <a href="http://bulma.io/documentation/elements/button/" target="blank">Bulma / <strong>Buttons</strong></a> | ||
| </div> |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Color</h1> | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Color</h1> | ||
| <p class="subtitle is-5"><span class="has-text-weight-semibold">Color</span> brings a design to life. It is used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful ways in order to create patterns and visual cues.</p> | ||
@@ -129,1 +129,16 @@ | ||
| !> *does not work with gradients* | ||
| <hr class="is-large is-visible"> | ||
| <h2 class="title is-4">CSS variables</h2> | ||
| All colors are available as CSS variables through the prefix `--color-`. | ||
| <hr class="is-small"> | ||
| ```css | ||
| .your-selector | ||
| { | ||
| color: var(--color-primary); | ||
| } | ||
| ``` |
@@ -10,3 +10,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1">Dropdown</h1> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="box has-background-light is-relaxed is-marginless"> | ||
@@ -59,3 +59,3 @@ <div class="dropdown is-hoverable"> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="box has-background-light is-relaxed is-marginless"> | ||
@@ -87,3 +87,3 @@ <div class="dropdown is-hoverable is-iconless"> | ||
| <div class="box is-well is-relaxed"> | ||
| <div class="box has-background-light is-relaxed"> | ||
@@ -90,0 +90,0 @@ <div class="dropdown is-hoverable is-iconless is-active"> |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Ethics</h1> | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Ethics</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Ethics</span> are the set of principles governing what we decide to create, and how. They should be kept in mind at all stages of the design process. |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Style</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1> | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -15,28 +15,27 @@ <span class="has-text-weight-semibold">Iconography</span> uses symbols to represent an object or an action visually. They should be used sparingly to provide clarity and reduce cognitive load. | ||
| <div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey"> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-left"></use></svg></div>arrow-left</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-right"></use></svg></div>arrow-right</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-up"></use></svg></div>arrow-up</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-down"></use></svg></div>arrow-down</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-care"></use></svg></div>biings-care</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-claim"></use></svg></div>biings-claim</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-pilot"></use></svg></div>biings-pilot</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#book"></use></svg></div>book</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#bubble"></use></svg></div>bubble</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#briefcase"></use></svg></div>briefcase</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#check"></use></svg></div>check</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-minus"></use></svg></div>circle-minus</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-plus"></use></svg></div>circle-plus</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#chevron_down"></use></svg></div>chevron_down</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#download"></use></svg></div>download</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#gear"></use></svg></div>gear</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#medical"></use></svg></div>medical</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#off"></use></svg></div>off</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#person"></use></svg></div>person</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#persons"></use></svg></div>persons</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#prefs"></use></svg></div>prefs</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon 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-2 hover-to-black"><div class="box is-small"><svg class="icon 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-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-left"></use></svg></div>arrow-left</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-right"></use></svg></div>arrow-right</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-up"></use></svg></div>arrow-up</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-down"></use></svg></div>arrow-down</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-care"></use></svg></div>biings-care</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-claim"></use></svg></div>biings-claim</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-pilot"></use></svg></div>biings-pilot</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#book"></use></svg></div>book</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#bubble"></use></svg></div>bubble</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#briefcase"></use></svg></div>briefcase</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#check"></use></svg></div>check</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-minus"></use></svg></div>circle-minus</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#circle-plus"></use></svg></div>circle-plus</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#download"></use></svg></div>download</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#gear"></use></svg></div>gear</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#medical"></use></svg></div>medical</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#off"></use></svg></div>off</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#person"></use></svg></div>person</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#persons"></use></svg></div>persons</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#prefs"></use></svg></div>prefs</div> | ||
| <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><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-2 hover-to-black"><div class="box is-small"><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-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div> | ||
| </div> | ||
@@ -43,0 +42,0 @@ |
@@ -1,4 +0,4 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Illustration</h1> | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Illustration</h1> | ||
| <p class="subtitle is-5"> | ||
| <span class="has-text-weight-semibold">Illustration</span> makes complex ideas more accessible. Use it to change tone depending on the job to be done and the user's emotional state. | ||
| An <span class="has-text-weight-semibold">Illustration</span> makes a complex ideas more accessible. Use it to change tone depending on the job to be done and the user's emotional state. | ||
| </p> | ||
@@ -5,0 +5,0 @@ |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Layout</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -25,3 +25,3 @@ <span class="has-text-weight-semibold">Layout</span> is the page structure in which content and components live. | ||
| <div class="box is-well is-marginless"><img src="media/layout_1.png"></div> | ||
| <div class="box has-background-light is-marginless"><img src="media/layout_1.png"></div> | ||
@@ -47,3 +47,3 @@ <div class="layout"> | ||
| <div class="box is-well is-marginless"><img src="media/layout_2.png"></div> | ||
| <div class="box has-background-light is-marginless"><img src="media/layout_2.png"></div> | ||
@@ -66,3 +66,3 @@ <div class="layout"> | ||
| <div class="box is-well is-marginless"><img src="media/layout_3.png"></div> | ||
| <div class="box has-background-light is-marginless"><img src="media/layout_3.png"></div> | ||
@@ -69,0 +69,0 @@ <div class="layout"> |
@@ -8,3 +8,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1">Loader</h1> | ||
| <div class="box is-well is-large is-marginless has-text-centered"> | ||
| <div class="box has-background-light is-large is-marginless has-text-centered"> | ||
| <div class="level"> | ||
@@ -44,2 +44,4 @@ <div class="level-item"><div class="loader"></div></div> | ||
| <hr class="is-small"> | ||
| <div class="loader is-large is-undetermined"></div> | ||
| <div class="box"> | ||
| <div class="loader is-large is-undetermined"></div> | ||
| </div> |
@@ -6,3 +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">Menu</h1> | ||
| <div class="box is-well is-marginless"> | ||
| <div class="box has-background-light is-marginless"> | ||
| <div class="menu"> | ||
@@ -9,0 +9,0 @@ <ul class="menu-list"> |
@@ -7,3 +7,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Modal</h1> | ||
| <div class="box is-well is-large has-text-centered is-marginless"> | ||
| <div class="box has-background-light is-large has-text-centered is-marginless"> | ||
| <button onclick="openModal()" class="button is-rounded is-primary">Open Modal</button> | ||
@@ -10,0 +10,0 @@ </div> |
@@ -8,3 +8,3 @@ <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Spacer</h1> | ||
| <div class="box is-well is-relaxed is-marginless"> | ||
| <div class="box has-background-light is-relaxed is-marginless"> | ||
| <hr class="is-visible"> | ||
@@ -11,0 +11,0 @@ </div> |
@@ -1,2 +0,3 @@ | ||
| <h1 class="title is-2">Biings <span class="has-text-weight-light">Design System</span></h1> | ||
| <br> | ||
| <h1 class="title is-1">Biings <span class="has-text-weight-light">Design System</span></h1> | ||
| <p class="subtitle is-5"> | ||
@@ -7,7 +8,7 @@ <span class="has-text-weight-semibold">Biings DS</span> is the design system for Biings applications and web pages. It is a series of components and guidelines used for creating unified UI. | ||
| <hr> | ||
| <hr class="is-small"> | ||
| <div class="columns is-multiline is-mobile is-variable"> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/avatar" class="box is-well is-relaxed is-link"> | ||
| <a href="#/avatar" class="box is-bordered is-relaxed is-link"> | ||
| <img src="media/components.png" width="80" class="no-zoom"/> | ||
@@ -22,3 +23,3 @@ <div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/color" class="box is-well is-relaxed is-link"> | ||
| <a href="#/color" class="box is-bordered is-relaxed is-link"> | ||
| <img src="media/style.png" width="80" class="no-zoom"/> | ||
@@ -33,3 +34,3 @@ <div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/voice" class="box is-well is-relaxed is-link"> | ||
| <a href="#/voice" class="box is-bordered is-relaxed is-link"> | ||
| <img src="media/voice.png" width="80" class="no-zoom"/> | ||
@@ -43,3 +44,3 @@ <div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/illustration" class="box is-well is-relaxed is-link"> | ||
| <a href="#/illustration" class="box is-bordered is-relaxed is-link"> | ||
| <img src="media/layout.png" width="75" class="no-zoom"/> | ||
@@ -54,7 +55,30 @@ <div> | ||
| <hr class="is-visible is-large"> | ||
| <h2 class="title is-3">Quick start</h2><br> | ||
| <div class="has-text-weight-bold">Using NPM</div> | ||
| Install BDS in your project using the npm package <strong>biings-ds</strong>. | ||
| <br> | ||
| npm install biings-ds | ||
| <br><br> | ||
| <div class="has-text-weight-bold">Manually</div> | ||
| Only two files are required to start using BDS: | ||
| <hr class="is-small"> | ||
| <a href="https://raw.githubusercontent.com/ForsysInteractive/biings-ds/master/build/bds.css" class="box is-bordered is-link" download><span class="is-monospace">**bds.css**</span><br>The only CSS file you'll need to use Biings DS.</a> | ||
| <a href="https://raw.githubusercontent.com/ForsysInteractive/biings-ds/master/build/bds-icons.min.svg" class="box is-bordered is-link" download><span class="is-monospace">**bds-icons.svg**</span><br>An SVG sprite - created with svgstore - that includes all Biings DS icons.</a> | ||
| <hr> | ||
| <div class="box is-bordered is-relaxed"> | ||
| <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 class="title is-spaced is-3 has-text-weight-light has-text-primary"><a href="#/readme">How to contribute</a></div> | ||
| Onboarding for designers and developers wanting to contribute. We welcome all feedback and ideas in order to produce the best possible experience for our users.<br><br>Check out the <a href="#/readme">**Readme**</a> file to get started. | ||
| </div> |
@@ -1,4 +0,4 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Typography</h1> | ||
| <p class="subtitle is-5"> | ||
| <span class="has-text-weight-semibold">Typography</span> is used to create clear hierarchies to guide users through the product and experience. It is the core structure of any well designed interface. | ||
| <strong>Typography</strong> is used to create clear hierarchies to guide users through the product and experience. It is the core structure of any well designed interface. | ||
| </p> | ||
@@ -20,20 +20,24 @@ | ||
| <hr> | ||
| Titles and subtitles have sizes ranging from 1 (biggest) to 6 (smallest). Texts have an extra 7th smaller size. Use the modifier syntax `is-[1-6]` for titles, and `is-size-[1-7]` for texts. | ||
| <h1 class="title is-1">Hero Title 1</h1><div class="subtitle is-6 has-text-grey">Hero title (website only)</div> | ||
| <br> | ||
| <h2 class="title is-2">Title 2</h2><div class="subtitle is-6 has-text-grey">Window title</div><br> | ||
| <div class="box is-large"> | ||
| <h1 class="title is-1">Hero</h1><div class="subtitle is-3 has-text-grey">Website or marketing message</div> | ||
| <hr class="is-smaller"> | ||
| <h2 class="title is-2">Page</h2><div class="subtitle is-4 has-text-grey">Main page title</div> | ||
| <hr class="is-smaller"> | ||
| <h3 class="title is-3">Section</h3><div class="subtitle is-5 has-text-grey">Page section title</div> | ||
| <hr class="is-smaller"> | ||
| <h4 class="title is-4">Modal</h4><div class="subtitle is-6 has-text-grey">Modal header title</div> | ||
| <hr class="is-smaller"> | ||
| <h5 class="title is-5">Header</h5><div class="subtitle is-6 has-text-grey">Paragraph title</div> | ||
| <hr class="is-smaller"> | ||
| <h6 class="title is-6">Text</h6><div class="subtitle is-size-7 has-text-grey">Same size as regular text</div> | ||
| </div> | ||
| <h3 class="title is-3">Title 3</h3><div class="subtitle is-6 has-text-grey">Modal title</div> | ||
| <br> | ||
| <h4 class="title is-4">Title 4</h4><div class="subtitle is-6 has-text-grey">Modal title</div> | ||
| <br> | ||
| <h5 class="title is-5">Title 5</h5><div class="subtitle is-6 has-text-grey">Modal title</div> | ||
| <br> | ||
| <h6 class="title is-6">Title 6</h6><div class="subtitle is-6 has-text-grey">Modal title</div> | ||
| ?> There should be a size difference of <strong>two</strong> between a title and its direct subtitle. | ||
| <hr class="is-large"> | ||
| <hr> | ||
| <div class="box is-bordered"> | ||
| Find more variations on → <a href="http://bulma.io/documentation/modifiers/typography-helpers/" target="blank">Bulma / <strong>Typography helpers</strong></a> | ||
| More information on → <a href="http://bulma.io/documentation/modifiers/typography-helpers/" target="blank">Bulma / <strong>Typography helpers</strong></a> | ||
| </div> |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Foundation</h6><h1 class="title is-1 has-text-weight-bold">Voice & Tone</h1> | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Voice & Tone</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Voice</span> expresses our personality and stays consistent across all of our content. <span class="has-text-weight-semibold">Tone</span> expresses the mood or feeling of the voice, it should change based on the situation. Find below the way we present all titles, headers, copy and buttons. |
| { | ||
| "name": "biings-ds", | ||
| "version": "1.3.0", | ||
| "version": "1.4.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
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
- Number of package files
- increased by0.65%
154
- Lines of code
- increased by0.65%
5905
Worsened metrics
- Total package byte prevSize
- decreased by-0.14%
10591268
- Number of lines in readme file
- decreased by-20.69%
46
No dependency changes