dreamcast
Version:
Dreamcast: v10 Styleguide
515 lines (474 loc) • 14.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Styling framework for ALEX v10</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body id="guide">
<h1>ALEX v10 styles</h1>
<div class="container" id="colors">
<h2>Colors</h2>
<span class="label">Primary Palette</span>
<div class="flex">
<div class="alex-blue">
ALEX Blue
<br>#0981b0
<br>RGB 9, 129, 176
</div>
<div class="alex-orange">
ALEX Orange
<br>#ff8458
<br>RGB 255, 132, 88
</div>
<div class="aqua">
Aqua
<br>#90d3d3
<br>RGB 144, 211, 211
</div>
<div class="navy">
Navy
<br>#036991
<br>RGB 3, 105, 145
</div>
<div class="light-blue">
Light blue
<br>#cff5f9
<br>RGB 210, 237, 243
</div>
<div>
Red
<br>#ff3333
<br>RGB 255, 65, 65
</div>
</div>
<span class="label">Secondary/Text Palette</span>
<div class="flex">
<div class="text">
Text / Alex Gray
<br>#808080
<br>RGB 128, 128, 128
</div>
<div class="black">
"Black"
<br>#333
<br>RGB 51, 51, 51
</div>
<div class="light-gray">
Light gray
<br>#f2f2f2
<br>RGB 250, 250, 250
</div>
</div>
<span class="label">Art Palette</span>
<div class="flex flex-6">
<div class="gray">
Gray
</div>
<div class="beige">
Beige
</div>
<div class="brown">
Brown
</div>
<div class="graphite">
Graphite
</div>
<div class="ink">
Ink
</div>
<div class="slate">
Slate
</div>
<div class="royal-blue">
Royal Blue
</div>
<div class="blue">
Blue
</div>
<div class="cyan">
Cyan
</div>
<div class="green">
Green
</div>
<div class="lime">
Lime
</div>
<div class="yellow">
Yellow
</div>
<div class="warm-orange">
Warm Orange
</div>
<div class="orange">
Orange
</div>
<div class="red">
Red
</div>
<div class="fuchsia">
Fuchsia
</div>
<div class="pink">
Pink
</div>
<div class="purple">
Purple
</div>
</div>
</div>
<div class="container" id="voice-of-alex">
<h2>Typography - Voice of ALEX</h2>
<span class="label">Question</span>
<div class="question">
I’m here to help you make informed decisions about your benefits. Shall we begin?
</div>
<span class="label">Section header</span>
<div class="section-header">
RETIREMENT SUMMARY
</div>
<span class="label">Module header</span>
<div class="module-header">
Medical
</div>
<span class="label">Explanation</span>
<div class="explanation">
Potential savings with a limited network:
</div>
<span class="label">Explanation featured number</span>
<div class="explanation-number">
$8,008
</div>
<span class="label">Subheader
<span>it's the same as the number!</span>
</span>
<div class="subheader">
Wellyvision Network
</div>
<span class="label">Bullet list
<span>These are apparently imported from Josef, so it's okay that they use nested HTML</span>
</span>
<div class="explanation list">
<ul>
<li>Example of one kind of covered service </li>
<li>Example of something else that’s covered</li>
<li>Example of another type of covered service</li>
</ul>
</div>
<span class="label">Card with plan name
<br>Header only</span>
<div class="card-header">A Very Good Plan</div>
<span class="label">Card with a header and explanation
<span>Header and body</span>
</span>
<div class="card-header">Kind of a Bad Plan</div>
<div class="card-body">This plan stinks. You'll lose all of your money because somehow this plan forces you to spend all of your money caring for a miniature horse that you aren't even allowed to see a picture of. Please don't pick it.
</div>
<span class="label">Summary
<span>Header, text, list<br>List imported through Josef</span>
</span>
<div class="summary-header">Retirement Summary</div>
<div class="summary-list">
<ul>
<li>6% of my [time/energy]</li>
<li>1% more, fortnightly</li>
<li>Anything you ask of me, master</li>
</ul>
</div>
<span class="label">Body text</span>
<p>As the hills draw nearer, one heeds their wooded sides more than their stone-crowned tops. Those sides loom up so darkly and precipitously that one wishes they would keep their distance, but there is no road by which to escape them. Across a covered bridge one sees a small village huddled between the stream and the vertical slope of Round Mountain, and wonders at the cluster of rotting gambrel roofs bespeaking an earlier architectural period than that of the neighbouring region. It is not reassuring to see, on a closer glance, that most of the houses are deserted and falling to ruin, and that the broken-steepled church now harbours the one slovenly mercantile establishment of the hamlet.</p>
<span class="label">Body text with emphasis</span>
<p>One dreads to trust the tenebrous tunnel of the bridge, yet there is no way to avoid it. Once across, it is hard to prevent the impression of <span>a faint, malign odour about the village street</span>, as of the massed mould and decay of centuries. It is always a relief to get clear of the place, and to follow the narrow road around the base of the hills and across the level country beyond till it rejoins the Aylesbury pike. Afterward one sometimes learns that one has been through Dunwich.</p>
<span class="label">Footnote</span>
<div class="footnote">
* Don’t include your preventive check-up! One per person is fully covered, each year.
</div>
<span class="label">Error</span>
<div class="error">
* Whole numbers are required in these fields.
</div>
<span class="label">Horizontal rule</span>
<div class="line"></div>
</div>
<div class="container" id="inputs">
<h2>Inputs - Voice of the user</h2>
<span class="label">Choice</span>
<button class="button">Yes, I'm ready to get started.</button>
<span class="label">Cancel button</span>
<button class="cancel-button">Cancel</button>
<span class="label">Text link</span>
<a href="http://www.jokes4us.com/animaljokes/horsejokes.html">Quite a text link</a>
<span class="label">Quantity input</span>
<form class="fill-in-the-blank" action="#">
<div class="fib-multi">
<label for="fib-11">
For You
</label>
<input type="number" id="fib-11" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-12">
For your spouse
</label>
<input type="number" id="fib-12" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-13">
For Kid 1
</label>
<input type="number" id="fib-13" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
<div class="fib-multi">
<label for="fib-14">
For Kid 2
</label>
<input type="number" id="fib-14" value="" maxlength="2" placeholder="$" class="fib-input number" pattern="(-?[\d](.[\d])?)*">
</div>
</form>
<span class="label">Dropdown selector</span>
<div class="choice">
<select>
<option selected="" value="" disabled="" hidden="">Choose One</option>
<option label="Yes, let's estimate costs to help me pick a plan." value="Yes, let's estimate costs to help me pick a plan.">Yes, let's estimate costs to help me pick a plan.</option>
<option label="Show me a side-by-side plan comparison. " value="Show me a side-by-side plan comparison. ">Show me a side-by-side plan comparison. </option>
<option label="Explain how a plan works." value="Explain how a plan works.">Explain how a plan works.</option>
<option label="I already know what I'll sign up for." value="I already know what I'll sign up for.">I already know what I'll sign up for.</option>
<option label="I don't want medical coverage." value="I don't want medical coverage.">I don't want medical coverage.</option>
</select>
</div>
<span class="label">Checkbox</span>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox1" name="checkbox" />
<label for="checkbox1"></label>
<span>My neck</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox2" name="checkbox" />
<label for="checkbox2"></label>
<span>My back</span>
</div>
<div class="checkbox-input">
<input type="checkbox" value="None" id="checkbox3" name="checkbox" />
<label for="checkbox3"></label>
<span>My existential dread</span>
</div>
<span class="label">Radio button</span>
<div class="radiobutton-input">
<input type="radio" value="None" id="radio1" name="radio" />
<label for="radio1"></label>
<span>Choose wisely</span>
</div>
<div class="radiobutton-input">
<input type="radio" value="None" id="radio2" name="radio" />
<label for="radio2"></label>
<span>Choose poorly</span>
</div>
<div class="radiobutton-input">
<input type="radio" value="None" id="radio3" name="radio" />
<label for="radio3"></label>
<span>Don't choose</span>
</div>
</div>
<div class="container" id="cost-comparison">
<h2>Cost comparison</h2>
<span class="label">Legend</span>
<div class="comparison-key">
<div class="comparison-key-item">
<div class="block">
</div>
Premiums
</div>
<div class="comparison-key-item">
<div class="block">
</div>
Estimated costs
</div>
<div class="comparison-key-item">
<div class="block">
</div>
Worst case
</div>
</div>
<span class="label">CC Graphs</span>
<div class="cost-comparison">
<div class="highlights">
<div>
<div class="highlight plan-highlight"></div>
<div class="highlight star"></div>
</div>
</div>
<div class="title">Pain Don't Hurt</div>
<div class="cost-bar">
<div class="bar">
<div class="bar-section bar1" style="width: 37.3541%;">
<div class="cost">
<span class="cost-value">$9600</span>
</div>
</div>
<div class="bar-section bar2" style="width: 12.8716%;">
<div class="cost">
<span class="cost-value">$12908</span>
</div>
</div>
<div class="bar-section bar3" style="width: 1%;">
<div class="cost">
<span class="cost-value">$12908</span>
</div>
</div>
</div>
</div>
<div class="plan-feature "></div>
</div>
<div class="cost-comparison">
<div class="title">Mauve Cross Taupe Shield PPO</div>
<div class="cost-bar">
<div class="bar">
<div class="bar-section bar1" style="width: 46.6926%;">
<div class="cost">
<span class="cost-value">$12000</span>
</div>
</div>
<div class="bar-section bar2" style="width: 1.99533%;">
<div class="cost">
<span class="cost-value">$12512.8</span>
</div>
</div>
<div class="bar-section bar3" style="width: 51.3121%;">
<div class="cost">
<span class="cost-value">$25700</span>
</div>
</div>
</div>
</div>
<div class="plan-feature "></div>
</div>
<div class="cost-comparison">
<div class="title">The BBQ Chips Plan</div>
<div class="cost-bar">
<div class="bar">
<div class="bar-section bar1" style="width: 46.6926%;">
<div class="cost">
<span class="cost-value">$12000</span>
</div>
</div>
<div class="bar-section bar2" style="width: 38.9603%;">
<div class="cost">
<span class="cost-value">$22012.8</span>
</div>
</div>
<div class="bar-section bar3" style="width: 14.3471%;">
<div class="cost">
<span class="cost-value">$25700</span>
</div>
</div>
</div>
</div>
<div class="plan-feature ">2x Bonus Annual BBQ Chips</div>
</div>
<div class="cost-comparison">
<div class="title">The Boy Mayor of Second Life</div>
<div class="cost-bar">
<div class="bar">
<div class="bar-section bar1" style="width: 9.33852%;">
<div class="cost">
<span class="cost-value">$2400</span>
</div>
</div>
<div class="bar-section bar2" style="width: 56.463%;">
<div class="cost">
<span class="cost-value">$16911</span>
</div>
</div>
<div class="bar-section bar3" style="width: 1%;">
<div class="cost">
<span class="cost-value">$16911</span>
</div>
</div>
</div>
</div>
<div class="plan-feature warning">Not a real mayor!</div>
</div>
</div>
<div class="container" id="grid">
<h2>12-column grid</h2>
<div class="common-configurations">
<span class="label">
One column, 66%
<span>Simple layouts, generally just question/answer or explainer text</span>
</span>
<div class="row">
<div class="col-8"></div>
</div>
<span class="label">
Two column, 66% 33%
<span>Layouts with content on the left, question/answer on the right</span>
</span>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
<span class="label">
Two column, 50% 50%
<span>TBD</span>
</span>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<span class="label">
One column, full
<span>Art Moments</span>
</span>
<div class="row">
<div class="col-12"></div>
</div>
</div>
<span class="label">All sorts of configurations to feast your eyes on</span>
<div class="row">
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-3"></div>
<div class="col-2"></div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
</div>
</body>
</html>