biings-ds
Advanced tools
biings-ds - npm Package Compare versions
Comparing version 1.10.1 to 1.10.2
@@ -7,7 +7,8 @@ <!-- _coverpage.md --> | ||
| <img src="media/biings_ds.png" width="140" class="no-zoom"/> | ||
| <img src="media/bds.png" width="140" class="no-zoom"/> | ||
| <hr class="is-invisible is-small"/> | ||
| <div class="title is-1 is-spaced has-text-weight-bold ">Biings <span class="has-text-weight-light">DS</span></div> | ||
| <div class="subtitle is-4 has-text-grey-dark">The single source of truth for building Biings UIs</div> | ||
| <hr class="is-invisible is-large"/> | ||
| <span class="title is-1 has-text-weight-bold ">Biings <span class="has-text-weight-light">Design System</span></span> | ||
| <hr class="is-small"> | ||
| <div class="subtitle is-4 has-text-grey-dark">The single source of truth for building Biings products</div> | ||
| <hr> | ||
| <a href="#/?id=main" class="button is-primary is-medium is-beefy">Explore the system</a> | ||
@@ -14,0 +15,0 @@ |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Avatar</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Avatar</span> is used to display a picture, typically next to a person's name. |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Box</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -86,5 +86,5 @@ <span class="has-text-weight-semibold">Box</span> is a visual motif used to create groupings of content related to a same entity or subject as well as focus through depth. | ||
| <div class="box is-well"> | ||
| <div class="box is-well is-marginless"> | ||
| <div class="box"> | ||
| <div id="ebox" class="box is-large is-white hover-to-popping is-expandable" onclick="toggleExpand('')"> | ||
| <div id="ebox" class="box is-large is-white hover-to-popping is-expandable" onclick="toggleExpand('ebox')"> | ||
| <span class="title is-4 has-text-grey-darker">I'm expandable <span class="has-text-grey has-text-weight-normal">(click me)</span></span> | ||
@@ -99,3 +99,12 @@ <div class="expanded-content"> | ||
| <div class="box is-expandable"> | ||
| I'm expandable (click me) | ||
| <div class="expanded-content"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| An vero, inquit, quisquam potest probare, quod perceptfum, quod. | ||
| Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. | ||
| </div> | ||
| </div> | ||
| <hr class="is-large is-visible"> | ||
@@ -102,0 +111,0 @@ |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Button</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Buttons</span> allow users to take actions, and make choices. |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Checkbox</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Checkbox</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Checkboxes</span> are used when there is a list of options and the user may select multiple options, including all or none. |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Style</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> | ||
@@ -151,1 +151,11 @@ | ||
| ``` | ||
| <hr> | ||
| <div class="box is-bordered is-large is-well"> | ||
| <h4 class="subtitle is-6 has-text-grey-darker has-text-weight-semibold">BONUS</h4> | ||
| <h4 class="title is-4 has-text-weight-bold has-text-primary">Slack Sidebar Theme</h4> | ||
| Paint your Slack to the colors of Biings by copy-pasting the following HEX codes into your Slack preferences.<br><br> | ||
| #403D4B,#302D3D,#715EB8,#ffffff,#302D3D,#F9F8FC,#5BCC72,#FF9505 | ||
| </div> |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Column</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Column</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Columns</span> are used for creating page layouts by structuring your content horizontally. Biings DS uses a responsive fluid system that automatically scales up to 12 columns. |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1">Dropdown</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1">Dropdown</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ The <span class="has-text-weight-semibold">dropdown</span> allow users to choose from a list of different actions or choices. |
@@ -1,25 +0,33 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Principles</h6><h1 class="title is-1 has-text-weight-bold">Ethic</h1> | ||
| <p class="subtitle is-5"> | ||
| <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. | ||
| <span class="has-text-weight-semibold">Ethic</span> is the set of principles governing what we decide to create. It should be kept in mind at all stages of the design process. | ||
| </p> | ||
| <hr class="is-large is-visible"> | ||
| <h2 class="title is-3">Sustainable HR</h2><h3 class="subtitle is-5 has-text-weight-light">Sustainable human ressources maintain the same level of corporate culture, knowledge and creativity within an organisation, and over time.</h3> | ||
| <!-- Favor good work-atmosphere rather than adopting a coercive control of absences. Always Manage, never judge --> | ||
| <hr> | ||
| <h2 class="title is-3">Facts over Surveys</h2> | ||
| <div class="subitle is-6 has-text-grey">*Under preparation..*</div> | ||
| <div class="box is-large is-white hover-to-floating"> | ||
| <h2 class="title is-3">Sustainable HR</h2> | ||
| <h3 class="subtitle is-5 has-text-weight-normal has-text-grey-dark"> | ||
| Sustainable human ressources maintain the same level of corporate culture, knowledge and creativity within an organisation, and over time. | ||
| </h3> | ||
| <!-- <a href="">Read more</a> --> | ||
| <!-- Favor good work-atmosphere rather than adopting a coercive control of absences. Always Manage, never judge --> | ||
| </div> | ||
| <hr> | ||
| <hr class="is-small"> | ||
| <h2 class="title is-3">Privacy by Design</h2> | ||
| <div class="subitle is-6 has-text-grey">*Under preparation..*</div> | ||
| <div class="box is-large is-white hover-to-floating"> | ||
| <h2 class="title is-3">Facts over Surveys</h2> | ||
| <h3 class="subtitle is-5 has-text-weight-normal has-text-grey-dark"> | ||
| Collecting factual data over information from surveys is key for a reliable analysis of HR social climate. | ||
| </h3> | ||
| </div> | ||
| <hr> | ||
| <hr class="is-small"> | ||
| <div class="box is-bordered"> | ||
| **Feel something is missing?** 🤔 <br>Start a thread here → <a href="https://biings.slack.com" target="blank">biings.slack.com</strong></a> | ||
| <div class="box is-large is-white hover-to-floating"> | ||
| <h2 class="title is-3">Privacy by Default</h2> | ||
| <h3 class="subtitle is-5 has-text-weight-normal has-text-grey-dark"> | ||
| When releasing new procut features, the strictest privacy settings should be applied by defaults. | ||
| </h3> | ||
| </div> |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <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. |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Illustration</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ 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. |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Input</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Input</h1> | ||
| <p class="subtitle is-5"><span class="has-text-weight-semibold">Input fields</span> enable users to provide information.</p> | ||
@@ -3,0 +3,0 @@ |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Layout</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Layout</span> is the page structure in which content and components live. |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1">Loader</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1">Loader</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Loaders</span> are used when performing slow computations, notifying users that loading is underway. |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Menu</h1> | ||
| <p class="subtitle is-5"><span class="has-text-weight-semibold">Menus</span> present a list of links and should be used for content navigation.</p> | ||
@@ -3,0 +3,0 @@ |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Message</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Message</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Message</span> allows to communicate information to the user. Messages can act as notifications or other kinds of alert messages. |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</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. Modals strongly interrupts user workflow and should be used sparingly.</span></p> | ||
@@ -3,0 +3,0 @@ |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Panel</h1> | ||
| <p class="subtitle is-5">A <span class="has-text-weight-semibold">panel</span> shows content divided into section. Panels can also allow the user to expand and collapse each section (javascript required).</p> | ||
@@ -3,0 +3,0 @@ |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Radio button</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Radio button</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Radio buttons</span> are used when a list of two or more options are mutually exclusive, meaning the user must select only one option. |
| <br><br><br> | ||
| <h1 class="title is-1">Biings <span class="has-text-weight-light">Design System</span></h1> | ||
| <h1 class="title is-1">Biings <span class="has-text-weight-light">DS</span></h1> | ||
| <p class="subtitle is-5"> | ||
| <span class="has-text-weight-semibold">Biings DS</span> (BDS) is the design system for Biings applications and web pages. It is a series of guidelines and components used for creating unified UI. Avoid creating your own CSS code by combining components and modifiers together. | ||
| <span class="has-text-weight-semibold">Biings DS</span> is the design system for Biings applications and web pages. It is a series of guidelines used for creating unified experience and UI. Avoid design missteps by combining principles, style and components together. | ||
| </p> | ||
@@ -9,41 +9,30 @@ | ||
| <div class="columns is-multiline is-mobile is-variable"> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/avatar" class="box is-white is-relaxed hover-to-popping"> | ||
| <img src="media/components.png" width="80" class="no-zoom"/> | ||
| <div class="columns is-multiline"> | ||
| <div class="column is-full"> | ||
| <a href="#/ethic" class="box is-large is-white"> | ||
| <img src="media/layout.png" width="65" class="no-zoom" style="margin-bottom: 0.5rem;"/> | ||
| <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 class="title is-2 has-text-red has-text-weight-light">Principles</div> | ||
| <div class="subtitle is-5 has-text-grey-dark">Design for HR sustainabilty</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-white is-relaxed hover-to-popping"> | ||
| <img src="media/style.png" width="80" class="no-zoom"/> | ||
| <div class="column is-half"> | ||
| <a href="#/color" class="box is-large is-white"> | ||
| <img src="media/style.png" width="55" class="no-zoom" style="margin: 0.5rem 0;"/> | ||
| <div> | ||
| <div class="title is-3 has-text-primary has-text-weight-light">Colors</div> | ||
| <div class="subtitle is-6">Color brings a design to life.</div> | ||
| <div class="title is-3 has-text-cyan has-text-weight-light">Style</div> | ||
| <div class="subtitle is-5 has-text-grey-dark">Guidelines and colors to bring a design to life</div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="column is-12 is-hidden-desktop"></div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/voice" class="box is-white is-relaxed hover-to-popping"> | ||
| <img src="media/voice.png" width="80" class="no-zoom"/> | ||
| <div class="column is-half"> | ||
| <a href="#/avatar" class="box is-large is-white"> | ||
| <img src="media/components.png" width="65" 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. Voice expresses our personality.</div> | ||
| <div class="title is-3 has-text-purple has-text-weight-light">Components</div> | ||
| <div class="subtitle is-5 has-text-grey-dark">Library of all BDS components</div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div class="column is-half-desktop is-full-tablet"> | ||
| <a href="#/illustration" class="box is-white is-relaxed hover-to-popping"> | ||
| <img src="media/layout.png" width="75" class="no-zoom"/> | ||
| <div> | ||
| <div class="title is-3 has-text-primary has-text-weight-light">Illustrations</div> | ||
| <div class="subtitle is-6">What makes complex ideas more accessible.</div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
@@ -76,3 +65,3 @@ | ||
| <div class="box is-bordered is-relaxed"> | ||
| <div class="box is-bordered is-large"> | ||
| <div class="title is-spaced is-3 has-text-weight-light has-text-primary">How to contribute</div> | ||
@@ -79,0 +68,0 @@ <p>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.</p><br> |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Skeleton</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Skeleton</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Squeleton</span> is a blank version of a component that has not been loaded yet. Unlike Loaders, a skeleton screen visually tells users what to expect and make them focus on the progress, rather than the wait time. |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Spacer</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Spacer</span> – aka Divider – is a visual helper for grouping related content together. It is used to define thematic changes in a layout. |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Component</h6><h1 class="title is-1 has-text-weight-bold">Table</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Component</h6><h1 class="title is-1 has-text-weight-bold">Table</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <span class="has-text-weight-semibold">Table</span> presents data sets in an easily scannable and comparable way. |
@@ -1,2 +0,2 @@ | ||
| <h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Terminology</h1> | ||
| <h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 has-text-weight-bold">Terminology</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ This section covers the approved <strong>terms and idioms</strong> for use in Biings apps.</span> |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Style</h6><h1 class="title is-1 has-text-weight-bold">Typography</h1> | ||
| <p class="subtitle is-5"> | ||
@@ -3,0 +3,0 @@ <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. |
@@ -1,2 +0,2 @@ | ||
| <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> | ||
| <h6 class="subtitle is-5 has-text-grey">Style</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.10.1", | ||
| "version": "1.10.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
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 by1.92%
10988801
- Number of package files
- increased by0.6%
169
Worsened metrics
- Lines of code
- decreased by-0.1%
6098
- Number of lines in readme file
- decreased by-13.75%
69