Trovandosi spesso a dover realizzare progetti “from scratch” diventa quasi obbligatorio avere una serie di risorse pronte all’uso.

Una di queste è sicuramente il Css reset di Eric Meyer, una serie di istruzioni css che permettono di resettare gli stili di default del browser per ovviare a classiche incompatibilità ma anche per introdurre il supporto ad elementi html5 ed iniziare con un ambiente di lavoro più “pulito”.

Nel tempo al codice di Eric Meyer ho aggiunto parti su parti (media query, clearfix, align immagini ecc…), ottimizzandolo secondo le mie necessità… perchè non condividere il risultato, non si sa mai che possiate aiutarmi a migliorarlo o semplicemente possa esservi utile in qualche nuovo progetto web.

Fatemi sapere che ne pensate nei commenti e… buon divertimento!

/*
Theme Name: Reset css
Theme URI: http://codeb.it
Description: Another WordPress reset theme
Author: Alessandro Benoit
Author URI: http://codeb.it
Version: 1.0
*/

/* Reset CSS by Eric Meyer (customized) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, h7, 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; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; -webkit-backface-visibility: hidden; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { resize: vertical; }

/* Scrollbar hack */
html { height: 101%; }

/* Basic typo */
strong { font-weight: 800; }
em { font-style: oblique; }
small { font-size: 80%; }

/* Images that fit and align */
img { border: 0; max-width: 100%; vertical-align: middle; height: auto; }
img.alignright { margin:0 0 1em 1em; }
img.alignleft { margin:0 1em 1em 0; }
img.aligncenter { display: block; margin: 1em auto; }

/* Float */
.alignright { float:right; }
.alignleft { float:left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Cursor */
a[href], input[type='submit'], input[type='image'], button, .pointer { cursor: pointer; }

/* Clearfix hack */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
.cf { zoom:1; }

/* Your code goes here
-------------------------------------------------*/

/* Font family */
html, button, input, select, textarea { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

/* Media Queries
-------------------------------------------------*/

/* Tablet Landscape */
@media only screen and (max-width : 1024px) { }

/* Tablet Portrait */
@media only screen and (max-width : 768px) { }

/* Mobile Landscape */
@media only screen and (max-width : 480px) { }

/* Mobile Portrait */
@media only screen and (max-width : 320px) { }

/* Print */
@media print {

    * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }

    /* On print append the url to links */
    a:after { content: " [" attr(href) "] "; }

}

Se preferite potete scaricare il file direttamente.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *