This is my attempt to have a one page reference point for all the front end code and design desisions I make during the course of my work. This page is meant to be viewed both in the browser and in code. You can view the CSS here.
My naming convention is based off of BEM - Block, Element, & Modifier. Names should be as short as possible & long as needed.
Standalone entity that is meaningful on its own.
A part of a block that has no standalone meaning and is semantically tied to its block.
A flag on a block or element. Use them to change appearance or behavior.
My goal with breakpoints is consider the full spectrum of viewports and be device agnostic. The system should be based on widths that match natural ui pattern changes.
*Breakpoints used
Based on stats from statcounter
My layout system uses:
Applied to the container divs
This can be as wide as the viewport
<div class="body-container space">
<div class="full bg-light">
</div>
</div>
This is a 1440px max container
<div class="content-container space">
<div class="full bg-light">
</div>
</div>
This container is 720 max width It is used for content that should be easy to read and browse. 640px or 40em max width. This is done to increase legibility by limiting 16px text to about 60 characters wide. Here is the wiki on line length
<div class="article-container space">
<div class="full bg-light">
</div>
</div>
<div class="full bg-light"></div>
<div class="sixth bg-light"></div>
<div class="five-sixth bg-light"></div>
Navigation message goes here
Vertical Spacing or a baseline grid provides a visual cadence to the Page
Heading are designed for Maximum differentiation between h1 - h6. This is achieved by choosing visual even font sizes and alternating bolding.
I reccomend AP Title Case for Titles
Paragraph / Body Text Lorem ipsum dolor sit amet, consectetur adipisicing 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 ea commodo consequat. Duis aute irure dolor in reprehenderit in strong velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Colors in this UI system are created by picking a primary hue and placing it evenly along scales of saturation and value. This system naturaly create enough contrast to meet accesability standards.
For base / primary wireframe color, I use dodgerblue or a hue of 210
I belive that the 15 colors below should meet any standard use case
Colors can be applied to font, border, and background color by adding the following classes:
<p class="fnt-highlight"></p><div class="bdr-medium-dark"></div><span class="bg-primary"></span>Colors can be added in the css using variables
font-color: var(--extra-light);Body Background
hsl(var(--hue), 40%, 95%)
Box, Footer, Content and Module Tile Backgrounds
hsl(var(--hue), 50%, 90%)
Makes dark text stand out
hsla(var(--hue), 60%, 90%, 0.75)
hsl(var(--hue), 100%, 70%)
Brand Color, Links, Actions
hsl(var(--hue), 90%, 50%)
hsl(var(--hue), 00%, 00%)
hsl(var(--hue), 00%, 00%);
hsl(var(--hue), 00%, 00%);
hsl(var(--hue), 00%, 00%);
hsl(var(--hue), 00%, 00%);
hsl(var(--hue), 00%, 00%);
hsl(var(--hue), 00%, 00%);
hsl(var(--hue), 00%, 00%);
hsl(var(--hue), 00%, 00%);
These icons are created with CSS and should adjust to the font-size.
<i class="circle-caret up"></i>
<i class="circle-caret right"></i>
<i class="circle-caret down"></i>
<i class="circle-caret left"></i>
<i class="caret up"></i>
<i class="caret right"></i>
<i class="caret down"></i>
<i class="caret left"></i>
1em
2em
3em
For ascii art, I used 4Max and Univers from patorjk.com/software/taag