Skip to content

Instantly share code, notes, and snippets.

View iamtyce's full-sized avatar

Tyce iamtyce

View GitHub Profile
@iamtyce
iamtyce / rockhammer-respond-to-mixin.scss
Last active December 18, 2015 11:49
Simple mixin to write inline responsive arguments within Rockhammer
// Respond-to mixin for Rock Hammer (https://github.com/malarkey/rock-hammer/)
// Author: @iamtyce
// Original author: @wernah, based on @benschwarz
// ******************** //
// RESPOND TO //
// ******************** //
// Use: @include respond-to(bp5) { }
@mixin respond-to($breakpoint) {
@iamtyce
iamtyce / image-extension-replacement.scss
Last active December 19, 2015 04:29
An ScSS image extension replace mixin designed to serve PNG files to IE8, and SVG to all other browsers
// *************************** //
// IMAGE EXTENSION REPLACEMENT //
// *************************** //
// Use: @include image-background($image: "../lib/img/", $repeat: no-repeat, $position: center center);
@mixin image-background($color: transparent,$image: none,$repeat: no-repeat,$attachment: scroll,$position: center center) {
// Add extension to $image
$image: '#{$image}.#{$imageextension}';
@iamtyce
iamtyce / my-media-queries.scss
Last active December 19, 2015 14:49
Update to @jina's media query Sass mixin for headings to include an overall single base size and percentage increases for different breakpoints
$medium-width: 48em;
$large-width: 62em;
// Base heading sizes
$heading-base: 1.5em;
// ---------------------
// _headings.sass
// Small Default
@iamtyce
iamtyce / hinge-animation.scss
Created August 10, 2013 06:42
To be used with Bourbon @include animation(hinge 20s 1);
// *************** //
// HINGE ANIMATION //
// *************** //
// Timings
$hingefirst: 0;
$hingesecond: 80deg;
$hingethird: 60deg;
$hingefouth: 700px;
@iamtyce
iamtyce / wp-page-addition.php
Created August 10, 2013 06:43
Page Addition Function (WordPress)
<?
// **********************
// PAGE ADDITION FUNCTION
// **********************
if ($_GET['add_pages'] == "true") {
global $current_screen;
$user_id = $_GET['user_id'];
@iamtyce
iamtyce / wp-child-page-query.php
Created August 10, 2013 06:44
WordPress child page query
<?
// Get page data
$post_id = $post->ID;
$page_data = get_page($post_id);
$page_parent = $page_data->post_parent;
$page_template = get_field('template');
// Count how many children belong to this page
$children_args=array(
'sort_column' => 'menu_order',
@iamtyce
iamtyce / dabblet.css
Created September 26, 2013 00:43
HTML5 / CSS3 Circle with Partial Border
/**
* HTML5 / CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
* { margin: 0; padding: 0; }
.circle {
position: relative;
margin: 7em auto;
width: 16em; height: 16em;
border-radius: 50%;
@iamtyce
iamtyce / bootstrap-respond-to-mixin.scss
Last active January 3, 2016 20:09
Simple mixin to write inline responsive arguments within Sass Bootstrap v3
// Respond-to mixin for Bootstrap v3 (Sass) (https://github.com/twbs/bootstrap-sass)
// Author: @iamtyce
// Original author: @wernah, based on @benschwarz
// ******************** //
// RESPOND TO //
// ******************** //
// Use: @include respond-to(screen-xs) { }
@mixin respond-to($breakpoint) {
@iamtyce
iamtyce / rotate-ie.scss
Created January 31, 2014 03:31
Super simple mixin to transform elements in IE8, use alongside your CSS3 transform mixins.
// Rotate (IE)
// Usage: @include rotate-ie(1)
// 1 = 90 degrees
// 2 = 180 degrees
// 3 = 270 degrees
// 4 = 360 degrees
@mixin rotate-ie($value: 0) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$value});
}

CSS3 stamp border

An experiment to try and recreate a stamp style border in CSS3 using only ::before and the element itself

A Pen by Tyce on CodePen.

License.