511-CCS: Cascading Code Schools

dabblet.css

@charset:'UTF-8';
/* 511-CCS: Cascading Code Schools

# Reference
- [w3c/CSS](http://www.w3.org/Style/CSS)
- [daringfireball/markdown](http://daringfireball.net/projects/markdown/)

# Color
- is usually the first thing to change between designs,
- goes first in a stylesheet: */

* { color:white /* affects text and border */; 
  background:DeepSkyBlue } /* last semicolon not required, brace is required.
  
- read: [About CSS colors](http://hugogiraudel.com/blog/css-colors.html)
- beautiful: [Commuter-Creative colors](http://www.colors.commutercreative.com/)
- sneaky: [W3C CSS2 system colors](http://www.w3.org/TR/CSS2/ui.html#system-colors)
- all of them? [Crockford CSS color names](http://www.crockford.com/wrrrld/color.html)

## now something fancier: transparency and glow */
* { background:hsla(195, 100%, 50%, .6);
  box-shadow:0 0 1em hsla(195, 100%, 90%, .6), inset 0 0 1em hsla(195, 100%, 90%, .6) }

/*
# Scale
[MDN/font](https://developer.mozilla.org/en-US/docs/CSS/font)  */
html { font:small-caps 2.6em/1 monospace }

/* [MDN/border](https://developer.mozilla.org/en-US/docs/CSS/border) */
* { border:solid; border-radius:.3em }

/*  
- [W3/attr](http://www.w3.org/html/wg/drafts/html/master/dom.html#global-attributes) */
*:before { content:attr(id); background:green }
*:after { content:attr(class); background:red }


/*
Someone thought it may be a good idea 
to turn this great tool (built by Lea Verou circa 2012)
into a teaching and learning tool
because learning and programming
can become the same thing and allow faster learning.

The idea is to guide the audience
through a satisfying learning experience.

Some things that could be taught this way:
- CSS, HTML, JavaScript/JSON, REST and HTTP
- design (typography, color theory, user experience...)
- project management (times, estimates, risk, visibility...)

These could later be scripts for videos with the same titles.

Channel producers (on YouTube, Vimeo or Flickr for example)
could compete via popular vote by audience count
and move up into other means of broadcast in the
entertaining industry, making it also
an opportunity for entrance and growth in that industry.

There may be embedded videos on the examples,
and the links to them may be "hidden" on other videos...

It's not a bad way to spend a Friday, really.
*/

dabblet.html

<article id="something interesting" class="unread article">
 <p>Lorem ipsum.
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}