carlos-sanchez

.gradient(@start, @end) {
  background-color: mix(@start, @end);
  *background-color: @end;
  background-image: -moz-linear-gradient(top, @start, @end);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@end));
  background-image: -webkit-linear-gradient(top, @start, @end);
  background-image: -o-linear-gradient(top, @start, @end);
  background-image: linear-gradient(to bottom, @start, @end);
  background-repeat: repeat-x;

carlos-sanchez

/* Margin collapsing is a feature, not a bug, and—as we can see here—it ensures a better distribution of boxes across the vertical axis.

So for this reason, I think it is better to favor display:block instead of display:table in "clearfix" rules.
As in:
*/

.clearfix:after {
    content:" ";
    display:block;
    clear:both;

carlos-sanchez

/*

A CSS preprocessor allows you to use variables, mixins, functions, 
operations, nesting, importing and much more. For that concern, 
I personally use LESS but there are also Sass or Stylus which might fit your needs.

Anyway, I’m only going to talk about mixins here. Mixins are like variables but for whole classes. 
The best point of mixins is that they can behave like functions and have parameters.

Let’s start with something very simple: a mixin to handle all vendor prefixes whenever 

carlos-sanchez

/* SELECTORES DE ATRIBUTOS */

/*info ampliada en http://www.netmagazine.com/tutorials/discover-power-css3-selectors */


/*
elemento[atributo^="valor"]{...}
selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
Ejemplo: Selecciona todos los enlaces que apuntan a una dirección de correo electrónico
*/

carlos-sanchez

input[type="text"] {
    /* */
}
input[type="submit"]{
    /* */
}

input[type=button]{
  /* */
}

carlos-sanchez

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

carlos-sanchez

@media print {
    * {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
 
        /* Images, vectors and such */
        filter: Gray();                          /* IE4-8: depreciated */
        filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */

carlos-sanchez

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */

carlos-sanchez

    /* CSS text gradients */
    h2[data-text] {
    position: relative;
    }
    h2[data-text]::after {
    content: attr(data-text);
    z-index: 10;
    color: #e3e3e3;
    position: absolute;
    top: 0;

carlos-sanchez

h1 {
   text-indent:-9999px;
   margin:0 auto;
   width:400px;
   height:100px;
   background:transparent url("images/logo.jpg") no-repeat scroll;
}