Saito comes with a default set of CSS classes that creates the aesthetics behind our core applications. While developers can always create their own CSS designs, you can extend the core classes in our Saito CSS design for a faster path to having your module look good everywhere.
A sigle global web/saito.css file includes all css. This file is auto generated by the saito compile script.
In dev mode (where the dev flag is added to npm run compile dev) the saito.css file uses css @include syntax to include the contents of web/saito/css-includes as well as each modules master css file (which is located at mods/<module name>/web/style.css) which in turn includes all the module css from mods/<module name>/web/css/*.
In prod mode, where no dev flag is applied to npm run compile, the contents of web/saito/css-includes and each module's web/css/ folder are copied into the master web/saito.css file, creating a single css file for download.
This produces a better user experience as only a single css file must be loaded in production. At the same time, developers do not need to run the compile script to update css when working in development mode. (Simply reloading the browser refreshes the css.)
Follow X standard
Use double quotes for font names, url() and @import definitions.
Preference shortand definitions where more than one parameter is set:
margin: 0 1rem;
rather than
margin-left: 1rem;
margin-right: 1rem;
Use leading zeros on definitions. 0.5rem not .5rem
Put spaces after : in property declarations.
Put spaces before { in rule declarations.
Use hex color codes #000 avoid rgba() and never use color names - i.e. whitesmoke.
Note use of color varliables below.
Use one line per property declaration.
Always follow a rule with one line of whitespace.
Colors should be defined in variables kept in saito-variables.css
This is to comply with requirements for theme switching
Files in /web/saito/css-imports should only contain generic css for the element or structure they define.
Naming should be consistent throughout ui structures:
saito-hat
saito-hat-top
saito-hat-top-band
saito-hat-brim
Saito overlay is a container for arbitray content. It:
<div class="saito-overlay">
Content
<div class="saito-overlay-backdrop"></div>
Saito Modal provides a standard backdrop (dreamscape) for a variety of modal forms.
Example - Saito Modal Menu
<div class="saito-modal">
<h6>Saito Menu</h6>
<div class="saito-modal-content">
<div id="user_menu_item_0" class="saito-modal-menu-option">
<i class="far fa-id-card"></i> (icon)
<div>Add Contact</div> (text)
</div>
... (further menu entries)
</div>
</div>
"saito-modal" provides the centered div with padding and the dreamscape background.
"saito-modal-menu-option" spaces an icon-text pair and handles cursor look and feel
*TODO: Add further modal types.
Satio Table provides a standard formated table.
Example - Rankings
<div class="saito-table">
<div class="saito-table-head"></div> (unused in this case)
<div class="saito-table-body">
<div class="saito-table-row league-leaderboard-ranking">
<div>Blackjack</div>
<div>…</div>
</div>
...
</div>
</div>
"saito-table" vertically spaces the rows in a grid with spacing.
"saito-table-head" allows for a header row with titles differently styled.
"saito-table-row" handles basic row theming
NOTE the grid columns of "saito-table-row" can be over-ridden to create specific layouts (defult is two column).
Saito Module provides a dynamic (auto responsive) card for showing modules in lists or grids. Examples are game invites or Appstore cards
Example - Saito Game Invite
<div class="saito-module saito-game">
<div class="saito-module-titlebar">
<span class="saito-module-titlebar-title">Twilight Struggle</span>
<div class="saito-module-titlebar-details game-type">CUSTOM GAME</div>
</div>
<div class="saito-module-details saito-game-identicons">
<div class="tip">
<img class="saito-module-identicon saito-identicon">
<div class="tiptext">
<div class="saito-address">kris088Chess@saito</div>
</div>
</div>
</div>
</div>
"saito-module" provides the flexible card
"saito-module-titlebar" provides theming for a stanard Title/Subtitle
"saito-module-details" is flexible space that can house arbitrary HTML. This could be identicons in the invite as per the example but could also be buttons or controls (as in an "intsall" button in appstore).
The Saito Module Development environment proivdes optional pre-build UI commponents and styling.
This page provides information on the core classes and explains their internal / expected structures.