Arduino-sass NPM

Arduino web shared styles

Arduino Websites using arduino-sass

Installation

You should clone repos through ssh and install arduino-sass as dependency:

npm install --save git+ssh://git@github.com/bcmi-labs/sass.git#x.x.x

Linter

Please use sass-lint for Sublime Text, SublimeLinter needed or sass-lint for Visual Studio Code

DEMO

UI-Elements site

Import in your scss stylesheets

Variables import:

@import 'node_modules/arduino-sass/src/variables';

Single mixin import:

@import 'node_modules/arduino-sass/src/buttons';

Complete import:

@import 'node_modules/arduino-sass/src/arduino-sass';

Placeholders only import:

@import 'node_modules/arduino-sass/src/placeholders';

Mixins and variables only import:

@import 'node_modules/arduino-sass/src/mixins';

Variables

Mixins from Bourbon
Colors palette

background-color: $teal2;

Animation timing variables

Typography

If bare fonts shall be included in the CSS here is how to do that:

@import 'node_modules/arduino-sass/src/fonts';

h1 {
    @include font(opensans, bold);
}

//Render the font-face declarations (optional)
@include import-fonts;

Whenever possible it's recommended to use the pre-defined typography placeholders or styles. To use the fonts in a SASS file import either the base module typography which contains the styles as placeholders or the ready-to-go classes by importing the typgraphy-sans or typgraphy-mono module.

They can be imported e.g. by @import 'node_modules/arduino-sass/src/typgraphy-sans'; and @import 'node_modules/arduino-sass/src/typgraphy-mono';

The pre-defined styles are as follows:

.arduino-typography-xx-small
.arduino-typography-xx-small-strong
.arduino-typography-x-small
.arduino-typography-x-small-strong
.arduino-typography-x-small-italic
.arduino-typography-small
.arduino-typography-small-strong
.arduino-typography-small-italic
.arduino-typography-medium
.arduino-typography-medium-strong
.arduino-typography-large
.arduino-typography-x-large
.arduino-typography-x-large-strong
.arduino-typography-xx-large
.arduino-typography-xx-large-strong
.arduino-typography-x-small-monospace
.arduino-typography-x-small-strong-monospace
.arduino-typography-small-monospace
.arduino-typography-small-strong-monospace
.arduino-typography-medium-monospace
.arduino-typography-medium-strong-monospace
.arduino-typography-large-strong-monospace
.arduino-typography-x-large-strong-monospace
.arduino-typography-xx-large-strong-monospace

The styles are defined using relative units. To ensure a consistent experience across browsers the root font size can be set using $font-size-default. If these classes are applied to elements containing multiple lines of content the multiline class needs to be added to ensure a proper line height. E.g.

<div class="arduino-typography-small multiline">This is a multiline description containing multiple lines of content.</div>

Font Face Declarations

If the font-face declarations shall be rendered automatically (hosted on Arduino's CDN) add @include import-fonts; at the bottom of your main SASS file. Alternatively the font-faces can be declared using a link tag. E.g.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,600;0,700;1,400&display=swap" rel="stylesheet" />

Spacing

The spacing file can be included as @import 'node_modules/arduino-sass/src/spacing';. It exposes the following variables that can be used for all margin padding or other positioning attributes:

$space-xxx-small: 2px;
$space-xx-small: 4px;
$space-x-small: 8px;
$space-small: 12px;
$space-medium: 16px;
$space-large: 20px;
$space-x-large: 28px;
$space-xx-large: 36px;
$space-xxx-large: 48px;
$space-xxxx-large: 72px;

Breakpoints

@import 'node_modules/arduino-sass/src/breakpoints';

@include breakpoint(1024) {

}

@include breakpoint(1025, 'min') {

}

@include breakpoint-both(1025, 1200) {

}

Additional features

Links in text

.my-link {
  @extend %text-link;
}

<a href="/" class="my-link"></a>

Buttons

Add the 'secondary' class to attach the secondary button style using colors of the primary one (.button css class) Add the 'busy' class from utils.scss to attach the barber shop style

.button {
  @include ardu-button(<color1>, <color2>);
}

<div class="buttons">
  <button class="secondary button">NEW TEAM</button>
  <button class="button">PURCHASE</button>
  <button class="button busy">PURCHASE</button>
  <button class="button inactive">RESET PASSWORD</button>
</div>

Buttons Busy Button Inactive Buttons

StoreButtons

Add the 'secondary' class to attach the secondary button style using colors of the primary one (.button css class) Add the 'busy' class to show the loading spinner

.button {
  @include ardu-store-button (<color1>, <color2>);
}

<div class="buttons">
  <button class="button">
    NEW TEAM
  </button>
  <button class="button busy">
    NEW TEAM
    <div class="spinner-container">
      <div class="spinner"></div>
    </div>
  </button>
</div>

Store Buttons

Checkboxes

.my-checkbox {
  @extend %ardu-checkbox;
}

html example for checkboxes:

<label class="my-checkbox">
  <input type="checkbox" />
  <span class="custom-checkbox"></span>
  <span>Checkbox Label</span> <!-- optional, use aria-label if this is missing -->
</label>

Checkboxes

Radio Buttons

.my-radio {
  @extend %ardu-radio;
}

html example for radio buttons:

<label class="ardu-radio">
  <input type="radio" name="form_name" value="radio-value" />
  <span class="custom-radio"></span>
  <span>Radio Label</span>
</label>

Radio Buttons

Input fields

.my-input {
  @extend %ardu-input;
}

<input class="my-input" />

Style validation and errors:

.form-label {
  @extend %ardu-label;
}

<div class="form-label">
  <label for="rename-thing">
    Thing Name
  </label>
  <div class="error-message">
    No special characters or spaces allowed
  </div>
</div>
</div>
<input id="rename-thing" class="error" />

Input Error

Select fields

.my-select {
  @extend %ardu-select;
}

<select class="my-select">
</select>

Input and Select

Toggle

.your-toggle-selector {
  @include toggle;
}

// with labels
.your-toggle-selector {
  @include toggle(60px, 'on', 'off');
}

html example for toggle:

<label class="your-toggle-selector">
<input type="checkbox">
<div class="slider"></div>
</label>

Toggle

Error notifications

.my-error-notification {
  @extend %error-notification;
}

<div class="my-error-notification">
</div>

Error notifications

Success notifications

.my-success-notification {
  @extend %success-notification;
}

<div class="my-success-notification">
</div>

Success notifications

Warning notifications

.my-warning-notification {
  @extend %warning-notification;
}

<div class="my-warning-notification">
</div>

Warning notifications

Spinner

.spinner {
  @include spinner($teal2, $white, $spinner-size);
}

Scrollbars

@include scrollbars(5px, $asbestos);

Modals

Add open class to to show the modal, animations included.

.arduino-modal {
  &.primary {
    @include modal($clouds, $teal2);
  }

  &.warning {
    @include modal($clouds, $notifyerror);
  }
}

<div class="arduino-modal open">
  <div class="modal-backdrop"></div>

  <div class="modal-body">
    <h1>Modal Title</h1>
    <div>
      Modal Content
    </div>
  </div>
</div>

Modal

Sidebar

Use ardu-sidebar placeholder.

Add open class to has-submenu or active class to a li element.

.my-sidebar {
  @extend %ardu-sidebar;
}

<ul class="my-sidebar">
  <li class="has-submenu open">
      <div class="bullet-icon">
        <span class="icon"></span>
        <span class="line"></span>
      </div>
      <a href="">item with submenu</a>
      <ul>
        <li><a class="sidebar-button" href="">submenu 1</a></li>
        <li class="active"><a href="">submenu 2</a></li>
        <li><a href="">submenu 3</a></li>
      </ul>
  </li>
  <li>
    <div class="bullet-icon">
      <span class="icon"></span>
      <span class="line"></span>
    </div>
    <button class="sidebar-button">main item</buttons>
  </li>
</ul>

Sidebar

Pagination

Use ardu-pagination placeholder and all the children elements classes.

Add active class to current page element.

.my-pagination {
  @extend %ardu-pagination;
}

<ul class="my-pagination">
  <li class="move-page prev"> <!-- show if currentPage != firstPage, handle click -->
    <button class="text-button"">
      Prev
    </button>
  </li>

  <!-- one or more than one .page-number element, handle click -->
  <li class="page-number">
    <button class="text-button">
      <!-- page number here or "..." -->
    </button>
  </li>

  <li class="move-page next"> <!-- show if currentPage != lastPage, handle click -->
      <button class="text-button">
        Next
      </button>
    </li>
</ul>

Pagination

Responsive Table / Grid layout

12 columns spacing available, use span-n class to set up column width.

Optional $breakpoint parameter to define minimum screen size to show compact version (default value 1024px and below).

Simple Grid layout

.form-block {
    @include ardu-row;
}

<div class="form-block">
  <label class="span-3" for="repo-uri">URI</label>
  <input class="span-9" id="repo-uri" type="url" required/>
</div>

Table layout

.table-list {
  @include table-list($white, $fog, $breakpoint);
}

<div class="table-list">

  <!--header -->
  <div class="row table-head">
    <div class="list-cell span-3">
      Username
    </div>
    <div class="list-cell span-3">
      Email
    </div>
    <div class="list-cell span-4">
      Registered on
    </div>
    <div class="list-cell user-status span-2">
      Status
    </div>
  </div>

  <!-- content row -->
  <!-- use title to display full string when cut off from css ellipsis -->
  <div class="row user-element">
    <div class="list-cell span-3">
      <div class="username-cell" title="myUsername">
        <span class="cell-content">
          myUsername
        </span>
      </div>
    </div>
    <div class="list-cell span-3" title="arduino-sass@arduino.cc">
      <span class="cell-content">
        arduino-sass@arduino.cc
      </span>
    </div>
    <div class="list-cell span-4" title="Wed Oct 11 2017">
      <span class="cell-content">
        Wed Oct 11 2017
      </span>
    </div>
    <div class="list-cell user-status span-2 active-class">
      <span class="cell-content">
        ACTIVE
      </span>
    </div>
  </div>

</div>

Table

Popover

Add open class to to show the popover.

.arduino-popover {
  @include popover($feather, $asbestos, $teal1, 'left', 'bottom');
}

.arduino-popover-target {
  color: $teal1;
  position: relative;
  display: inline;
}

<div>
  Demonstrate the use of the <div class="popover-container">
    <div class="arduino-popover-target">Network Monitor</div>
    <div class="arduino-popover open">
      <div class="inner">
        <div class="popover-content">
          <h1>Network Monitor</h1>
          <div>
            Similarly to the Serial Monitor, the Network Monitor allows you to send and receive data to and from a board connected wirelessly.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Popover

bourbon

@everything-registry/sub-chunk-1161 @arduino/arc @infinitebrahmanuniverse/nolb-ard

3.0.1

4 years ago