This HTML code is located in the Tag: Style_Guide_en
It can be viewed by entering "cmos.ca/site/style_guide" in your browser
Assembled by Denis Bourque
---------------------------
Texts
These are the Default text styles (font, colour set by In1Touch)---------------------------
Headers and Section Titles
1 - Default Header Level 1 (colour, style, font set by In1Touch) [ h1 ]
2 - Default Header Level 2 (colour, style, font set by In1Touch) [ h2 ]
3 - Default Header Level 3 (colour, style, font set by In1Touch) [ h3 ]
4 - Default Header Level 4 (colour, style, font set by In1Touch) [ h4 ]
5 - Banner Header Level 1 (created by In1Touch) 6 - Banner Header Level 2 (created by In1Touch)
---------------------------
Layouts
Using Alternate Header Level 1 text text text
Using Alternate Header level 2
text text text (created by In1Touch)
text text text
text text text
----------------------
Lists
Bulletted list
- Bullett 1
- Bullett 2
- Bullett 3
Numbered list
- Item 1
- Item 2
- Item 3
---------------------------
Tables
Note that without using the CSS protocol described/shown further down, Tables will not adjust dynamically to the platform being used. The user viewing the Table will have to scroll horizontally left-right to see the full content. This is sometimes the only way to present a Table. At other times, usually when the HTML "Table-like" layout was used to create side-by-side entries, it is best to use the CSS grid protocol to have the side-by-side entries appear in a single column on smaller devices. For example, the CMOS home Page (cmos.ca) has entries on the left and right side on wide screens, but these are shown one above the other on narrower screens (e.g., smartphone). [In fact, the image is removed on the smartphone). Similarly, the main "Menu" is displayed differently on smaller devices.
The first layout described here is a Tradiational Table. The second layout shows how to program using the CSS grid protocol to achieve various columnar layouts.
Creating a traditional Table (example is a 4-column Table with Title)
Note: this Table setup is not Smartphone- nor Tablet-friendly. It does not automatically adjust its size to fit the smaller dimensions. The user will need to scroll left-right
4-column Table Title (created by Farida Denghan)
|
-------------------------
Working with multi-platform dynamically adjusting screens
Our web site has the capability of dynamically adjusting its presentation to fit the platform upon which it is being seen, specifically Mobiles, Tablets, Desktops and Large desktops.
However, it has to be programmed for this using the CSS Grid structure protocol.
The principle behind the Grid structure is that the page width is divided into columns which appear side by side if the window is wide enough, but stacked one above the other if the window gets narrower. So something that would appear side-by-side on a desktop, e.g., "A" next to "B", would appear stacked on a smartphone, e.g., "A" over "B". You define how many of 12 columns are to be considered "grouped" into a set for "A" and similarly for "B". If the window is wide enough for them to be side-by-side, they will appear that way; if not, they will be stacked. This can be seen on the CMOS.ca homepage where items appear side-by side on wide screens but aboeve one another on smaller screens. (in fact the "Congress image" disappears entirely on the smallest screen. OlaTech has set a standard for the widths, but this can be changed.
Example 1 - No CSS columns defined.
This is an example which is contained (i.e., "container" in HTML code) which does not specify any col-*, col-sm-*, col-md-* or sm-lg-*, where the * states how many columns, out of 12, are to be used to display this text on extra small (xs- i.e., phones, less than 768pixels width), small (sm - i.e, tablets, greater than 768 pixels width), medium (md -i.e., small desktops, greater than 970 pixels) or large (lg - i.e., full witdh desktop, greater than 1200 pixels) platforms, respectively. If no "col" is specified in the HTML code , then all 12 columns (i.e., 100% of the width of the platform which could also be the screen window's witdh on a desktop, i.e., pixel width size of the window) are used (note the heading as well).
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width meets the criteria noted above.
Example 2 - Defining the use of the left 50% of the screen (6 columns) on large desktop
This is an example which is contained (i.e., "container" in HTML code) which specifies that the left 50% (or 6 out of 12 columns) of the Large Desktops (greater than 1200 pixels wide) will b used for this text, but does not specify any settings for col-*, col-sm-* or col-md-*, where the * states how many columns, out of 12, to be used to display this text on extra small (xs- i.e., phones, less than 768pixels width), small (sm - i.e, tablets, greater than 768 pixels width) and medium (md -i.e., small desktops, greater than 970 pixels) platforms, respectively. Since no "col" is specified in the HTML code for these platforms, then all 12 columns (i.e., 100% of the width of the platform will be used (note the heading as well).
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width changes from Large Desktop (greater than 1200 pixels) to smaller widths.
Example 3a - Defining the use of the left and right 50% of the screen (6 columns each) on large desktop
This is an example which is contained (i.e., "container" in HTML code) which specifies that the left 50% (or 6 out of 12 columns) of the Large Desktops (greater than 1200 pixels wide) will be used for this text, but does not specify any settings for col-*, col-sm-* or col-md-*, where the * states how many columns, out of 12, to be used to display this text on extra small (xs- i.e., phones, less than 768pixels width), small (sm - i.e, tablets, greater than 768 pixels width) and medium (md -i.e., small desktops, greater than 970 pixels) platforms, respectively. Since no "col" is specified in the HTML code for these platforms, then all 12 columns (i.e., full width or 100% of the width of these platforms will be used for this section (note the heading as well). This implies that this 3a example will have to be stacked above the 3b example in xs, sm and md widths. You'll note that the HTML Code introduces a "row" setting to indicate that the 2 items 3a and 3b are on a same row.
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width changes from Large Desktop (greater than 1200 pixels) to smaller widths.
Example 3b - Defining the use of the left and right 50% of the screen (6 columns each) on large desktop
This is an example which is contained (i.e., "container" in HTML code) which specifies that the right 50% (or 6 out of 12 columns) of the Large Desktops (greater than 1200 pixels wide) will be used for this text, but does not specify any settings for col-*, col-sm-* or col-md-*, where the * states how many columns, out of 12, to be used to display this text on extra small (xs- i.e., phones, less than 768pixels width), small (sm - i.e, tablets, greater than 768 pixels width) and medium (md -i.e., small desktops, greater than 970 pixels) platforms, respectively. Since no "col" is specified in the HTML code for these platforms, then all 12 columns (i.e., full width or 100% of the width of these platform will be used for this section (note the heading as well). This implies that this 3b example will have to be stacked below the 3a example in xs, sm and md widths. You'll note that the HTML Code introduces a "row" setting to indicate that the 2 items 3a and 3b are on a same row.
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width changes from Large Desktop (greater than 1200 pixels) to smaller widths.
Example 4a - Defining the use of the left and right 50% of the screen (6 columns each) on large and medium desktops
This is an example which is contained (i.e., "container" in HTML code) which specifies that the left 50% (or 6 out of 12 columns) of the Large Desktops (greater than 1200 pixels wide) and medium desktops (i.e., greater than 970 pixelswill be used for this text, but does not specify any settings for col-* or col-sm-*, where the * states how many columns, out of 12, to be used to display this text on extra small (xs- i.e., phones, less than 768pixels width) and small (sm - i.e, tablets, greater than 768 pixels width) platforms, respectively. Since no "col" is specified in the HTML code for these platforms, then all 12 columns (i.e., 100% of the width of these platform will be used for this section (note the heading as well). This implies that this 4a example will necessarily be stacked above the 4b example in xs and sm widths. You'll note that the HTML Code introduces a "row" setting to indicate that the 2 items 3a and 3b are on a same row.
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width changes from Large Desktop (greater than 1200 pixels) through medium widths to smaller widths.
Example 4b - Defining the use of the left and right 50% of the screen (6 columns each) on large desktop and medium desktops
This is an example which is contained (i.e., "container" in HTML code) which specifies that the left 50% (or 6 out of 12 columns) of the Large Desktops (greater than 1200 pixels wide) and medium desktops (i.e., greater than 970 pixels will be used for this text, but does not specify any settings for col-* or col-sm-*, where the * states how many columns, out of 12, to be used to display this text on extra small (xs- i.e., phones, less than 768pixels width) and small (sm - i.e, tablets, greater than 768 pixels width) platforms, respectively. Since no "col" is specified in the HTML code for these platforms, then all 12 columns (i.e., 100% of the width of these platform will be used for this section (note the heading as well). This implies that this 4b example will necessarily be stacked below the 4a example in xs and sm widths. You'll note that the HTML Code introduces a "row" setting to indicate that the 2 items 4a and 4b are on a same row.
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width changes from Large Desktop (greater than 1200 pixels) through medium widths to smaller widths.
Example 5a - Defining the use of the left and right 50% of the screen (6 columns each) on large, medium and small platforms
This is an example which is contained (i.e., "container" in HTML code) which specifies that the left 50% (or 6 out of 12 columns) of the Large Desktops (greater than 1200 pixels wide), medium desktops (i.e., greater than 970 pixels) and small (sm - i.e, tablets, greater than 768 pixels width) will be used for this text, but does not specify any settings for col-*, where the * states how many columns, out of 12, to be used to display this text on extra small (xs- i.e., phones, less than 768pixels width) platforms, respectively. Since no "col" is specified in the HTML code for these platforms, then all 12 columns (i.e., 100% of the width of these platform will be used for this section (note the heading as well). This implies that this 5a example will necessarily be stacked above the 5b example in xs widths. You'll note that the HTML Code introduces a "row" setting to indicate that the 2 items 5a and 5b are on a same row.
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width changes from Large Desktop (greater than 1200 pixels) through medium widths to smaller widths.
Example 5b - Defining the use of the left and right 50% of the screen (6 columns each) on large, medium and small platforms
This is an example which is contained (i.e., "container" in HTML code) which specifies that the right 50% (or 6 out of 12 columns) of the Large Desktops (greater than 1200 pixels wide), medium desktops (i.e., greater than 970 pixels) and small (sm - i.e, tablets, greater than 768 pixels width) will be used for this text, but does not specify any settings for col-*, where the * states how many columns, out of 12, to be used to display this text on extra small (xs- i.e., phones, less than 768 pixels width) platforms, respectively. Since no "col" is specified in the HTML code for these last platforms, then all 12 columns (i.e., 100% of the width of these platform will be used for this section (note the heading as well). This implies that this 5b example will necessarily be stacked below the 5a example in xs widths. You'll note that the HTML Code introduces a "row" setting to indicate that the 2 items 5a and 5b are on a same row.
If you are working on a desktop, drag the right-hand border of the browzer window to the left and right to see what happens when the horizontal window width changes from Large Desktop (greater than 1200 pixels) through medium widths to smaller widths.
2-Column Template
To make things easier, here is a template for 2-column display on the website.
Heading level 1 left side
Insert your left-column content here.
Heading Level 1 right side
Insert your right column content here.
-------------------------
-------------------------