Style Template - Full-Width Page
This is a full-width page, meaning the "Full-Width Page" is enabled and there are no default margins on the left and right. This allows you to use full-width containers to span items all the way across the page. To include some content that is within the standard-width margins, just wrap that content in a div with a class of "std-width-container", just like this paragraph. I am adding to the content of this page.
Spend some time styling the basic HTML elements on this page before getting too deep into the weeds. Styling for most other content elements is going to be based on these styles. The subway's no way for a good man to go down. Rich man, he can't ride, and the hobo can't drown.
Example Usages of the Primary Layout Blocks
This section shows examples of how to use the Primary Layout Blocks:
- full-width-ctnr (Full-Width Container)
- std-width-ctnr (Standard-Width Container)
- two-col-ctnr (Two-Column Flex Container)
- three-col-ctnr (Three-Column Flex Container)
- wide-col-ctnr (Wide-Column Flex Container)
- narrow-col-ctnr (Narrow-Column Flex Container)
By default, the full-width-ctnr and std-width-ctnr classes do not apply display:flex. In the Common Add-On Styles in main_tiny.css, there are some classes that can be added to containers to add basic display:flex properties, including flex-between (display flex with wrap and space between items) and flex-stretch (align items with stretch).
The following examples use additional classes and styles to customize the Primary Layout Blocks. For example, by default, the column blocks are defined to have gutters between them by setting reduced flex widths. In these examples, the flex widths are overridden with values that leave no gutters.
While any of the default Primary Layout Blocks can be modified for any particular site, the two-column and three-column blocks are designed to create columns of equal widths (with or without gutters), but the wide and narrow column blocks are intended to be adjusted however desired for any site design.
IMPORTANT! The group of extra style declarations in main_tiny.css that are used here are intended to be used only for these examples and should be removed when a new site is developed.
Mobile Note
Note that these containers begin to wrap into a single column at around 768px by default.
Two Equal Columns Customized
Super mechanics
Quantum mechanics is the branch of physics relating to the very small.
It results in what may appear to be some very strange conclusions about the physical world. At the scale of atoms and electrons, many of the equations of classical mechanics, which describe how things move at everyday sizes and speeds, cease to be useful. In classical mechanics, objects exist in a specific place at a specific time. However, in quantum mechanics, objects instead exist in a haze of probability; they have a certain chance of being at point A, another chance of being at point B, and so on.
Nanophysics
The nanophysics is halfway between the size scales of quantum mechanics and macroscopic physics governed by the laws of Newton and Einstein. Interupting this content with a random sentance. The correct definition of nanophysics is the physics of structures and artifacts with dimensions in the nanometer range or of phenomena occurring in nanoseconds [1].
Three Equal Columns Customized
Quantum mechanics
Quantum mechanics is the branch of physics relating to the very small. It results in what may appear to be some very strange conclusions about the physical world. At the scale of atoms and electrons, many of the equations of classical mechanics, which describe how things move at everyday sizes and speeds, cease to be useful. In classical mechanics, objects exist in a specific place at a specific time.
Nanophysics
The nanophysics is halfway between the size scales of quantum mechanics and macroscopic physics governed by the laws of Newton and Einstein. The correct definition of nanophysics is the physics of structures and artifacts with dimensions in the nanometer range or of phenomena occurring in nanoseconds [1].
Fritzophysics
Fritzophysics is the study of cheeseburgers. A cheeseburger is an American-style entree consisting of a patty of grilled, fried, or seared ground beef topped by a slice of cheese, wrapped with two halves of a bun. Common cheeses include American, Cheddar, and Pepper Jack. Buns are generally of the White, Potatoe, or Sesame variety. The best cheeseburger has two beef patties, two slices of cheese, and is topped with mayonaisse, onions, and pepper below the top bun.
Wide & Narrow Columns Customized
Quantum mechanics
Quantum mechanics is the branch of physics relating to the very small.
It results in what may appear to be some very strange conclusions about the physical world. At the scale of atoms and electrons, many of the equations of classical mechanics, which describe how things move at everyday sizes and speeds, cease to be useful. In classical mechanics, objects exist in a specific place at a specific time. However, in quantum mechanics, objects instead exist in a haze of probability; they have a certain chance of being at point A, another chance of being at point B, and so on.
Nanophysics
The nanophysics is halfway between the size scales of quantum mechanics and macroscopic physics governed by the laws of Newton and Einstein. The correct definition of nanophysics is the physics of structures and artifacts with dimensions in the nanometer range or of phenomena occurring in nanoseconds [1].
So, you see, there is a lot you can do by using the available containers and add-on classes, especially when you add your own styles on top of them!