Skip to content

Instantly share code, notes, and snippets.

View MagicJoseph's full-sized avatar

MagicJoseph

1 follower · 0 following
View GitHub Profile
@MagicJoseph
MagicJoseph / index.html
Last active September 17, 2015 09:28
Sassy buttons
<!DOCTYPE html>
<html>
<head>
<title>Sassy buttons</title>
<link rel="stylesheet" href="sassy-buttons.css">
</head>
<body>
<div>
<button class="button primary">Button primary</button>
<button class="button default">Button default</button>
@MagicJoseph
MagicJoseph / gridGenerator.css
Last active August 29, 2015 14:14
Generated by SassMeister.com.
.row {
position: relative;
width: 100%;
max-width: 940px;
margin-bottom: 20px;
}
.row:before, .row:after {
content: "";
display: table;
}
@MagicJoseph
MagicJoseph / index.html
Last active August 29, 2015 14:08
Sass colorful stripe generator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stripe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="stripe-container">
@MagicJoseph
MagicJoseph / sprite-icons-output.css
Last active August 29, 2015 14:07
Compass sprite icons generator
.icon {
margin: 0 5px 0 0;
background: url('/imgs/icons-s4dee938f6c.png') no-repeat;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
}
@MagicJoseph
MagicJoseph / circle.scss
Last active August 29, 2015 14:07
Sass circle generator - Compass library is required
@import "compass";
$circle-width: 25px !default; // cicrle width
$circle-height: $circle-width !default; // circle height must be same as width
$circle-bg: #fff !default; // background color is white
$circle-radius: 50% !default; // create circle with border-radius property
$circle-line-height: $circle-width; // circle line-height must be same as wdith
$circle-text-align: center !default; // text will be center
@mixin circle($cw:$circle-width, $ch:$cw, $cb:$circle-bg, $clh:$cw, $cta:$circle-text-align, $cr:$circle-radius) {
@MagicJoseph
MagicJoseph / base.css
Last active August 29, 2015 14:06
funtime-1.1.css
/*==========BASE CSS WITH BASIC RESET==========*/
/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
@MagicJoseph
MagicJoseph / README
Last active August 29, 2015 14:05
Foundation 5 with Compass - Gradient button extension
HOW TO USE ?
Please add this file in to your Foundation 5 project.
You must to add this file in to path_to_your_project/bower_components/foundation/scss
Next add this @import path to your _foundation.scss file.
@import "foundation/components/buttons-with-gradient";
Please create your custom button .class and @include btn-gradient-style @mixin in _buttons-with-gradient.scss file.
Set your $color-start value for example #e74c3c.