Skip to content

Instantly share code, notes, and snippets.

View finteractive's full-sized avatar

Aidan Foster finteractive

17 followers · 6 following
View GitHub Profile
@finteractive
finteractive / SassMeister-input-HTML.html
Last active January 3, 2016 20:18
Example 1 - Plain old CSS before doing any SASS, Adding Variables
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
@finteractive
finteractive / SassMeister-input-HTML.html
Created January 20, 2014 02:03
2. Selector nesting and magic "&" selector, native SASS function
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
@finteractive
finteractive / SassMeister-input-HTML.html
Last active January 3, 2016 20:19
3. Introducing @extend
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
@finteractive
finteractive / SassMeister-input-HTML.html
Created January 20, 2014 03:01
4. %placeholders with @extends
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
@finteractive
finteractive / SassMeister-input-HTML.html
Created January 20, 2014 03:04
5. Compass & Custom Mixins
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
@finteractive
finteractive / SassMeister-input-HTML.html
Created January 20, 2014 03:36
6. Breakpoint Gem - https://github.com/Team-Sass/breakpoint
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
@finteractive
finteractive / SassMeister-input-HTML.html
Created April 30, 2014 17:17
Message Box: Demos Compass, Mixins, Variables, Extends
<html>
<body>
<div class="message-box">Hey Something happened</div>
<div class="message-box--success">Yay something worked!</div>
<div class="message-box--error">Warning Something is bad here <a href="#">Details</a></div>
<footer>&copy; 2014 - Someone <a href="#">legal link</a></a> </footer>
</body>
</html>
@finteractive
finteractive / SassMeister-input-HTML.html
Created April 30, 2014 18:26
Compass Vertical Rhythm Demo
<body>
<article>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod lacus nec sapien aliquet sollicitudin. Sed varius tempor lacus a varius. Nunc rutrum sollicitudin lectus, eleifend pretium lectus mollis quis. Aliquam suscipit ac nibh vel vehicula. Nam tellus nunc, euismod eu sodales in, feugiat eget justo. Suspendisse non orci a turpis imperdiet placerat sit amet quis nisi. Integer eu posuere dolor, a condimentum sem. Vestibulum rutrum lectus ut sem mollis, et placerat felis semper. Nam eu nulla non ante ullamcorper luctus. Curabitur at adipiscing ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque adipiscing tellus et augue elementum auctor. Aliquam a elit commodo, fringilla ligula vel, malesuada augue. Quisque fermentum congue urna ut varius. Morbi ut auctor nibh</p>
</article>
<aside>
<h2>Aside Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. uismod lacus ne
@finteractive
finteractive / SassMeister-input-HTML.html
Created May 1, 2014 15:37
Toolkit Gem v2.x - Mini Demo
<html>
<body>
<article>
<div class="youtube-video">
<iframe width="400px" height="300px"
src="https://www.youtube.com/embed/INscMGmhmX4">
</iframe>
</div>
@finteractive
finteractive / layout-2col-rendered.html
Last active August 29, 2015 14:00
Layout Grid (BEM/SMACSS Style)
<div class="l-region-2cols--1-2">
<div class="panel-pane">
<h2 class="panel-title">Tardar Sauce</h2>
<div class="panel-content">Grumpy Cat, real name Tardar Sauce, is a cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</div>
</div>
<div class="panel-pane">
<h2 class="panel-title">Tardar Sauce</h2>
<div class="panel-content">Grumpy Cat, real name Tardar Sauce, is a cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</div>