technology

Notes from Weelearning

Weelearning held the first event on Wednesday and I was in attendance in bristol. Dan and Sam are hoping to build a regular following for us e-learning types in the commercial and public sector. I really enjoyed the night and not just because I won a prize of e-learning books from packt.

What made this really enjoyable in addition to the two talks was that we had plenty of time to kick it with fellow folks. I attend plenty of formal rigid event so it was cool to almost have the other end of the spectrum.

We talked about the differences between commercial/public sector approaches, terminology and value of e-learning to traditional workshop models.

If weelearning can attract a regular following and keep the essence of a relaxed and diverse crowd then I look forward to meeting you at a future event.

Standard
Web design

Scalable and Modular Architecture for CSS

One of my web heroes Jonathan Snook recently released a website about organising CSS:

I’ve long lost count of how many web sites I’ve built. You’d think after having built a few hundred of them I’d have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.

I have long tried to grapple with the same problem and after a week or so really think this idea and website has legs. Below is a cut down version for quick reference, read and then head over to Scalable and Modular Architecture for CSS.

The four types of categories are:

  1. Base
  2. Layout
  3. Module
  4. State


1. Base styles are the defaults that we set. They’re almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that where ever this element is on the page, it should look like this.

 Examples of Base Styles

html, body, form { margin: 0; padding: 0; }

input[type=text] { border: 1px solid #999; }

a { color: #039; }

a:hover { color: #03C; }

2. Layout styles divide the page into sections. Layouts hold all your modules together

Examples of Layout Styles
#header, #article, #footer {    width: 960px;   margin: auto;}
 
.l-header {    float: left; }

3. Modules are the reusable, modular parts of our design. They are the navigation, callouts, the sidebar sections, and the product list and so on.

This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component.

4. State styles are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive?

.s-error {    color: #F00;    background-color: #FEE; }

 Grouping properties  

  1. Box – display, float, position, left, top, height, width and so on.
  2. Border- border-image, and border-radius.
  3. Background
  4. Text – font-family, font-size, text-transform, letter-spacing etc
  5. Other

Standard