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 / gist:3295050
Created August 8, 2012 13:31 — forked from cemeng/gist:2886275
CSS Reading List
@Anderson-Juhasc
Anderson-Juhasc / _retina.scss
Created August 3, 2012 02:31
Compass 0.12 retina mixins
// https://gist.github.com/gists/2879137
// this is for Compass 0.12
/* put this file in your assets/stylesheets/ folder
*
* Example main.scss:
* @import "compass";
* @import "icons/*.png";
* @include all-icons-sprites;
*
@Anderson-Juhasc
Anderson-Juhasc / compass-retina-sprites.scss
Created August 3, 2012 01:41 — forked from thulstrup/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));
@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));
@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 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 / 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 / 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 / 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 / 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