Relative width CSS classes for theme layouts
To assist with making the elements of a page responsive to various widths, relative width CSS classes have been added to the theme layouts. These classes are marker classes only. There are no styles defined for these classes by default. They are there on the containers, rows and columns, of the layouts so we can define our own styles associated with the classes as needed to make the page elements responsive to various widths.
There are two types of relative width classes, and one of each is used on each layout container.
- Semantic type, one of:
- wpthemeThin
- wpthemeNarrow
- wpthemeMedium
- wpthemeWide
- wpthemeFull
These types allow for up to five variations in width and are described using common width words, such as narrow and wide.
- Grid type, one of:
- wpthemeCol1of12
- wpthemeCol2of12
- wpthemeCol1of5
- wpthemeCol3of12
- wpthemeCol4of12
- wpthemeCol2of5
- wpthemeCol5of12
- wpthemeCol6of12
- wpthemeCol7of12
- wpthemeCol3of5
- wpthemeCol8of12
- wpthemeCol9of12
- wpthemeCol4of5
- wpthemeCol10of12
- wpthemeCol11of12
- wpthemeCol5of5
- wpthemeCol12of12
These types allow for up to 16 variations in width and are described using a numbering system of nofn width units. At first glance it looks like a simple numbering system where a layout with five columns would use wpthemeCol1of5, wpthemeCol2of5, wpthemeCol3of5, wpthemeCol4of5, and wpthemeCol5of5 to number the columns. However, the best way to look at this system is not as the number of the column, but rather as the number of width units the column takes up on the page. So, wpthemeCol2of5 means the column takes up two of five width units of the page, or 2/5ths of the width of the page, and wpthemeCol8of12 means the column takes up 8 of 12 width units of the page, or 3/4ths of the width of the page. So, a layout with five columns of equal width would use wpthemeCol1of5 on all of the columns.
The two class types map to each other in the following way:
Width of the page Semantic Type Grid Type 1/12th wpthemeThin wpthemeCol1of12 2/12ths (1/6th) wpthemeThin wpthemeCol2of12 1/5th wpthemeThin wpthemeCol1of5 3/12ths (1/4th) wpthemeNarrow wpthemeCol3of12 4/12ths (1/3rd) wpthemeNarrow wpthemeCol4of12 2/5ths wpthemeNarrow wpthemeCol2of5 5/12ths wpthemeMedium wpthemeCol5of12 6/12ths (1/2) wpthemeMedium wpthemeCol6of12 7/12ths wpthemeMedium wpthemeCol7of12 3/5ths wpthemeMedium wpthemeCol3of5 8/12ths (2/3rds) wpthemeMedium wpthemeCol8of12 9/12ths (3/4ths) wpthemeWide wpthemeCol9of12 4/5ths wpthemeWide wpthemeCol4of5 10/12ths (5/6ths) wpthemeWide wpthemeCol10of12 11/12ths wpthemeWide wpthemeCol11of12 5/5ths (1) wpthemeFull wpthemeCol5of5 12/12ths (1) wpthemeFull wpthemeCol12of12 The Semantic types maps to the following page width amount:
Semantic type Amount of the page width wpthemeThin 1/12th to 1/5th wpthemeNarrow 1/4th to 2/5ths wpthemeMedium 5/12ths to 2/3rds wpthemeWide 3/4ths to 11/12ths wpthemeFull all
- Create our own layout
When creating our own layout.html files, it is important to apply one semantic type and one grid type relative width class to each container. Such as wpthemeMedium and wpthemeCol6of12. Applying both ensures that those creating portlets and other page elements do not have to define styles for both types. Along with neither type and both types, they also have the choice to define styles for just one of the types, depending on their needs of granularity.
- Create portlets and page elements
When creating portlets and the page elements within them, we can now define our own style overrides as needed. Use these relative width CSS classes to make the page elements responsive to various widths.
Parent Responsive Web Design