electricg

Copyright (c) 2010-2015 Giulia Alfonsi <[email protected]>

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

electricg

This is a list of free and not free softwares I use on my Mac machines for work. In progress.

• FileZilla http://filezilla-project.org/
• Mozilla Firefox http://www.mozilla.org/en-US/firefox/new/
• Google Chrome https://www.google.com/chrome/
• Google Chrome Canary https://tools.google.com/dlpage/chromesxs/
• Opera http://www.opera.com/
• Sublime Text 2 http://www.sublimetext.com/2
• Node.js http://nodejs.org/

electricg

Due to:

IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property

(more info), the url is kept in a variable, to be easily changed according to the project:

$pie-path: "/myproject/PIE.htc";

No prefix needed unless 2.1 Android and below and 3.2 iOS and below or CSS3PIE for IE8 and below so this mixin is not really needed anymore – more info

electricg

.ciao, %ex2 {
	color: blue;
}
.ciao, %ex { 
	background: blue;
}
.button {
	&:link, &:hover {
		@extend %ex;
	}

electricg

According to the documentation about the history of css3 gradients syntax:

Following the initial Apple proposal, the prefixed variants of the syntax all uses the an defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property.

This means that for the -webkit- syntax the value is equal to

$webkit-angle = ($angle - $right-angle) * 1

where $right-angle: 90deg = 100grad = 0.25turn ≈ 1.5708rad

electricg

/* this is the first sprite, when I'll add more, they will be
all listed here */
.social-nav a {
  background-color: transparent;
  border: 0;
  display: block;
  overflow: hidden;
  *text-indent: -9999px;
}
.social-nav a:before {

electricg

Why I prefer rem over em and inline-block over float

http://jsbin.com/ajituy/2/edit

electricg

My version of the scss mixin and the use of the placeholder selector for the sprite effect.

Original version from https://github.com/jakearchibald/sass-lessons/tree/master/sprite-mixin/style

electricg

#clone for the first time
git clone git://github.com/joyent/node.git
cd node

#update
cd node
git remote update

#switch to the branch with the most stable version - check on the website
#use 'git tag' to see the available versions

electricg

@mixin box-sizing ($box) {
    -webkit-box-sizing: $box;
       -moz-box-sizing: $box;
            box-sizing: $box;
}

@mixin border-radius ($val) {
	-webkit-border-radius: $val;
	   -moz-border-radius: $val;
	        border-radius: $val;