Now accepting applications for our next session
Perpetual Education Style Guide
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
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!
Type patterns
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.
Old plastic
The Goals
-
Example goal heading/title
Example goal description.
-
Example goal heading/title
Example goal description.
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.
-
List item 1
-
List item 2
-
List item 3
List with type 'step'
Description.
-
Item one
-
Item two
-
Item three
-
Item four
-
Item five
List with checkbox styles
Description.
-
Item one
-
Item two
-
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
What we’d like the templating engine to spit out. This is the ideal outcome.
The data 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
Description here…
Plain 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
Ember description
Vue & (angular 1.5ish) 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.
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
- This is an ordered list
- That means, that it’s order does matter
- Most lists have a meaningful order
- 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:
-
Spend some time throughout the day thinking about x and y
Example challenge description. There’s no time placed on this for (for example)
-
Write up something
Example challenge description.
-
Research companies who do something similar
Some reminders about research and what to do etc. etc.
-
Planning
Planning example. Pull some real challenges from the lessons and put them here
-
HTML/markup type stuff example
Example description
-
Cascading style sheets example
Challenge description
-
PHP example challenge
Challenge description
-
JavaScript challenge title
Challenge description
Lesson checklist
Will lists need descriptions? Probably.
-
First things first, you have to do the first thing – and that thing is here.
-
Second of all – you’ll need to do whatever this thing says.
-
First things first, you have to do the first thing – and that thing is here.
-
Second of all – you’ll need to do whatever this thing says.
-
First things first, you have to do the first thing – and that thing is here.
-
Second of all – you’ll need to do whatever this thing says.