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:
- Single mixin import:
- Complete import:
- Placeholders only import:
- Mixins and variables only import:
Variables
-
Mixins from Bourbon
-
Colors palette
- Animation timing variables
Typography
If bare fonts shall be included in the CSS here is how to do that:
} //Render the font-face declarations (optional)
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
} } }
Additional features
Links in text
}
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
}
NEW TEAM PURCHASE PURCHASE RESET PASSWORD
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
}
NEW TEAM NEW TEAM
Checkboxes
}
html example for checkboxes:
Checkbox Label <!-- optional, use aria-label if this is missing -->
Radio Buttons
}
html example for radio buttons:
Radio Label
Input fields
}
Style validation and errors:
}
Thing Name No special characters or spaces allowed
Select fields
}
Toggle
} // with labels}
html example for toggle:
Error notifications
}
Success notifications
}
Warning notifications
}
Spinner
}
Scrollbars
Modals
Add open class to to show the modal, animations included.
} }}
Modal Title Modal Content
Sidebar
Use ardu-sidebar
placeholder.
Add open class to has-submenu
or active class to a li
element.
}
item with submenu submenu 1 submenu 2 submenu 3 main item
Pagination
Use ardu-pagination
placeholder and all the children elements classes.
Add active class to current page element.
}
<!-- show if currentPage != firstPage, handle click -->
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
}
URI
Table layout
}
<!--header --> Username Email Registered on Status <!-- content row --> <!-- use title to display full string when cut off from css ellipsis --> myUsername arduino-sass@arduino.cc Wed Oct 11 2017 ACTIVE
Popover
Add open class to to show the popover.
} }
Demonstrate the use of the Network Monitor Network Monitor Similarly to the Serial Monitor, the Network Monitor allows you to send and receive data to and from a board connected wirelessly.