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.

demo

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)

• .main is 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.
  • paneloutbreak allows elements in panels to burst out.
• ul: has no list-style but a bullet image
• a: 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 uses color: inherit; to reduce the accentuation and newness for already visited links
  • a:hover: hover
  • a:active: and class a.active, useful to identify links to current pages (menus, sidebars etc)
  • a[href^="#"]: for anchor-links staying on the current page (#footer)
  • a[href^="//"] and a[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