920 lines
35 KiB
HTML
920 lines
35 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>35c3 css demo</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="Description" content="Demo site for a 35c3 css template">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link href="css/35c3.min.css" type="text/css" rel="stylesheet" />
|
||
|
|
<link href="css/style.min.css" type="text/css" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="bg-black text-reboot text-breakall">
|
||
|
|
<label id="sidebar-toggle" class="sidebar-toggle" for="sidebar-toggle-input">≡</label>
|
||
|
|
<input id="sidebar-toggle-input" type="checkbox" role="button" />
|
||
|
|
<div id="sidebar" class="bg-black">
|
||
|
|
<label class="sidebar-toggle text-fresh float-right" for="sidebar-toggle-input">×</label>
|
||
|
|
|
||
|
|
<ul class="unstyled">
|
||
|
|
<li><a href="#35css">35css</a></li>
|
||
|
|
<li><a href="#typography">typography</a></li>
|
||
|
|
<li><a href="#tables">tables</a></li>
|
||
|
|
<li><a href="#colors">colors</a></li>
|
||
|
|
<li><a href="#buttons">buttons</a></li>
|
||
|
|
<li><a href="#input">input</a></li>
|
||
|
|
<li><a href="#images">images</a></li>
|
||
|
|
<li><a href="#grid">grid</a></li>
|
||
|
|
<li><a href="#other">other</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="main">
|
||
|
|
<div class="container">
|
||
|
|
<h1 id="35css">35c3 css demo</h1>
|
||
|
|
<p>Simple stylesheet inspired <a href="https://content.events.ccc.de/35C3/Styleguide.pdf">https://content.events.ccc.de/35C3/Styleguide.pdf</a>
|
||
|
|
and <a href="https://pbs.twimg.com/media/DsZNqPMWsAE53H9.jpg:large">https://pbs.twimg.com/media/DsZNqPMWsAE53H9.jpg:large</a>
|
||
|
|
thx to <a href="https://twitter.com/c3groc">@c3groc</a></p>
|
||
|
|
<p><a href="css/35c3.min.css">minified css</a> | <a href="css/35c3.css">css</a> | <a href="css/35c3.scss">sass
|
||
|
|
source</a></p>
|
||
|
|
<p><a href="css/fonts/">fonts</a></p>
|
||
|
|
<p><span class="text-beat">Accessibility <span alt="warning sign">⚠</span></span>: For higher contrast, add
|
||
|
|
text-white class to parent
|
||
|
|
element!</p>
|
||
|
|
<hr />
|
||
|
|
<h2 id="typography">typography</h2>
|
||
|
|
<h1>Heading 1</h1>
|
||
|
|
<h2>Heading 2</h2>
|
||
|
|
<h3>Heading 3</h3>
|
||
|
|
<h4>Heading 4</h4>
|
||
|
|
<h5>Heading 5</h5>
|
||
|
|
<h6>Heading 6</h6>
|
||
|
|
<p>Paragraph </p>
|
||
|
|
<p class="text-left">text-left</p>
|
||
|
|
<p class="text-center">text-center</p>
|
||
|
|
<p class="text-right">text-right</p>
|
||
|
|
<p class="text-justify">text-justify</p>
|
||
|
|
<p class="text-nowrap">text-nowrap no wrap demo</p>
|
||
|
|
<p class="text-breakline">text-breakline break line demo</p>
|
||
|
|
<p class="text-lowercase">text-lowercase LOWERCASE demo</p>
|
||
|
|
<p class="text-uppercase">text-uppercase uppercase demo</p>
|
||
|
|
<p class="text-capitalize">text-capitalize capitalize demo</p>
|
||
|
|
<p><label>label</label></p>
|
||
|
|
<blockquote>blockquote</blockquote>
|
||
|
|
<p><code>code</code></p>
|
||
|
|
<hr />
|
||
|
|
<h2 id="tables">Tables</h2>
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>#</th>
|
||
|
|
<th>table heading 2</th>
|
||
|
|
<th>table heading 3</th>
|
||
|
|
<th>table heading 4</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>1</th>
|
||
|
|
<td>table body row 1 2</td>
|
||
|
|
<td>table body row 1 3</td>
|
||
|
|
<td>table body row 1 4</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>2</th>
|
||
|
|
<td>table body row 2 2</td>
|
||
|
|
<td>table body row 2 3</td>
|
||
|
|
<td>table body row 2 4</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>3</th>
|
||
|
|
<td>table body row 3 2</td>
|
||
|
|
<td>table body row 3 3</td>
|
||
|
|
<td>table body row 3 4</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<hr />
|
||
|
|
<h2 id="colors">colors</h2>
|
||
|
|
<p class="text-white">text-white</p>
|
||
|
|
<p class="text-fresh">text-fresh</p>
|
||
|
|
<p class="text-hope">text-hope</p>
|
||
|
|
<p class="text-glint">text-glint</p>
|
||
|
|
<p class="text-beat">text-beat</p>
|
||
|
|
<p class="text-tenacity">text-tenacity</p>
|
||
|
|
<p class="text-base">text-base</p>
|
||
|
|
<p class="text-reboot">text-reboot</p>
|
||
|
|
<p class="bg-white">bg-white</p>
|
||
|
|
<p class="bg-fresh">bg-fresh</p>
|
||
|
|
<p class="bg-hope">bg-hope</p>
|
||
|
|
<p class="bg-glint">bg-glint</p>
|
||
|
|
<p class="bg-beat">bg-beat</p>
|
||
|
|
<p class="bg-tenacity">bg-tenacity</p>
|
||
|
|
<p class="bg-base">bg-base</p>
|
||
|
|
<p class="bg-reboot">bg-reboot</p>
|
||
|
|
<p class="bg-black">bg-black</p>
|
||
|
|
<hr />
|
||
|
|
<h2 id="buttons">buttons</h2>
|
||
|
|
<p>
|
||
|
|
<button class="btn">btn</button>
|
||
|
|
<a class="btn btn-fresh">btn btn-fresh</a>
|
||
|
|
<a class="btn btn-hope">btn btn-hope</a>
|
||
|
|
<a class="btn btn-glint">btn btn-glint</a>
|
||
|
|
<a class="btn btn-beat">btn btn-beat</a>
|
||
|
|
<a class="btn btn-tenacity">btn btn-tenacity</a>
|
||
|
|
<a class="btn btn-base">btn btn-base</a>
|
||
|
|
<a class="btn btn-reboot">btn btn-reboot</a>
|
||
|
|
<a class="btn btn-white">btn btn-white</a>
|
||
|
|
<a class="btn btn-black">btn btn-black</a></p>
|
||
|
|
<p>
|
||
|
|
<a class="btn btn-fresh btn-block">btn btn-fresh btn-block</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<a class="btn btn-hope btn-xs">btn btn-hope btn-xs</a>
|
||
|
|
<a class="btn btn-glint btn-sm">btn btn-glint btn-sm</a>
|
||
|
|
<a class="btn btn-beat">btn btn-beat</a>
|
||
|
|
<a class="btn btn-tenacity btn-xl">btn btn-tenacity btn-xl</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<a class="btn btn-hope btn-round btn-xs" title="btn btn-hope btn-round btn-xs">x</a>
|
||
|
|
<a class="btn btn-glint btn-round btn-sm" title="btn btn-glint btn-round btn-sm">x</a>
|
||
|
|
<a class="btn btn-beat btn-round" title="btn btn-round btn-beat" x>x</a>
|
||
|
|
<a class="btn btn-tenacity btn-round btn-xl" title="btn btn-tenacity btn-round btn-xl">x</a>
|
||
|
|
</p>
|
||
|
|
<hr />
|
||
|
|
<h2 id="input">input</h2>
|
||
|
|
<form name="demo-form">
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_text">text</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_text" type="text" placeholder="placeholder" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_required">required</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_required" type="text" required placeholder="required" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_invalid">invalid</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_invalid" type="email" placeholder="email" value="invalid" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_disabled">disabled</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_disabled" type="text" placeholder="disabled" disabled />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_date">date</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_date" type="date" placeholder="date" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_time">time</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_time" type="time" placeholder="time" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_number">number</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_number" type="number" placeholder="number" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_textarea">textarea</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<textarea id="input_textarea"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_range">range</label>
|
||
|
|
<div class="popover">
|
||
|
|
<span class="text-beat" alt="warning sign">⚠</span>
|
||
|
|
<div class="popover-content">
|
||
|
|
no IE support 🤷 hover not working for webkit
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<input id="input_range" type="range" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_select">select</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<select id="input_select">
|
||
|
|
<option>option 1</option>
|
||
|
|
<option>option 2</option>
|
||
|
|
<option>option 3</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_checkbox">checkbox</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||
|
|
<div class="row" id="input_checkbox">
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_checkbox_default" class="checkbox">
|
||
|
|
<input id="input_checkbox_default" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox default
|
||
|
|
</label>
|
||
|
|
<label for="input_checkbox_default_checked" class="checkbox">
|
||
|
|
<input id="input_checkbox_default_checked" type="checkbox" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox default checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_checkbox_hope" class="checkbox checkbox-hope">
|
||
|
|
<input id="input_checkbox_hope" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox hope
|
||
|
|
</label>
|
||
|
|
<label for="input_checkbox_hope_checked" class="checkbox checkbox-hope">
|
||
|
|
<input id="input_checkbox_hope_checked" type="checkbox" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox hope checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_checkbox_glint" class="checkbox checkbox-glint">
|
||
|
|
<input id="input_checkbox_glint" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox glint
|
||
|
|
</label>
|
||
|
|
<label for="input_checkbox_glint_checked" class="checkbox checkbox-glint">
|
||
|
|
<input id="input_checkbox_glint_checked" type="checkbox" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox glint checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_checkbox_beat" class="checkbox checkbox-beat">
|
||
|
|
<input id="input_checkbox_beat" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox beat
|
||
|
|
</label>
|
||
|
|
<label for="input_checkbox_beat_checked" class="checkbox checkbox-beat">
|
||
|
|
<input id="input_checkbox_beat_checked" type="checkbox" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox beat checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_checkbox_tenacity" class="checkbox checkbox-tenacity">
|
||
|
|
<input id="input_checkbox_tenacity" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox tenacity
|
||
|
|
</label>
|
||
|
|
<label for="input_checkbox_tenacity_checked" class="checkbox checkbox-tenacity">
|
||
|
|
<input id="input_checkbox_tenacity_checked" type="checkbox" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox tenacity checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_checkbox_base" class="checkbox checkbox-base">
|
||
|
|
<input id="input_checkbox_base" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox base
|
||
|
|
</label>
|
||
|
|
<label for="input_checkbox_base_checked" class="checkbox checkbox-base">
|
||
|
|
<input id="input_checkbox_base_checked" type="checkbox" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
checkbox base checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_radio">radio</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||
|
|
<div class="row" id="input_radio">
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_radio_default" class="radio">
|
||
|
|
<input id="input_radio_default" type="radio" name="radio-default" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio default
|
||
|
|
</label>
|
||
|
|
<label for="input_radio_default_checked" class="radio">
|
||
|
|
<input id="input_radio_default_checked" type="radio" name="radio-default" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio default checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label id="input_radio_hope" class="radio radio-hope">
|
||
|
|
<input for="input_radio_hope" type="radio" name="radio-hope" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio hope
|
||
|
|
</label>
|
||
|
|
<label for="input_radio_hope_checked" class="radio radio-hope">
|
||
|
|
<input id="input_radio_hope_checked" type="radio" name="radio-hope" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio hope checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_radio_glint" class="radio radio-glint">
|
||
|
|
<input id="input_radio_glint" type="radio" name="radio-glint" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio glint
|
||
|
|
</label>
|
||
|
|
<label for="input_radio_glint_checked" class="radio radio-glint">
|
||
|
|
<input id="input_radio_glint_checked" type="radio" name="radio-glint" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio glint checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_radio_beat" class="radio radio-beat">
|
||
|
|
<input id="input_radio_beat" type="radio" name="radio-beat" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio beat
|
||
|
|
</label>
|
||
|
|
<label for="input_radio_beat_checked" class="radio radio-beat">
|
||
|
|
<input id="input_radio_beat_checked" type="radio" name="radio-beat" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio beat checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_radio_tenacity" class="radio radio-tenacity">
|
||
|
|
<input id="input_radio_tenacity" type="radio" name="radio-tenacity" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio tenacity
|
||
|
|
</label>
|
||
|
|
<label for="input_radio_tenacity_checked" class="radio radio-tenacity">
|
||
|
|
<input id="input_radio_tenacity_checked" type="radio" name="radio-tenacity" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio tenacity checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_radio_base" class="radio radio-base">
|
||
|
|
<input id="input_radio_base" type="radio" name="radio-base" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio base
|
||
|
|
</label>
|
||
|
|
<label for="input_radio_base_checked" class="radio radio-base">
|
||
|
|
<input id="input_radio_base_checked" type="radio" name="radio-base" checked />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
radio base checked
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
|
||
|
|
<label for="input_switch">switch</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10 col-xl-11">
|
||
|
|
<div class="row" id="input_switch">
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_switch_default" class="switch">
|
||
|
|
<input id="input_switch_default" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
switch default
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_switch_hope" class="switch switch-hope">
|
||
|
|
<input id="input_switch_hope" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
switch hope
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_switch_glint" class="switch switch-glint">
|
||
|
|
<input id="input_switch_glint" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
switch glint
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_switch_beat" class="switch switch-beat">
|
||
|
|
<input id="input_switch_beat" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
switch beat
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_switch_tenacity" class="switch switch-tenacity">
|
||
|
|
<input id="input_switch_tenacity" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
switch tenacity
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-2 col-lg-1 col-xl-1 col-xs-6">
|
||
|
|
<label for="input_switch_base" class="switch switch-base">
|
||
|
|
<input id="input_switch_base" type="checkbox" />
|
||
|
|
<span class="toggle"></span>
|
||
|
|
switch base
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<hr />
|
||
|
|
<h2 id="images">images</h2>
|
||
|
|
<p>img-auto for responsive images (max-width 100%)</p>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<img class="img-auto" alt="35c3 logo" src="img/35C3Logo.svg" />
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<img class="img-auto" alt="35c3 logo with transparent background" src="img/35C3LogoTR.svg" />
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
|
||
|
|
<img class="img-auto" alt="35c3 logo black & white" src="img/35C3LogoBW.svg" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
<h2 id="grid">grid</h2>
|
||
|
|
<p>simple grid layout (default 12, can be configured in sass), border class added separately for visualization,
|
||
|
|
offsets are absolute! <br />
|
||
|
|
responsive classes col-xs-* (< 768px), col-sm-* (>= 768px), col-md-* (>= 922px), col-lg-* (>=
|
||
|
|
1200px),
|
||
|
|
col-xl-* (>= 1800px) </p>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-1 border text-breakline">col-1</div>
|
||
|
|
<div class="col-11 border text-breakline">col-11</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-1 col-offset-11 border text-breakline">col-1 col-offset-11</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-2 border text-breakline">col-2</div>
|
||
|
|
<div class="col-10 border text-breakline">col-10</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-2 col-offset-10 border text-breakline">col-2 col-offset-10</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-3 border text-breakline">col-3</div>
|
||
|
|
<div class="col-9 border text-breakline">col-9</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-3 col-offset-9 border text-breakline">col-3 col-offset-9</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-4 border text-breakline">col-4</div>
|
||
|
|
<div class="col-8 border text-breakline">col-8</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-4 col-offset-8 border text-breakline">col-4 col-offset-8</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-5 border text-breakline">col-5</div>
|
||
|
|
<div class="col-7 border text-breakline">col-7</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-5 col-offset-7 border text-breakline">col-5 col-offset-7</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-6 border text-breakline">col-6</div>
|
||
|
|
<div class="col-6 border text-breakline">col-6</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-6 col-offset-6 border text-breakline">col-6 col-offset-6</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-7 border text-breakline">col-7</div>
|
||
|
|
<div class="col-5 border text-breakline">col-5</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-7 col-offset-5 border text-breakline">col-7 col-offset-5</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-8 border text-breakline">col-8</div>
|
||
|
|
<div class="col-4 border text-breakline">col-4</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-8 col-offset-4 border text-breakline">col-8 col-offset-4</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-9 border text-breakline">col-9</div>
|
||
|
|
<div class="col-3 border text-breakline">col-3</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-9 col-offset-3 border text-breakline">col-9 col-offset-3</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-10 border text-breakline">col-10</div>
|
||
|
|
<div class="col-2 border text-breakline">col-2</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-10 col-offset-2 border text-breakline">col-10 col-offset-2</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-11 border text-breakline">col-11</div>
|
||
|
|
<div class="col-1 border text-breakline">col-1</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-11 col-offset-1 border text-breakline">col-11 col-offset-1</div>
|
||
|
|
</div>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-12 border text-breakline">col-12</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Nested example</p>
|
||
|
|
<div class="row section">
|
||
|
|
<div class="col-7">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-2 border text-breakline">col-2 inside col-7</div>
|
||
|
|
<div class="col-4 col-offset-6 border text-breakline">col-4 col-offset-6 inside col-8</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
<h2 id="other">other</h2>
|
||
|
|
<h3>container</h3>
|
||
|
|
<p>container class centered page with 97% of screen limits at 768px, 992px, 1200px and 1800</p>
|
||
|
|
<h3>section</h3>
|
||
|
|
<p>adds a margin of 1em to start and end</p>
|
||
|
|
<h3>border</h3>
|
||
|
|
<p class="border">border</p>
|
||
|
|
<p class="border-fresh">border-fresh</p>
|
||
|
|
<p class="border-hope">border-hope</p>
|
||
|
|
<p class="border-glint">border-glint</p>
|
||
|
|
<p class="border-beat">border-beat</p>
|
||
|
|
<p class="border-tenacity">border-tenacity</p>
|
||
|
|
<p class="border-base">border-base</p>
|
||
|
|
<h3>horizontal line</h3>
|
||
|
|
<hr />
|
||
|
|
<hr class="hr-fresh" />
|
||
|
|
<hr class="hr-hope" />
|
||
|
|
<hr class="hr-glint" />
|
||
|
|
<hr class="hr-beat" />
|
||
|
|
<hr class="hr-tenacity" />
|
||
|
|
<hr class="hr-base" />
|
||
|
|
<h3>visibility</h3>
|
||
|
|
<table class="table text-center">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>< 768px</th>
|
||
|
|
<th>>= 768px</th>
|
||
|
|
<th>>= 922px</th>
|
||
|
|
<th>>= 1200px</th>
|
||
|
|
<th>>= 1800px</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>visible</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-xs</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-sm</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-md</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-lg</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-xl</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>hidden</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>hidden-xs</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>hidden-sm</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>hidden-md</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>hidden-lg</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>hidden-xl</th>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<table class="table text-center">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>css</th>
|
||
|
|
<th>screen</th>
|
||
|
|
<th>print</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>visible, visible-*, visible-block, visible-*-block</th>
|
||
|
|
<td>display: block;</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-inline, visible-*-inline</th>
|
||
|
|
<td>display: inline;</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-inline-block, visible-*-inline-block</th>
|
||
|
|
<td>display: inline-block;</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>hidden-print</th>
|
||
|
|
<td></td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-print, visible-print-block</th>
|
||
|
|
<td>display: block;</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-print-inline</th>
|
||
|
|
<td>display: inline;</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>visible-print-inline-block</th>
|
||
|
|
<td>display: inline-block;</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-beat" alt="not visible">☐</span>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<span class="text-hope" alt="visible">☑</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>float</h3>
|
||
|
|
<p class="float-left">float-left</p>
|
||
|
|
<p class="float-right">float-right</p>
|
||
|
|
<p class="clear">clear</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|