Skip to content

Instantly share code, notes, and snippets.

View Anderson-Juhasc's full-sized avatar
:octocat:
Looking for work

Anderson Juhasc Anderson-Juhasc

:octocat:
Looking for work
204 followers · 212 following
View GitHub Profile
@Anderson-Juhasc
Anderson-Juhasc / 0_selector_hacks.scss
Created June 2, 2012 15:49 — forked from chriseppstein/0_selector_hacks.scss
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
@Anderson-Juhasc
Anderson-Juhasc / arrows.scss
Created June 8, 2012 21:58 — forked from bpainter/arrows.scss
Sass mixin for arrows based on The Shapes of CSS from Chris Coyier http://css-tricks.com/examples/ShapesOfCSS/
// --------------------------------------------------------
// arrows
// --------------------------------------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
// @include arrow(top, #000, 50px);
// }
@Anderson-Juhasc
Anderson-Juhasc / sass_and_less_compared.markdown
Created June 10, 2012 00:41 — forked from chriseppstein/sass_and_less_compared.markdown

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

@Anderson-Juhasc
Anderson-Juhasc / README.md
Created June 11, 2012 19:07 — forked from necolas/README.md
Experimenting with component-based HTML/CSS naming and patterns

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
@Anderson-Juhasc
Anderson-Juhasc / example.html
Created June 12, 2012 14:43 — forked from chriseppstein/example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0068)http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Compose a Vertical Rhythm example</TITLE>
<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
</HEAD><BODY>
<H1>Aboard Minerva off the Coast of New England</H1>
@Anderson-Juhasc
Anderson-Juhasc / gist:2919098
Created June 12, 2012 18:14 — forked from corydorning/Cross-Browser ::before and ::after pseudo-class polyfill
Cross-Browser ::before and ::after pseudo-class polyfill
/* =============================================================================
CSS Declarations
========================================================================== */
/* ==|== The Standard Way =================================================== */
.foo::before {
/* ...css rules... */
}
@Anderson-Juhasc
Anderson-Juhasc / smacss-notes.txt
Created July 4, 2012 20:55 — forked from m0nkey/smacss-notes.txt
SMACSS notes May 18
SMACSS May 18
Part 1
- Don't use .button.large ... no subclassing for size or color definitions, try to use .button-large and sibling classes instead
- Naming convention clarifies intent (you should be able to read semantic HTML or CSS and know what it does)
- Create an internal style guide that the team refers to (!) - relates to docs efforts ongoing
State: active and default states; .tab and .is-tab-active (indication that JS will be used) - isolate JS classes so that you only have to make changes to the CSS
- is- prefix indicates likelihood of JS dependency
@Anderson-Juhasc
Anderson-Juhasc / compass-retina-sprites.scss
Created August 3, 2012 01:41 — forked from Juice10/compass-retina-sprites.scss
Using Compass to generate normal and retina sprite maps
@mixin sprite-background($name, $folder, $sprite-width) {
$sprites: sprite-map("#{$folder}/*.png");
$sprites-retina: sprite-map("#{$folder}@2x/*.png");
background-image: sprite-url($sprites);
background-position: sprite-position($sprites, $name);
background-repeat: no-repeat;
display: inline-block;
height: image-height(sprite-file($sprites, $name));
width: image-width(sprite-file($sprites, $name));
@Anderson-Juhasc
Anderson-Juhasc / _app.scss
Created August 3, 2012 01:41 — forked from mkuprionis/_app.scss
Compass/SASS sprites for different density displays
@import "_mixins.scss";
@mixin app($dpi) {
header {
position: relative;
header .logo {
// Center in header
@include sprt-box-centered($dpi, logo);
@Anderson-Juhasc
Anderson-Juhasc / compass-retina-sprites.scss
Created August 3, 2012 01:41 — forked from alanhogan/compass-retina-sprites.scss
Using Compass to generate normal and retina sprite maps
$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");
@mixin sprite-background($name) {
background-image: sprite-url($sprites);
background-position: sprite-position($sprites, $name);
background-repeat: no-repeat;
display: block;
height: image-height(sprite-file($sprites, $name));
width: image-width(sprite-file($sprites, $name));