Article UI
The user interface is built on a flexible grid allowing one to 12 columns although one to three columns is most common. The mean page width is 1024 px and the main reading block text is 768 px (with inline images extending to preset max widths of 768, 808, 1024, and full width). Elements can extend full width anywhere on the page depending on circumstance.
The Hub Page:
A landing page of sorts, the Hub Page is an extension of a standard archives page taylored for a specific topic. It is identical to the archives page with the exception of three elements at the top of the page:
- A title and synopsis
- Links to top resources
- The “Featured” title over the content grid
Handstands
Take care of your wrists, learn a plange, or something about balance. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Ullamco laboris nisi ut aliquip ex consequat.
Featured
Spinal Flexibility Routine
Stretches for back bending and forward bending flexibility
Spinal Flexibility Routine
Stretches for back bending and forward bending flexibility
Spinal Flexibility Routine
Stretches for back bending and forward bending flexibility
Spinal Flexibility Routine
Stretches for back bending and forward bending flexibility
Spinal Flexibility Routine
Stretches for back bending and forward bending flexibility
Spinal Flexibility Routine
Stretches for back bending and forward bending flexibility
The Article Page
Individual articles take a continuously responsive layout on a single column. Elements in the main title area over the fullscreen image wrap up.
Twenty Advanced
Push-up h1 Variations
Here is a possible sub-head that can be long, the idea is that it wraps up.
Some people hear “advanced push-up variations” and think of balancing a beer on their head while banging out 50 quick ones at a party. And sure, that sounds like a fun time as far as it goes.
But if your push-up game is already strong, chances are you could use some new exercises to keep developing your pressing strength. (If your push-ups could use some work, go check out our push-up tutorial!) The variations we’ll show you in this article aren’t just fancy party tricks (though they’ll definitely help you in that department!). They’re some of my favorite exercises for building advanced pressing strength.
Our second level h2 head
The variations we’ll show you in this article aren’t just fancy party tricks (though they’ll definitely help you in that department!). They’re some of my favorite exercises for building advanced pressing strength.
Top 20 Advanced Push-Up h3 Variations
There are countless “Push-Up Variations” tutorials out there on the interwebz, each one trying to outdo the one before with the number of variations included. Seriously, I recently saw a “75 Push-Up Variations” video on Facebook, followed a couple of days later by a “101 Push-Up Variations” video from another company–literally nobody needs that many push-up variations.
So, that’s not the purpose of this article. At all.
The blockquote variations we’ll show you in this article aren’t just fancy party tricks. They’re some of my favorite exercises for building advanced pressing strength.
There are countless “Push-Up Variations” tutorials out there on the interwebz, each one trying to outdo the one before with the number of variations included. Seriously, I recently saw a “75 Push-Up Variations” video on Facebook, followed a couple of days later by a “101 Push-Up Variations” video from another company–literally nobody needs that many push-up variations.
So, that’s not the purpose of this article. At all.
...
The Logomark
Minimum Space Requirements
Most applications will require attention be paid to allow for adequate spacing around the mark. As a rule, leave enough space equal to half the height of the wreath and/or mark. Use less sapce with discretion.
Although there is no straight rule for maximum space requirements, if the mark becomes disconnected from the content it supports, it may need to be moved closer in size to that content.
Size Requirements
The mark should be placed with finesse, allowing for legibility, but letting the mark communicate without appearing brash or too large in comparison to surrounding elements.
Maximum Sizing (Variable)
With placement, if the mark appears overbearing in size, it probably is. Applied to a document with straight body text, a maximum size for the wreath could be, for instance, no larger than the height of three lines of that body text. Next to a large title, a serviceable size may be about the same size as the title.
There are no absolute set sizes for this, but as a rule, too small is better than too large. If the thin black strokes of the mark start to break up and lose consistent thickness, the mark is placed too small.
Minimum Height for Print: 15pt
Minimum Dimensions for Web: 63 × 36 pixels
Typography
The type used for all GMB communications where possible are DIN Next and DIN next Condensed.
DIN Next — Light
DIN Next — Regular
DIN Next — Medium
DIN Next — Bold
DIN Next Condensed — Ultralight
DIN Next Condensed — Light
DIN Mono — Regular
For loading performance, fonts should have dynamic or standard font subsetting applied. Subsetting reduces the characters a font contains, resulting in a smaller font and faster download. Dynamic subsetting loads only the characters needed for a given page, meanwhile loading the full fonts in the background. Once the full fonts are available, subsequent page visits load those instead from local storage.*
Fallback system fonts [yet to be defined] should be set to complementary sizes that match visually the final look of the DIN Next and DIN Next Condensed fonts.
* Subsetting is not employed on this page.
Color
Following are the principal colors used for most elements. Strategic adjustments to brightness is encouraged to produce contrast where needed such as when darkening thin elements displayed with lighter colors. The green should be used sparingly and in most cases, set as the single/lone colored element within the viewport at any given moment. The red should only ever be used in emergency scenarios such as an alert of an account suspension or a confirmation for deleting account data.
Iconography
The UI employs functional iconography from the FontAwesome collection https://fontawesome.io/ as SVG graphics. Icons are displayed through either linked image files or coded inline as markup depending on the requirements for programatic manipulation (changes in color or size).
Buttons for Action
Buttons should only ever be used for action, meaning things like the transmission of data, execution of a calculation, or the start of a process. Buttons should not be used for simple navigation — use text links instead. Utilizing buttons for simple navigation removes the importance of the button as a more significant tool for activity.
The vast majority of buttons, with or without icons, should be displayed monochrome. Colored (non-monochrome) buttons should be used sparingly and in most cases, set as the single/lone colored button within the viewport at any given moment. Red buttons should only ever be used in emergency scenarios such as an alert of an account suspension or a confirmation for deleting account data.
If direction is implied with an icon appearing within a button, that direction should be lead by the icon: if pointing right, the icon should be set on the right. Likewise a left pointing arrow should be set to the left of its label. Other non-directional icons should be set on the left, preempting the button’s label.
A note on the typography: the white labels of solid color buttons are set with a weight of 400. Ghosted buttons with dark text over a white background are set with a weight of 500.
Form Elements
Form elements are of standard input style with rounded corners, set with surrounding margin and persistent labels.
Modal Dialogs
Included here are elements for displaying alerts and dialogs. Each are designed for persistent placement above/over the document, requiring the user to dismiss or close them.
The Reading Column
This column is set in a .substrate-auto container which has a max-width of 768 pixels. On smaller displays this container receives incremental margin until it’s nearly touching the edges of the viewport. The reading column’s principal typography is variably set with Textblock at a maximum font size of 2.2em/1.3 and a minimum of 1.8em/1.4.
Setting Bulleted lists
Lists can take one of three forms: bulleted (unordered), numbered (ordered), and descriptioned.
- Bulleted (unordered ) lists
- are set flush left
- so the bullets are on the left margin.
- Numbered (ordered ) lists
- are also set flush left
- with numbers on the left margin.
- Descriptioned lists — lead by bold headings, are an altogether different type of list.
- Often heavily descriptive, the trailing text of descriptioned lists often contain multiple lines of information.
- These lists offer more flexibility with style and formatting.
Tabular Data
Tables should support mobile operation, meaning all data must be accessible and viewable on smaller screens. Tabular data views can take two forms on mobile:
- Cards (demonstration TBD) — Row data is listed, each separately with data labeled with their corresponding column headers.
- Horizontally Scrollable (demonstration TBD) — The table is visually smaller but allowed to scroll horizontally.
In either case, tables set for mobile must remain touch friendly — kept operational and in the case of horizontal scrolling, sortable through tap gestures.
| Day | Meal | “Food” | Amount |
|---|---|---|---|
| Monday | Breakfast | Muscle Milk | 1 tbsp |
| Tuesday | Lunch | Muscle Milk | 2 quarts |
| Wednesday | Dinner | Muscle Milk | 1 squeeze |
| Thursday | Nightcap | Muscle Milk | 5 Gallons |
| Friday | Breakfast | Muscle Milk | 1 tsp |
| Saturday | Lunch | Muscle Milk | 3 tsp |
| Sunday | Dinner | Muscle Milk | 2 Bags |
Reading Block & Image Containers
This text content is set in a .substrate-auto container which has a max-width of 768 pixels. On smaller displays this container receives incremental margin until it’s nearly touching the edges of the viewport.
Images placed within this container will render to the full width of the text block.
There are three other containers meant for placing images in the text block or constructing more advanced layouts outside of the bounds of the 768px wide textblock.
.container-808 — meant for images appearing inline in the text block. It has a max-width of 840 and becomes full width to viewports under 840.
.container-1024 — meant for either large images appearing inline to the text block or for more advanced layouts. It has a max-width of 1024 (the main content width) and becomes full width to viewports under 1024.
.container-full — Like the 1024 container, this can be used for images or layouts but it is always full width to the viewport.
Typesetting Considerations
Following is a mix of typesetting styles and micro-visual adjustments that can be made to enhance the visual appearance of the typography.
Use of Italic and Roman Type — Use italics for book titles, film and play titles, works of art, names of periodicals, names of ships, stage directions in plays, words and short phrases in foreign languages, mathematical theorems, and certain abbreviations which are derived from Latin. Use roman in quotation marks for titles of chapters in books, articles in periodicals, short poems, and short extracts from text.
Parentheses & Brackets in Relation to Surrounding Text — Parentheses and brackets, both [straight] and {curly}, ideally should be set roman (upright ) even in the context of italic text. Although this is no small feat in HTML, to avoid unwanted collisions between the longer reaching glyphs such as l) and f), additional spacing is required through the use of invisible “hair space” characters ( ) resulting in l ) and f ).
Quotation Marks in Relation to Surrounding Text — Quotation marks should be set in the same style (roman or italic) as the surrounding text, not the text they enclose.
Punctuation & Space — One Space or Two? — One space, never two, follows all punctuation.
Punctuation With URLs & Email Addresses — Text with inline URLs should be punctuated normally. Readers should assume any punctuation following a URL belongs to the sentence. URLs should be linked to the source they define, ignoring the surrounding punctuation.
Relative Placement of Quotations and Punctuation — Periods and commas precede both single and double closing quotation marks. Colons and semicolons follow closing quotation marks. Question marks and exclamation points follow closing quotation marks unless they belong within the quoted matter.
What can be more interesting than those who constitute “the passing crowd”?
But I boldly called out, “Woe unto this city!”
“What’s the rush?” she wondered.
Periods in Relation to Parentheses and Brackets — When an entire complete sentence is enclosed in parentheses or brackets, the period belongs inside the closing parentheses or bracket. With an enclosed complete sentence appearing within another complete sentence, the period belongs to the outside sentence. Avoid closing more than one complete sentence within another sentence.
The Serial Comma — For clarity, a comma preceding and in a list of three or more items. Consider the following passage lacking a serial comma:
To my parents, Wilford Brimley and the Cookie Monster.
Adding the serial comma provides clarity:
To my parents, Wilford Brimley, and the Cookie Monster.
Space After Colon — In normal running text, only ever use one space after a colon. In citations or ratios such as 23:12, no space follows the colon.
Lowercase or Capital Letter After Colon — Within a sentence, the first word following a colon is lowercased unless that word is a proper name. When a colon introduces two or more sentences, the first word following the colon is capitalized.
Question Marks in Relation to Surrounding Text & Punctuation — A question mark should be placed inside of enclosing quotations or parentheses when the question is part of the enclosed matter.
Bob asked, “Is dinner ready?”
Why did the log lady say “The owls are not what they seem”?
Parentheses within Parentheses — For clarity, it's better to use square brackets within parentheses. If a second level is needed, curly brackets can be used.
Parentheses with Other Punctuation — Closing parentheses should never be preceded by a comma, semicolon, or colon. Question marks, exclamation points, periods, and closing quotation marks precede closing parentheses if they belong to the enclosed matter, otherwise they follow if they belong to the enclosing sentence. Multiple parentheses can appear back to back with a space between if they contain unrelated matter. Unrelated matter can also be enclosed in a single set of parentheses, separated by a semicolon.
“Smart” Quotes & Apostrophes — Proper quotaion marks usually curve in toward the “matter they enclose” or in the case of the apostrophe, to the left. So called dumb quotes are the incorrect use of prime ('o') and double prime ("o") marks as single and double, open and closing quotation marks. These characters appear when software doesn’t automatically convert the straight forms that are typed on the keyboard to proper curly single (‘o’) or double (“o”) quotation forms. Dumb quotes were invented to make typing on typewriters faster by having a single key for open and closing quotes and ostensibly primes (prime marks are correctly slanted, not straight up and down ). The end result is a compromise best not left unfixed.
Apostrophes Relative to Other Punctuation — Apostrophes are considered part of the word they are connected to. If a word ends in an apostrophe, no punctuation should separate it from its word, so as not to be confused for a single closed quotation.
Add little or no space between strings of initials — as with names such as E.B. White which requires very little or no space after the intermediary period. A normal word space follows the last period in the string.
Letterspace all strings of capitals and small caps, and all long strings of digits — for reasons of legibility, all strings of capital forms that are three or more characters long should have additional spacing applied. DIN Next should be spaced 0.06 –.08em for type under 13px and 0.03em for larger type. The quality of space is more important than a fixed number. Stings like LA or AVA require little or no space whereas sequences such as NN or HIH require a lot more.
Don’t letterspace the lowercase without a reason — In most cases it is not advisable to add additional space to lowercase strings. Only in extreme cases of very small text (under 10px) should one consider applying additional space to lowercase strings for reasons of legibility.
Set all lines of paragraphs flush left — Meaning no indenting. The first and subsequent lines of all paragraphs on a page or section should be set flush left.
Add extra lead (vertical space) before and after block quotations — As a device for visual differentiation, it is advisable to set extra space above and below block quotations that are set inline to text.
This block quote’s top and bottom margins are set to 1.66em, whereas the standard paragraphs have 1.33em margins.
Change one parameter at a time — If your text is set in 13px roman, it is not necessary to set the headings or titles at 24px bold italic. If you want bold, begin by trying the bold weight of the text face, set u&lc (upper and lowercase), in the same size as the text. Other things to try might be u&lc italic or letterspaced capitals in the same weight and size of the text. If you want larger titles, first try a larger size of the text weight, u&lc. In most cases as size increases, weight should decrease.
Don’t clutter the foreground — When setting words bold, leave adjacent punctuation normal/roman (not bold) to emphasize the words and not the punctuation. But punctuation appearing in the middle of an entire block of bold text should be set bold.
... conventionally referred to as the Swiss Alps, Schweizer Alpen, Alpes suisses, Alpi svizzere, or Alps svizras ...
If on the other hand those same words are set italic, it will look better to also italicize the punctuation.
... conventionally referred to as the Swiss Alps, Schweizer Alpen, Alpes suisses, Alpi svizzere, or Alps svizras ...
Don’t permit titles to oppress the text — If the title looks to big, it probably is. If you want a large title, it is advisable to set it u&lc (upper and lowercase) in a lighter weight than the text. In most cases as size increases, weight should decrease.
Set lists and columns of figures to align flush right or on the decimal — Aligning on the decimal is not easily obtained with HTML and CSS, so it is recommended to align tabular figures flush right and if possible with equal decimal places.
Use close-set en dashes between digits to indicate range — Such as with 23 – 48. The en dash html entity is –. Here we also surrounded the dash with hair spaces ( )
Use the dimension sign (×) instead of the letter x when dimensions are given — As with 23 × 10 cm, 2 × 4, and 8½ × 11. (×)
Eliminate the apostrophe from numerical plurals — Buildings are made with 2 × 4s and the Rubix Cube was invented in the 70s.
Omit unnecessary punctuation — Unnecessary punctuation can wreak havoc on a text block. To end all abbreviations with periods, as we do in the US, leaves the page full of holes. It helps to omit the period after self-evident abbreviations, or follow the Oxford style and omit the period for abbreviations that begin with the first letter and end in the original word’s final letter: Mrs Monster, Mr Wilford Brimley Jr, and Ms Cookie Brimley; Dr Spock and St Thomas Aquinas; but Prof. Žižek and Capt. James Kirk. Also, abbreviations and acronyms set in small or large caps should lose the periods: 2:00 AM, 120 BC, and Washington DC.
Likewise, extra hyphens should be omitted from self evident phrases: avant garde, bleeding heart, postmodern, prewar, silkscreen, etc.
Apostrophes are sometimes needed for plurals but inconsistency is better than extra marks: do’s and don’ts; the ayes have it but the I’s don’t.
Add or omit punctuation where it is necessary to meaning — Consider the ambiguous phrase twenty one night stands. Punctuation is necessary for clarity: twenty one night-stands or twenty-one nightstands.