useful css class-room phrases is a small selection for css classes used inside content areas.
Some simple worded, self-explanatory and self-describable classes writing and understand your source.
Instead of writing style="float:right;margin:0 5px 0 5px;" every time.
Most front end frameworks have similar elements, like foundation utility-classes or HTML KickStart extras.
Most classes in ucp.css are selfdescribing (e.g. clear, left, none).
Only row2 is special: to have a not html-tabled 2-column table to markup semantic pairs, using a definition Lists. This classes must be around the dl.
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/klml/usefulclassroomphrases@master/ucp.css">example.local.css is a example for local.css with common used classes you have to customze (link color)
.mainis the main content area, it should have another background-color than the whole body and you can this combine with.panel..panel: centered content. Set this declaration direct in your body tag, or if you want elements over the whole page width(like panorama images), in any wrapper elements.paneloutbreakallows elements in panels to burst out.
ul: has no list-style but a bullet imagea: there are diffrent kinds of hyperlinks:a: used on site-internal links (/impressum)a:visited: Browsers limits the styles that can be set for a:visited links to all kind of colors, due to security issues.. This example usescolor: inherit;to reduce the accentuation and newness for already visited linksa:hover: hovera:active: and classa.active, useful to identify links to current pages (menus, sidebars etc)a[href^="#"]: for anchor-links staying on the current page (#footer)a[href^="//"]anda[href^="http"]: for site external links (https://example.com)
- lead: blogs, news, most pages have Lead paragraph
Colors, sizes and contrasts inspired by bettermotherfuckingwebsite.com.
- selection for css-icons for hyperlinks with Data URI (base64): payload demo