Combing YUI and CSS Tools reset.css

Jan 12, 2010

“ ”
The Reset stylesheet is used to reduce browser inconsistencies in things like default line-heights, margins, padding, font-sizes, etc. These styles are intentionally very generic and are based off the "CSS Tools reset.css" and the "Yahoo YUI reset.css" files, which can be found below:

CSS Tools reset.css
http://meyerweb.com/eric/tools/css/reset/

Yahoo YUI reset.css
http://developer.yahoo.com/yui/build/reset/reset.css

Reset.css is a necessary evil in modern web design. With 6-8 common browsers all in use at one time there are inconsistencies in default settings between the browsers. IE6 is still remains the predator that causes the most issues, but each browser has its own quirks, and this CSS basically "resets" the default styles to something more manageable to work with from the start. Using either of the above, or the below CSS is a starting point for any project, the first bit of CSS your HTML should read to get started. From here you can build your site out to be whatever you want, and are able to avoid many cross-browser problems that would otherwise occur. With that said, here is my reset.css, a combination of the two above mentioned stylesheets.

/* Version 1.0 Aerial Perspective combined YUI and CSS Tools reset.css*/
/** 01/11/10**/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 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 {
margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; color:#000000; }

table { border-collapse:collapse; border-spacing:0; }

body { line-height:1; }

fieldset, img { border:0; }

address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style:inherit; font-weight:inherit; }

ins { text-decoration:none; }
del { text-decoration:line-through; }

ol, ul { list-style:none; }
li { list-style:none; }

caption, th { text-align:left; }

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }

abbr, acronym { border:0; font-variant:normal; }

sup { vertical-align:baseline; }

sub { vertical-align:baseline; }

/* remember to define focus styles! */
:focus { outline:0; }

/*because legend doesn't inherit in IE */
legend { color:#000; }

input, button, textarea, select, optgroup, option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }

/*@purpose To enable resizing for IE @branch For IE6-Win, IE7-Win */
input, button, textarea, select { *font-size:100%; }



Download a copy without having to copy and paste by clicking below:
my combined version of reset.css

Labels: ,

posted by Tim Avery at 12:14 AM  -  0 Comments ©

 

Our very own "Share This" like the AddThis Widget - Preview

May 13, 2009

“ ”
We are currently developing our own "Share This" widget like the popular Add This Widget that you find all over the web. We were asked to develop this because the "Add This" widget pulls analytic information to addthis.com. With our widget the analytics information is yours and yours only! This is highly customizable and works in all the testing we have done for it. We are still working out how the final skin will look and what the "Share This" button will look like, but otherwise, it's pretty much there!

Here is a sneak peak:




As you can see the widget is powered via jquery--a script library that is seemingly endless. I put this together using a tutorial and information provided by Mark S. Kolich from http://mark.kolich.com. (That links to the actual post about the widget). We have styled even our basic design up just a little from his, but the programming side and info he provided was the key to making this work! So thank you Mark for the work you did--in the end it helped us develop a cool tool!

Our final version with code for a free download will be made available in the coming weeks, so keep your eyes peeled for it!

Labels: , ,

posted by Tim Avery at 11:39 AM  -  0 Comments ©

 
 
 
 

What is Aerial Perspective? «

With constant changing technology, Aerial Perspective combines a modern style and form with an organic and yet fresh view of the web. We devise a plan specific to our clients, whom we like to think of as our friends, we then design an identity based off their needs and our vision, and finally we deliver a working solution to their needs, always open to comments and recommendations, and willing to go above and beyond the competitors.


Past Clients«

Previous Posts«

Archives«




Powered by Blogger

Subscribe to
Posts [Atom]

About Aerial Perspective

 

Coming Soon

Contact