Now accepting applications for our next session

Almost every page is going to have an aggresive heading like you see above. It's also very likely to have a 'page-intro' like this. In this case, Welcome to the style guide! This shows how everything on the site will look all in one place.

These intros will likely have many paragraphs. We're setting the stage for the article or lesson plan. It's the Amuse-bouche of this content. It needs to be short and sweet.

Fonts

These are them - for now!

Georgia
Helvetica

Type patterns

micro-voice() This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. calm-voice() This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. strong-voice() This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide. loud-voice() This is a long enough sentence that it should wrap around and show us some line height. So, how's it looking? When we change it - it will reflect site-wide.

Color and texture ideas

Normally, I would use names like $color, and $highlight and $alternate, and $color-light... because the idea of the "main color" is different than the actual color. It might change... but in this case there are so many - that it actually makes sense to use their real names, I think...

This 70's kinda rainbow/primary colors kids-classroom - is specific enough that it pulls us all-in.

Black and white
$black $white $gray $gray-light $gray-dark $gray-lighter
Color
$black $white $wheat-light $cyan $red $orange $yellow $green $blue $purple

Old plastic

$wheat-light $wheat $wheat-dark $wheat-darker
With texture
$black $white $wheat-light $cyan $red $orange $yellow $green $blue $purple
With patterns
checkers() $color & checkers() diagnol() $color & diagnol() points() $color & points()
Edge treatments
drop-shadow() example border?

The Goals

  1. Example goal heading/title

    Example goal description.

  2. Example goal heading/title

    Example goal description.

Today's lecture

Basic text module

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

List with default styles

A description of this simple list here.

  1. List item 1

  2. List item 2

  3. List item 3

List with type 'step'

Description.

  1. Item one

  2. Item two

  3. Item three

  4. Item four

  5. Item five

List with checkbox styles

Description.

  1. Item one

  2. Item two

  3. Item three

emphasis

This is a “picture_module” description. There is some emphasis and some strong emphasis. Somethings there will be some links and maybe some highlighted copy?

It should fit between “text” modules seamlessly – but hold it’s own – in case we style it differently – or have full-width background color etc. A lot of the images I want to use – are low quality… (because they are old!) – so, maybe we can have a filter or something to help keep them uniform… or even better… – have someone draw them… over again – so we aren’t in a legal issue… Example of ‘picture’ element for swapping out images (crop) for different screen sizes.

Don't forget that you are full of wonder...

Some general callout content. I’m still not sure how I’m going to use these / or if I’ll need a few different unique modules for this. Currently – ‘warning’ is the default.

Small Alert

Small alert content

Do not put sunscreen in your eyes

This doesn’t feel good. Please add a realistic example here. Will there be images? Are there any good examples in the wild we can check out?

Remember: Cats are almost always smaller than dogs

Please put a real-world example of how we’ll use this.

Picture with heading

Picture source

Picture description

Question / prompt. Does that sound fun?

Well, maybe we can answer those questions. Let’s talk.

Key
concept

Biophilia

The hypothesis that “natural” environments can aid focus and concentration by releasing stress. In simple terms – we are natural beings. We have a history of being a part of nature. Nature has natural Rhythms that we relate too – unlike our beeps and dings and LED lighting in cubicles. Makes sense, right? So – adding some nature – and some organic stuff can really change how we feel about things. Wikipedia


Some context to how this works… in this case / the term could be “live style guide” – or something / and we could discuss what that meant – in the context of this “live style guide.”

Base HTML template html = 1

HTML

What we’d like the templating engine to spit out. This is the ideal outcome.

The data javascript =

JavaScript
var sections = [
  {
    styles: "styles-here",
    heading: "Example heading 1",
  },
  {
    styles: "styles-here highlight",
  },
  {
    styles: "styles-here",
    heading: "Example heading 3",
  },
];

Something like this

PHP implementation php = 1

PHP

Description here…

Plain JavaScript javascript =

JavaScript
function renderSection(section) {
  var hasHeading = section.heading;
  if (hasHeading) {
    var $heading = `

${section.heading}

`; } return `
${hasHeading ? $heading : "No heading provided"}
`; } function renderSections(sections) { var list = sections.map( function(section) { return renderSection(section); }).join(''); document.body.innerHTML = list; } renderSections(sections);

Ember implementation handlebars = 1

Handlebars

Ember description

Vue & (angular 1.5ish) javascript =

JavaScript

{{section.heading}}

Vue description

This is the video_module

Here is a description of this video.

Example heading here

Source with a link

Example description will go here:

Browser .png example

@pe (source with no link)

Example description will go here:

Optimism can be painful!

It’s really great that we are confident. I want to harness that power. The problem is – that this Dunning-Kruger Effect – really bums us out! Our powerful feelings and our optimism are distorted. It’s not logical to expect to be the best at anything right out of the gate (or ever). That shouldn’t be the goal. MOST PEOPLE ARE AVERAGE – AND THAT IS OK! “Average” is definitely good enough. BUT – let’s reframe this whole thing. The “Valley of dispair” is TERRIBLE and is 100% avoidable. This red line is ‘confidence.’ Why should your confidence jump around like that? I mean… you can do it. I know you can do it. It’s a fact. Your confidence can be steady.

Decrative vignette

Heading level 2

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Callout - alert style

Alert Alert! Watch out for something!!!

Heading level 2

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Heading level 3 – maybe as a list title

  • This is an unordered list
  • That means, that it’s order doesn’t matter
  • Sometimes it’s just a list of ‘stuff’ in no order

Heading level 3 – maybe as a list title

  1. This is an ordered list
  2. That means, that it’s order does matter
  3. Most lists have a meaningful order
  4. Wouldn’t you say?

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Heading level 2

Keep in mind / that just because these headings have a hierarchy, doesn’t’ mean they need to be ‘bigger’ to ‘smaller’ in size… that is just a historical convention.

Paragraphs may be few or many. Long or short. etc.

Take a break

Take 2 minutes to center – and work out your arm with this stretch.

How do you feel

about this?

In conclusion

This is some conclusion copy. I want it to have the option to style this differently than a regular text area – but mostly it’s the same. ; )

The Challenges:

  1. Spend some time throughout the day thinking about x and y

    Example challenge description. There’s no time placed on this for (for example)

  2. Write up something

    Example challenge description.

    30 minutes suggested
  3. Research companies who do something similar

    Some reminders about research and what to do etc. etc.

    60 minutes suggested
  4. Planning

    Planning example. Pull some real challenges from the lessons and put them here

    40 minutes suggested
  5. HTML/markup type stuff example

    Example description

    60 minutes suggested
  6. Cascading style sheets example

    Challenge description

    60 minutes suggested
  7. PHP example challenge

    Challenge description

    60 minutes suggested
  8. JavaScript challenge title

    Challenge description

    40 minutes suggested

Lesson checklist

Will lists need descriptions? Probably.

  1. First things first, you have to do the first thing – and that thing is here.

  2. Second of all – you’ll need to do whatever this thing says.

  3. First things first, you have to do the first thing – and that thing is here.

  4. Second of all – you’ll need to do whatever this thing says.

  5. First things first, you have to do the first thing – and that thing is here.

  6. Second of all – you’ll need to do whatever this thing says.

Now accepting applications for our next session