Site layout is based on Zurb Foundation for Sites framework v6.5.3 and contains all its features and components out of the box.
Basic font is Proxima Nova, bundled package includes all 16 non-condensed variations with weight from 100 to 900.
Header sizes are pre-set as following:
| Header | Small screen (default) | Medium and up |
| <h1> | 36px | 48px |
| <h2> | 21px | 36px |
| <h3> | 19px | 31px |
| <h4> | 18px | 25px |
| <h5> | 17px | 20px |
| <h6> | 16px | 16px |
<h2><span>Category</span>Section header</h2>
Inverted colors: <div class="midnight"></div>, applicable to any container
Uppercase text: <span class="uppercase"> uppercase </span>
Lower case text becomes uppercase
Small text: <span class="small"> small text </span>, font size reduced to 80% of style applied to container
Normal text becomes smaller
White spaces are not wrapping at the end of the line <span class="nowrap"></span>
To display inline image properly it should be wrapped into <figure></figure> container, it can optionally have image caption surrounded with <figcaption></figcaption> tags.
Alignment: .align-right or .align-left class can be applied to <figure> tag to make image occupy 50% of available space (on large screens) and aligned accordingly.
<figure class="align-right">
<img src="assets/img/medicine-pharmacy-630.jpg"
alt="Pharmacist handing out drugs to customer">
<figcaption>Lorem ipsum</figcaption>
</figure>
code above is rendered as following: detail.html
Use Responsive embed container for all embeddable widgets
Variation of the original Card component to accommodate big icons as displayed on homepage. To apply specific styling just add class .icon to the outermost element with .card class applied and follow generic guidelines for Card container.
Display portrait oriented image in the card properly - used for knowledge products to accommodate covers. Use instructions above.
In order to embed inline map you have to indicate target container in the initiation script, apply .inline-map to that container to make sure it fits the layout.
Table which is set to stack columns on small screens can be further enhanced by annotating cells values with labels from column headers. Example
Layout of the component is quite complex, you have to follow content structure from the respective section on homepage to achieve desired result.
Lazy loader for images
Plugin documentation on external site.
Basic template:
<img alt=""
src="assets/img/image-placeholder-2-thumb.jpg"
data-src="assets/img/image-placeholder-2.jpg"
class="blur-up lazyload">
This approach requires small thumbnail images pre-generated for all assets.
Optional .blur-up class can be used to provide "Fade in" effect on load.
Instead of small thumbnail image you can use base64 encoded inline representation of 1x1 transparent image
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==which doesn't require any additional download, but doesn't show anything on initially.
Advanced interaction controls for HTML tables
All customization options can be provided as data-* attributes along with main data-table attribute which will invoke automatic initialization after load.
DataTables plugin is quite heavy and adds up to 100Kb to the project payload after compilation. Consider disabling its import in app.js if you won't use this functionality.
A collection of all country flags in SVG
Usage: For using the flags inline with text add the classes .flag-icon and .flag-icon-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>. If you want to have a squared version flag then add the class .flag-icon-squared as well. Example:
<span class="flag-icon flag-icon-un"></span>
<span class="flag-icon flag-icon-un flag-icon-squared"></span>
Output:
.flag-icon-2x
.flag-icon-3x
.flag-icon-5x
.flag-icon-7x
.flag-icon-10x