Toast is a lightweight grid framework. It has been customized slightly and fit into the Q4 Blank template. You can check out the documentation right here. Here is a basic rundown on how to use toast.
.grid is the base class that determines a column container with padding. By default, columns within a .grid container will be spaced out by 20px.
.grid-no-gutter is the base class that determines a column container without padding. No spacing here!
.col is the base class that determines a grid column. This is needed on all column items.
.col-#-of-# is used to determine screen width of the column for all screen sizes.
.col-$-#-of-# is used to determine screen width of the column for a screen-breakpoint, where $ is the screen breakpoint. The default screen breakpoints are as follows:
- Large – 1200px – .col-lg-#-of-#
- Legacy – 1024px – .col-lc-#-of-#
- Medium – 768px – .col-md-#-of-#
- Small – 480px – .col-sm-#-of-#
Wrapper Class: .grid
col-3-of-3
col-lg-3-of-4
col-lc-2-of-4
col-md-3-of-4
col-centered
col-3-of-4
col-push-1-of-4
Wrapper Class: .grid-no-gutter
col-3-of-3
col-lg-3-of-4
col-lc-2-of-4
col-md-3-of-4
col-centered
col-3-of-4
col-push-1-of-4
Using toast is great, but you will often times need to consider whether or not you will be using the gutter for your grid. If sizing is an issue, such as in the instance of compact information, a gutter is not preferred.
If you would like to add backgrounds to your columns, consider using the background-clip property. Keep in mind, however, that this css property is not supported by IE8.
In an effort to avoid CSS inconsistencies, the most common modules have been styled on Q4 Blank. Here is a list of modules that have been introduced to default styling:
- Events Modules
- Events Module
- Events Latest Module
- Events Details Module
- Financial Reports (Annual)
- Form Builder
- Job Modules
- Job Posting Module
- Job Details Module
- Job Application Module
- Mailing List Modules (Subscribe and Unsubscribe)
- Person List
- Presentation Module
- Press Release Modules
- Press Releases Module
- Press Release Latest Module
- Press Release Details Module
- Search Results
- SEC Filings
- Site Map
- Stock Quote Modules
Widgets (plus extras) have also been added to blank with default styling. Here is a list of those:
- Add to Calendar Plugin
- Events Calendar
- Fancybox Captcha Plugin
- Quarterly Financials Widget
- Financial Table Widget
- Download List Slider
- Responsive Analyst Coverage Table
Planned innovations will be added to Q4 Blank as they are developed. Stay tuned!
Icons on blank are powered by IcoMoon. Using them is simple! Either assign the icon's class to an object in the HTML, or use the :before (and :after!) pseudo-class to display the icon.
Click on one of the following icons to see its class and content property:
:before styling:
content: "\e907";
Icon Class:
.q4i-circle
:before styling:
content: "\e670";
Icon Class:
.q4i-download
:before styling:
content: "\e600";
Icon Class:
.q4i-block-checkmark
:before styling:
content: "\e601";
Icon Class:
.q4i-block-downchevron
:before styling:
content: "\e602";
Icon Class:
.q4i-block-exit
:before styling:
content: "\e603";
Icon Class:
.q4i-block-leftchevron
:before styling:
content: "\e604";
Icon Class:
.q4i-block-minus
:before styling:
content: "\e605";
Icon Class:
.q4i-block-plus
:before styling:
content: "\e606";
Icon Class:
.q4i-block-rightchevron
:before styling:
content: "\e607";
Icon Class:
.q4i-block-upchevron
:before styling:
content: "\e671";
Icon Class:
.q4i-circle-leftchevron
:before styling:
content: "\e672";
Icon Class:
.q4i-circle-rightchevron
:before styling:
content: "\e673";
Icon Class:
.q4i-circle-upchevron
:before styling:
content: "\e674";
Icon Class:
.q4i-circle-downchevron
:before styling:
content: "\e608";
Icon Class:
.q4i-circle-alert
:before styling:
content: "\e609";
Icon Class:
.q4i-circle-calendar
:before styling:
content: "\e60a";
Icon Class:
.q4i-circle-chair
:before styling:
content: "\e60b";
Icon Class:
.q4i-circle-chat
:before styling:
content: "\e60c";
Icon Class:
.q4i-circle-doc
:before styling:
content: "\e60d";
Icon Class:
.q4i-circle-email
:before styling:
content: "\e60e";
Icon Class:
.q4i-circle-expert
:before styling:
content: "\e60f";
Icon Class:
.q4i-circle-facebook
:before styling:
content: "\e610";
Icon Class:
.q4i-circle-flickr
:before styling:
content: "\e611";
Icon Class:
.q4i-circle-googleplus
:before styling:
content: "\e612";
Icon Class:
.q4i-circle-html
:before styling:
content: "\e613";
Icon Class:
.q4i-circle-independant
:before styling:
content: "\e614";
Icon Class:
.q4i-circle-instagram
:before styling:
content: "\e615";
Icon Class:
.q4i-circle-link
:before styling:
content: "\e616";
Icon Class:
.q4i-circle-linkedIn
:before styling:
content: "\e617";
Icon Class:
.q4i-circle-menu
:before styling:
content: "\e618";
Icon Class:
.q4i-circle-minus
:before styling:
content: "\e619";
Icon Class:
.q4i-circle-phone
:before styling:
content: "\e61a";
Icon Class:
.q4i-circle-pinterest
:before styling:
content: "\e61b";
Icon Class:
.q4i-circle-plus
:before styling:
content: "\e61c";
Icon Class:
.q4i-circle-print
:before styling:
content: "\e61d";
Icon Class:
.q4i-circle-recording
:before styling:
content: "\e61e";
Icon Class:
.q4i-circle-rss
:before styling:
content: "\e61f";
Icon Class:
.q4i-circle-search
:before styling:
content: "\e620";
Icon Class:
.q4i-circle-share
:before styling:
content: "\e621";
Icon Class:
.q4i-circle-twitter
:before styling:
content: "\e622";
Icon Class:
.q4i-circle-video
:before styling:
content: "\e623";
Icon Class:
.q4i-circle-youtube
:before styling:
content: "\e624";
Icon Class:
.q4i-doc-calendar
:before styling:
content: "\e625";
Icon Class:
.q4i-doc-chart
:before styling:
content: "\e626";
Icon Class:
.q4i-doc-download
:before styling:
content: "\e627";
Icon Class:
.q4i-doc-graph
:before styling:
content: "\e628";
Icon Class:
.q4i-doc-html
:before styling:
content: "\e629";
Icon Class:
.q4i-doc-link
:before styling:
content: "\e62a";
Icon Class:
.q4i-doc-pdf
:before styling:
content: "\e62b";
Icon Class:
.q4i-doc-presentation
:before styling:
content: "\e62c";
Icon Class:
.q4i-doc-webcast
:before styling:
content: "\e62d";
Icon Class:
.q4i-doc-word
:before styling:
content: "\e62e";
Icon Class:
.q4i-doc-zip
:before styling:
content: "\e62f";
Icon Class:
.q4i-icon-alert
:before styling:
content: "\e908";
Icon Class:
.q4i-icon-apple
:before styling:
content: "\e909";
Icon Class:
.q4i-icon-outlook
:before styling:
content: "\e90a";
Icon Class:
.q4i-icon-google
:before styling:
content: "\e630";
Icon Class:
.q4i-icon-calendar
:before styling:
content: "\e631";
Icon Class:
.q4i-icon-chat
:before styling:
content: "\e632";
Icon Class:
.q4i-icon-doc
:before styling:
content: "\e633";
Icon Class:
.q4i-icon-email
:before styling:
content: "\e634";
Icon Class:
.q4i-icon-expert
:before styling:
content: "\e902";
Icon Class:
.q4i-icon-pdf
:before styling:
content: "\e638";
Icon Class:
.q4i-icon-html
:before styling:
content: "\e90c";
Icon Class:
.q4i-icon-presentation
:before styling:
content: "\e90d";
Icon Class:
.q4i-icon-download
:before styling:
content: "\e90b";
Icon Class:
.q4i-icon-graph
:before styling:
content: "\e635";
Icon Class:
.q4i-icon-facebook
:before styling:
content: "\e636";
Icon Class:
.q4i-icon-flickr
:before styling:
content: "\e637";
Icon Class:
.q4i-icon-googleplus
:before styling:
content: "\e639";
Icon Class:
.q4i-icon-independant
:before styling:
content: "\e63a";
Icon Class:
.q4i-icon-instagram
:before styling:
content: "\e63b";
Icon Class:
.q4i-icon-link
:before styling:
content: "\e63c";
Icon Class:
.q4i-icon-linkedIn
:before styling:
content: "\e63d";
Icon Class:
.q4i-icon-member
:before styling:
content: "\e63e";
Icon Class:
.q4i-icon-menu
:before styling:
content: "\e63f";
Icon Class:
.q4i-icon-phone
:before styling:
content: "\e640";
Icon Class:
.q4i-icon-pinterest
:before styling:
content: "\e641";
Icon Class:
.q4i-icon-print
:before styling:
content: "\e642";
Icon Class:
.q4i-icon-rss
:before styling:
content: "\e643";
Icon Class:
.q4i-icon-search
:before styling:
content: "\e644";
Icon Class:
.q4i-icon-share
:before styling:
content: "\e645";
Icon Class:
.q4i-icon-twitter
:before styling:
content: "\e646";
Icon Class:
.q4i-icon-video
:before styling:
content: "\e647";
Icon Class:
.q4i-icon-webcast
:before styling:
content: "\e648";
Icon Class:
.q4i-icon-youtube
:before styling:
content: "\e649";
Icon Class:
.q4i-rounded-checkmark
:before styling:
content: "\e64b";
Icon Class:
.q4i-rounded-exit
:before styling:
content: "\e64d";
Icon Class:
.q4i-rounded-minus
:before styling:
content: "\e64e";
Icon Class:
.q4i-rounded-plus
:before styling:
content: "\e64a";
Icon Class:
.q4i-rounded-downchevon
:before styling:
content: "\e650";
Icon Class:
.q4i-rounded-upchevon
:before styling:
content: "\e64c";
Icon Class:
.q4i-rounded-leftchevon
:before styling:
content: "\e64f";
Icon Class:
.q4i-rounded-rightchevon
:before styling:
content: "\e903";
Icon Class:
.q4i-rounded-downclaret
:before styling:
content: "\e904";
Icon Class:
.q4i-rounded-upclaret
:before styling:
content: "\e905";
Icon Class:
.q4i-rounded-leftclaret
:before styling:
content: "\e906";
Icon Class:
.q4i-rounded-rightclaret
:before styling:
content: "\e651";
Icon Class:
.q4i-square-calendar
:before styling:
content: "\e652";
Icon Class:
.q4i-square-chat
:before styling:
content: "\e653";
Icon Class:
.q4i-square-doc
:before styling:
content: "\e654";
Icon Class:
.q4i-square-email
:before styling:
content: "\e655";
Icon Class:
.q4i-square-facebook
:before styling:
content: "\e656";
Icon Class:
.q4i-square-flickr
:before styling:
content: "\e657";
Icon Class:
.q4i-square-googleplus
:before styling:
content: "\e658";
Icon Class:
.q4i-square-html
:before styling:
content: "\e659";
Icon Class:
.q4i-square-instagram
:before styling:
content: "\e65a";
Icon Class:
.q4i-square-link
:before styling:
content: "\e65b";
Icon Class:
.q4i-square-linkedin
:before styling:
content: "\e65c";
Icon Class:
.q4i-square-menu
:before styling:
content: "\e65d";
Icon Class:
.q4i-square-microphone
:before styling:
content: "\e65e";
Icon Class:
.q4i-square-notification
:before styling:
content: "\e65f";
Icon Class:
.q4i-square-phone
:before styling:
content: "\e660";
Icon Class:
.q4i-square-pinterest
:before styling:
content: "\e661";
Icon Class:
.q4i-square-print
:before styling:
content: "\e662";
Icon Class:
.q4i-square-rss
:before styling:
content: "\e663";
Icon Class:
.q4i-square-search
:before styling:
content: "\e664";
Icon Class:
.q4i-square-share
:before styling:
content: "\e665";
Icon Class:
.q4i-square-twitter
:before styling:
content: "\e666";
Icon Class:
.q4i-square-video
:before styling:
content: "\e667";
Icon Class:
.q4i-square-youtube
:before styling:
content: "\e668";
Icon Class:
.q4i-txt-doc
:before styling:
content: "\e669";
Icon Class:
.q4i-txt-flv
:before styling:
content: "\e66a";
Icon Class:
.q4i-txt-html
:before styling:
content: "\e66b";
Icon Class:
.q4i-txt-pdf
:before styling:
content: "\e66c";
Icon Class:
.q4i-txt-rtf
:before styling:
content: "\e66d";
Icon Class:
.q4i-txt-xbrl
:before styling:
content: "\e66e";
Icon Class:
.q4i-txt-xls
:before styling:
content: "\e66f";
Icon Class:
.q4i-txt-zip