README
Arduino web shared styles
Arduino Websites using arduino-sass
- angularjs-seed
- aug-site
- blog
- create-cloud-site
- create-gettingstarted-site
- create-mydevices-site
- create-payments-site
- CTC moodle theme
- digital-store
- glossary
- header-footer
- homepage
- react-seed
- reference
- sso-for-real
- ssoadmin-site
- user-profile
- ui-elements
- webide
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
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>
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>
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>
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>
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" />
Select fields
.my-select {
@extend %ardu-select;
}
<select class="my-select">
</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>
Error notifications
.my-error-notification {
@extend %error-notification;
}
<div class="my-error-notification">
</div>
Success notifications
.my-success-notification {
@extend %success-notification;
}
<div class="my-success-notification">
</div>
Warning notifications
.my-warning-notification {
@extend %warning-notification;
}
<div class="my-warning-notification">
</div>
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>
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>
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>
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>
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>