Skip to content

Instantly share code, notes, and snippets.

@RockyMyx

RockyMyx/CSS: css-calc.html

Last active December 26, 2016 02:58
Show Gist options
  • Save RockyMyx/5b024a063027d0564f8d917de875cf18 to your computer and use it in GitHub Desktop.
Save RockyMyx/5b024a063027d0564f8d917de875cf18 to your computer and use it in GitHub Desktop.
Download ZIP
CSS calc
Raw
CSS: css-calc.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Picnic CSS Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="css, library, picnic, picnicss, light">
<meta name="description" content="A lightweight CSS library">
<link rel="stylesheet" href="web/style/style.min.css">
<link rel="stylesheet" media="bogus">
</head>
<body>
<nav><a href="/" class="brand"><span>Picnic CSS</span></a>
<input id="bmenu" type="checkbox" class="show">
<label for="bmenu" class="burger toggle pseudo button">menu</label>
<div class="menu"><a href="/tests" class="pseudo button icon-help-circled">Test</a><a href="https://github.com/picnicss/picnic" target="_blank" class="pseudo button icon-g">GitHub</a><a href="/documentation" class="button icon-file-code">Documentation</a></div>
</nav>
<main class="intro test">
<h1>Testing Picnic CSS</h1>
<p>A small testing page to see how elements behave across devices</p>
<!-- Testing the module -->
<h2 id="button">Button types and colors</h2>
<div>
<button>Button</button>
<button class="success">Button</button>
<button class="warning">Button</button>
<button class="error">Button</button>
<button class="pseudo">Button</button>
<button disabled>Button</button>
</div>
<div>
<a class="button">Link</a>
<a class="button success">Link</a>
<a class="button warning">Link</a>
<a class="button error">Link</a>
<a class="button pseudo">Link</a>
<a class="button" disabled>Link</a>
</div>
<div>
<input type="submit" value="Submit" />
<input type="submit" class="success" value="Submit" />
<input type="submit" class="warning" value="Submit" />
<input type="submit" class="error" value="Submit" />
<input type="submit" class="pseudo" value="Submit" />
<input disabled type="submit" value="Submit" />
</div>
<div>
<label>
<input type="checkbox" />
<span class="toggle button">Toggle</span>
</label>
<label>
<input type="checkbox" />
<span class="toggle button success">Toggle</span>
</label>
<label>
<input type="checkbox" />
<span class="toggle button warning">Toggle</span>
</label>
<label>
<input type="checkbox" />
<span class="toggle button error">Toggle</span>
</label>
<label>
<input type="checkbox" />
<span class="toggle button pseudo">Toggle</span>
</label>
<label>
<input disabled type="checkbox" />
<span disabled class="toggle button">Toggle</span>
</label>
</div>
<h2 id="card">Card</h2>
<p>
<div class="flex three">
<div>
<article class="card">
<img src="web/img/forest.jpg">
<section>This is a nice forest. What do you want to do with it?</section>
<footer>
<button>Enjoy</button>
<button class="dangerous">Go away</button>
</footer>
</article>
</div>
<div>
<article class="card">
<header>
<h3>A more elaborated card</h3>
</header>
<section>It has some text</section>
<footer>
And even a footer!
</footer>
</article>
<div>
<input type="checkbox" id="cardtoggle">
<article class="card">
<p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
<label for="cardtoggle" class="close">×</a>
</article>
</div>
</div>
<div>
<input id="cardtoggle2" type="checkbox" name="name">
<article class="card">
<header>
<h1>Header 1</h1>
<label for="cardtoggle2" class="close">×</a>
</header>
</article>
<input id="cardtoggle3" type="checkbox" name="name2">
<article class="card">
<header>
<h2>Header 2</h2>
<label for="cardtoggle3" class="close">×</label>
</header>
</article>
<article class="card">
<header>
<h3>Header 3</h3>
<a class="close">×</a>
</header>
</article>
<article class="card">
<header>
<h4>Header 4</h4>
<a class="close">×</a>
</header>
</article>
</div>
</div>
<div class="row">
<div class="card">
<p>This is a one line card</p>
<a class="close">×</a>
</div>
</div>
</p>
<h2 id="checkbox">Checkbox</h2>
<label>
<input type="checkbox">
<span class="checkable">Check me out (;</span>
</label>
<br>
<input id="checktest" type="checkbox" checked>
<label for="checktest" class="checkable">Uncheck me</label>
<h2 id="dropimage">Dropimage</h2>
<div class="flex three">
<div>
<label class="dropimage" style="background-image: url('web/img/forest.jpg');">
<input name="filea" title="Drop image or click me" type="file">
</label>
</div>
<div>
<label class="dropimage">
<input name="fileb" title="Drop image or click me" type="file">
</label>
</div>
<div>
<label class="dropimage">
<input name="filec" title="Drop image or click me" type="file">
</label>
</div>
</div>
<script>
window.onload = function() {
[].forEach.call(document.querySelectorAll('.dropimage'), function(img) {
img.onchange = function(e) {
var inputfile = this,
reader = new FileReader();
reader.onloadend = function() {
inputfile.style['background-image'] = 'url(' + reader.result + ')';
}
reader.readAsDataURL(e.target.files[0]);
}
});
};
</script>
<h2 id="grid">Grid</h2>
<div class="flex two four-500 six-800 demo">
<div><span>1</span></div>
<div><span>2</span></div>
<div class="full half-500 third-800"><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div class="off-half off-fourth-500 off-sixth-800"><span>10</span></div>
</div>
<h2 id="input">Input</h2>
<div class="flex two">
<div>
<input placeholder="Full name" />
</div>
<div>
<input type="number" placeholder="Number" />
</div>
</div>
<div class="flex two">
<div>
<input type="email" placeholder="Email" />
</div>
<div>
<input type="password" placeholder="Password" />
</div>
</div>
<div class="flex two">
<div>
<input type="file" />
</div>
<div>
<input type="color" />
</div>
</div>
<div class="flex one">
<div>
<textarea placeholder="Full description"></textarea>
</div>
</div>
<h2 id="label">Label</h2>
<p>
<h1>h1 is important
<span class="label">Normal</span>
</h1>
<h2>h2 is important too
<span class="label success">Success</span>
</h2>
<h3>Is h3 important?
<span class="label warning">Warning</span>
</h3>
<h4>h4 is not so important
<span class="label error">Error</span>
</h4>
<p>p is normal text
<span class="label">Normal</span>
</p>
</p>
<h2 id="modal">Modal</h2>
<p>
<label for="modal_1" class="button">
Show modal
</label>
</p>
<div class="modal">
<input id="modal_1" type="checkbox" />
<label for="modal_1" class="overlay"></label>
<article>
<header>
<h3>Great offer</h3>
<label for="modal_1" class="close">×</label>
</header>
<section class="content">
We have a special offer for you. I am sure you will love it! However this does look spammy...
</section>
<footer>
<a class="button" href="#">See offer</a>
<label for="modal_1" class="button dangerous">
Cancel
</label>
</footer>
</article>
</div>
<h2 id="nav">Nav</h2>
<p>
<nav style="position: relative; z-index: 9">
<a href="#" class="brand">
<img class="logo" src="/web/img/basket.png" />
<span>Picnic CSS</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenu" class="burger pseudo button toggle">menu</label>
<div class="menu">
<a href="#" class="pseudo button icon-picture">Demo</a>
<a href="#" class="button icon-puzzle">Plugins</a>
</div>
</nav>
</p>
<h2 id="radio">Radio button</h2>
<p>
<label>
<input type='radio' name="radiodemo">
<span class="checkable">Select me</span>
</label>
</p>
<p>
<label>
<input checked type='radio' name="radiodemo">
<span class="checkable">Or me</span>
</label>
</p>
<h2 id="select">Select</h2>
<p>
<select>
<option>Select an option</option>
<option>Good option</option>
<option>Nice option</option>
<option>Cheap option</option>
</select>
</p>
<!-- Testing the module -->
<h2 id="stack">Stack</h2>
<h3>Buttons stack</h3>
<div class="flex four">
<div>
<span class="stack button icon-puzzle">Plugins</span>
<span class="stack button icon-picture">Demo</span>
<span class="stack button icon-help-circled">Test</span>
</div>
<div>
<label class="stack">
<input type="radio" name="stack" checked/>
<span class="button toggle icon-puzzle">Plugins</span>
</label>
<label class="stack">
<input type="radio" name="stack" />
<span class="button toggle icon-picture">Demo</span>
</label>
<label class="stack">
<input type="radio" name="stack" />
<span class="button toggle icon-help-circled">Test</span>
</label>
</div>
<div>
<label class="stack">
<input type="checkbox" checked/>
<span class="button toggle icon-puzzle">Plugins</span>
</label>
<label class="stack">
<input type="checkbox" checked/>
<span class="button toggle icon-picture">Demo</span>
</label>
<label class="stack">
<input type="checkbox" />
<span class="button toggle icon-help-circled">Test</span>
</label>
</div>
<div>
<span class="stack pseudo button icon-puzzle">Plugins</span>
<span class="stack pseudo button icon-picture">Demo</span>
<span class="stack pseudo button icon-help-circled">Test</span>
</div>
</div>
<h3>Image stack</h3>
<div class="flex four">
<div>
<img class="stack" src="web/img/forest.jpg">
<a class="stack button">Forest</a>
</div>
<div>
<img class="stack" src="web/img/balloon.jpg">
<a class="stack button">Balloon</a>
</div>
<div>
<img class="stack" src="web/img/lake.jpg">
<a class="stack button">Lake</a>
</div>
<div>
<img class="stack" src="web/img/halong.jpg">
<a class="stack button">Halong bay</a>
</div>
</div>
<h3>Form stack</h3>
<div class="flex four">
<div>
<input class="stack" placeholder="Name" />
<input class="stack" type="email" placeholder="Email" />
<input class="stack" type="password" placeholder="Password" />
</div>
<div>
<select class="stack">
<option>Select an option</option>
<option>Good option</option>
<option>Nice option</option>
<option>Cheap option</option>
</select>
<select class="stack">
<option>Select an option</option>
<option>Good option</option>
<option>Nice option</option>
<option>Cheap option</option>
</select>
<select class="stack">
<option>Select an option</option>
<option>Good option</option>
<option>Nice option</option>
<option>Cheap option</option>
</select>
</div>
<div>
<textarea class="stack" placeholder="Textarea"></textarea>
<textarea class="stack" placeholder="Textarea"></textarea>
<textarea class="stack" placeholder="Textarea"></textarea>
</div>
<div>
<label class="dropimage stack">
<input name="filea" title="Drop image or click me" type="file">
</label>
<label class="dropimage stack">
<input name="filea" title="Drop image or click me" type="file">
</label>
<label class="dropimage stack">
<input name="filea" title="Drop image or click me" type="file">
</label>
</div>
</div>
<h2 id="table">Table</h2>
<table class="primary">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Francisco</td>
<td>Valencia, Spain</td>
<td>23</td>
</tr>
<tr>
<td>Eve</td>
<td>San Francisco, USA</td>
<td>22</td>
</tr>
<tr>
<td>Martin</td>
<td>New York, USA</td>
<td>45</td>
</tr>
<tr>
<td>Sarah</td>
<td>London, UK</td>
<td>25</td>
</tr>
</tbody>
</table>
<h2>Tab</h2>
<div class="flex two">
<div>
<div class="tabs three">
<input id='tab-1' type='radio' name='tabgroupB' checked />
<label class="pseudo button toggle" for="tab-1">Forest</label>
<input id='tab-2' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-2">Lake</label>
<input id='tab-3' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-3">Balloon</label>
<div class="row">
<div>
<img src="web/img/forest.jpg">
</div>
<div>
<img src="web/img/lake.jpg">
</div>
<div>
<img src="web/img/balloon.jpg">
</div>
</div>
</div>
</div>
<div>
<div class="tabs three" style="text-align: center;">
<input id='tabC-1' type='radio' name='tabgroupC' checked />
<label class="pseudo button toggle" for="tabC-1">1</label>
/
<input id='tabC-2' type='radio' name='tabgroupC'>
<label class="pseudo button toggle" for="tabC-2">2</label>
/
<input id='tabC-3' type='radio' name='tabgroupC'>
<label class="pseudo button toggle" for="tabC-3">3</label>
<div class="row">
<div>
<div class="card" style="margin: 0 20px;">
<header>
<h3>Super important notice!</h3>
</header>
<p>Thank you for registering! By doing so you agree to the <a href="#">Terms and conditions</a></p>
<footer>
<label class="button" for="tabC-2">Agree</label>
</footer>
</div>
</div>
<div>
<div class="card" style="margin: 0 20px;">
<header>
<h3>Your basic data</h3>
</header>
<section>
<input type="text" placeholder="Full Name">
</section>
<section>
<div class="select">
<select>
<option>Where did you find us?</option>
<option>Facebook</option>
<option>Twitter</option>
<option>Linkedin</option>
</select>
</div>
</section>
<footer>
<label class="button" for="tabC-3">Next</label>
<label class="button dangerous" for="tabC-1">Back</label>
</footer>
</div>
</div>
<div>
<div class="card" style="margin: 0 20px;">
<header>
<h3>Create account</h3>
</header>
<section>
<input type="email" placeholder="Email">
</section>
<section>
<input type="password" placeholder="Password">
</section>
<footer>
<button class="success">Finish!</button>
<label class="button dangerous" for="tabC-2">Back</label>
</footer>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="tabs two">
<input id='tabA-1' type='radio' name='tabgroupA' checked />
<label class="button toggle" for="tabA-1">Tab 1</label>
<input id='tabA-2' type='radio' name='tabgroupA'>
<label class="button toggle" for="tabA-2">Tab 2</label>
<div class="row">
<div class='tab'>
<div>
<h2>This is the first tab</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="tab">
<div>
<h2>This is the second tab</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="tabs four">
<input id='tabD-1' type='radio' name='tabgroupD' checked />
<label class="pseudo button toggle" for="tabD-1">•</label>
<input id='tabD-2' type='radio' name='tabgroupD'>
<label class="pseudo button toggle" for="tabD-2">•</label>
<input id='tabD-3' type='radio' name='tabgroupD'>
<label class="pseudo button toggle" for="tabD-3">•</label>
<input id='tabD-4' type='radio' name='tabgroupD'>
<label class="pseudo button toggle" for="tabD-4">•</label>
<div class="row">
<div class='tab'>
<div>
<h2>This is the first tab</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="tab">
<div>
<h2>This is the second tab</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
<div class='tab'>
<div>
<h2>This is the third tab</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="tab">
<div>
<h2>This is the fourth tab</h2>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 id="tooltip">Tooltip</h2>
<p>
<button data-tooltip="This is a great tooltip" class="tooltip-left">
Left
</button>
<button data-tooltip="This is a great tooltip">
Bottom (default)
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-top">
Top
</button>
<button data-tooltip="This is a great tooltip" class="tooltip-right">
Right
</button>
</p>
<br>
<br>
<br>
</main>
<script>
window.onload = function() {
// Dropimage handler
[].forEach.call(document.querySelectorAll('.dropimage'), function(img) {
img.onchange = function(e) {
var inputfile = this,
reader = new FileReader();
reader.onloadend = function() {
inputfile.style['background-image'] = 'url(' + reader.result + ')';
}
reader.readAsDataURL(e.target.files[0]);
}
});
};
</script>
<script src="/web/tracking.js" defer async></script>
<script src="https://comments.network/comments.js" defer async></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment