Style Guide

Recommendations

Bad Practices

• clear.gif is never appropriate
• Don't repeat images
• Javascript: clearText()

Don't include <title>

Repeated HTML: hidden-xx

Use HTML5 elements instead of ids of the same

<div class="col-md-8">
	<article>{{ parent() }}</article>
</div>

<article class="col-md-8">{{ parent() }}</article>

Not needed:

{% block wrapper %}
	{{ parent() }}
{% endblock %}

.left {text-align: left;} //.text-left

.right {text-align: right;} //.text-right

.center {text-align: center;} //.text-center

Mind the selectors:

.su_bootstrap_safe [class^="icon-search"], .su_bootstrap_safe [class*=" icon-search"] {
	width: 25px;
	height: 24px;
	text-align: left;
	padding-left: 5px;
	padding-right: 7px;
}

Result

Don't comment anything: use it or lose it

Don't need reset if using global bootstrap

Need to use jpg, unless you need transparency

• Use variables instead of blocks for strings (see here)
• Use nested rules

Themes

Don't repeat yourself

• CSS = Cascading Styles Sheets

• Don't override something unless you need to change it

• Problem: Either you

  • repeat selectors: .sitename, ... { font stuff } ... .sitename, ... { color stuff }
  • or repeat declarations: .sitename { font stuff; color stuff } ... { font stuff; color stuff }
  • Solution: mixins: .theme-font { font stuff } .sitename { .theme-font } ... { .theme-font }

• Focus:

  • Meadow: 56 color definitions
  • Pebble: 52 font definitions

• Repeated fonts

• Naming conventions: #site-wrapper, #topBar, #search, .search_field

• Nix bodysmall, bodysmallgrey, bodygrey, syssmall, printlink, bottom_links, subheadline

https://github.com/SimpleUpdates/SUThemeMeadow/blob/master/style/global.less