CheetoMao’s gists

CheetoMao / SassMeister-input-HTML.html

Created September 19, 2014 00:02

Generated by SassMeister.com.

	<body>
	<section class="Wrapper">
	<h1>Lorem ipsum dolor sit amet</h1>
	<div class="Container">
	<p>Consectetur adipiscing elit. Nulla tristique lorem consequat magna ultrices, eget lobortis erat elementum. Pellentesque gravida lacinia vehicula. Cras ut nibh eu elit maximus iaculis. Cras volutpat tortor eu ipsum bibendum pulvinar. Phasellus at scelerisque leo. Vestibulum ornare volutpat dictum.</p>
	<button class="base-color">Button</button>
	<button class="secondary-color">Secondary Button</button>
	</div>
	</section>
	</body>

CheetoMao / SassMeister-input-HTML.html

Created September 19, 2014 00:21

Generated by SassMeister.com.

	<body>
	<div class="base-color"></div>
	<div class="complement-color"></div>
	<div class="mix-color"></div>
	</body>

CheetoMao / SassMeister-input-HTML.html

Created October 3, 2014 16:41

Generated by SassMeister.com.

	<button class="button">.button</button>
	<button class="button--yellow">.button--yellow</button>
	<button class="button_blue">.button_blue</button>
	<button class="button-green">.button-green</button>
	<button class="buttonPink">.buttonPink</button>

CheetoMao / SassMeister-input-HTML.html

Created October 3, 2014 16:44

Generated by SassMeister.com.

	<p>Normally buttons next to each other would double-up on the margin in between them. Using &+& allows you to remove that extra margin when a button is a directly adjacent sibling.</p>
	<button>First Button</button>
	<button>Following Button</button>

CheetoMao / SassMeister-input-HTML.html

Created October 3, 2014 16:46

Generated by SassMeister.com.

	<p>Here is a button, it has a box-shadow that shows up well on lighter colors but it doesn't show up well on darker colors. This is where we can use the reverse nested selector to make a tiny change, darkening the box-shadow, when it's contained in a darker colored container.</p>
	<div class="lite">
	<button class="button-primary">I'm a button</button>
	</div>
	<div class="dark">
	<button class="button-primary">I'm the same kind of button</button>
	</div>

CheetoMao / SassMeister-input-HTML.html

Created October 10, 2014 02:42

Generated by SassMeister.com.

	<body>
	<div class="base">Base Color</div>
	<div class="secondary">Complement Color</div>
	<div class="tertiary">Adjust Hue 180</div>
	</body>

CheetoMao / SassMeister-input-HTML.html

Created October 10, 2014 02:46

Generated by SassMeister.com.

	<body>
	<div class="base">Base Color</div>
	<div class="secondary">Adjust Hue 120</div>
	<div class="tertiary">Adjust Hue 240</div>
	</body>

CheetoMao / SassMeister-input-HTML.html

Last active August 29, 2015 14:07

Generated by SassMeister.com.

	<div>
	<img src="http://placepuppy.it/400/400"/>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum interdum magna eu sagittis. Vivamus gravida odio quis purus consequat aliquet. Nunc vitae ornare erat. Nulla lacinia eleifend nunc, ac dignissim ipsum dictum sit amet. Integer nulla magna, viverra quis diam sed, imperdiet fermentum odio. Ut augue metus, rutrum sit amet condimentum sed, laoreet eu turpis. Donec iaculis sagittis dui, sit amet ultrices leo feugiat quis. Donec turpis tortor, semper nec odio et, vestibulum rutrum magna. Duis quis tellus aliquet nulla bibendum porta. Donec dictum at est ut aliquam. Vestibulum vel justo sed augue hendrerit porttitor. Phasellus feugiat ullamcorper mattis. Praesent ac interdum justo. Phasellus odio metus, maximus a augue non, pulvinar accumsan velit. Proin euismod felis eu cursus posuere.
	Donec sed nibh odio. Donec enim ligula, ullamcorper eu erat at, posuere mollis felis. Morbi mattis placerat imperdiet. Maecenas a risus ut diam ornare

CheetoMao / SassMeister-input-HTML.html

Created October 17, 2014 13:41

Generated by SassMeister.com.

	<h1>Responsive Headers<br>
	without media queries</h1>

CheetoMao / SassMeister-input-HTML.html

Created October 17, 2014 18:30

Generated by SassMeister.com.

	<div class="columns">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque fringilla eleifend. In enim mi, vulputate at pulvinar sit amet, lacinia et sem. Maecenas gravida ipsum massa, in rutrum ex facilisis vitae. Aliquam sit amet vestibulum eros, eu porta eros. Proin sollicitudin tellus in magna venenatis, in finibus libero consectetur. Vestibulum pretium pharetra mi eu commodo. Proin eu finibus ligula. Vivamus euismod interdum ex a dignissim. Aliquam porttitor nisi et pretium porta. Vivamus placerat malesuada tellus. Mauris sed hendrerit libero. Aliquam ut dapibus eros. Sed porta, eros tristique semper rutrum, tellus mauris convallis mauris, sit amet euismod mauris magna non nibh.</p>
	<p>Proin id pellentesque sem. Integer molestie ligula tortor, non pharetra tortor varius non. Integer sapien purus, commodo commodo imperdiet at, suscipit eu erat. Ut tincidunt fermentum justo, nec ultrices lectus egestas ac. Curabitur iaculis, turpis quis varius euismod, magna odio porttitor libe

Laura Eble CheetoMao