Free PSDs & Resources for Web Designers by Orman Clark Baseline - a designer framework by ProjetUrbain.com “Real” baseline grid on the web When I first started to design Baseline, I wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attributes — like type leading — kept me from implementing a true grid based approach. I then decided to another look at the basic grid used in print: the baseline grid. Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout. How to use Baseline Baseline can be used in many different ways. Download The .zip file includes the full set of CSS files both for development and deployment, a Photoshop base document and a full set of HTML templates and examples. Going from 0.2 to 0.5 Version 0.5.1
DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 25th January, 2010 Tom Kenny Tutorials HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. View Demo | Download Files (.zip) The HTML <! Download the HTML here (Right-click and save as). First thing first, let’s make sure the code validates with W3C’s experimental HTML5 validator. Good news, it does! The HTML5 Goodness As you can see from the code above there are new tags that you may not be familiar with. Header The first one you’ll notice is <header> and it does exactly what it implies. The header element represents a group of introductory or navigational aids.A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. Nav Section Footer The Form The CSS3 Goodness
960 Grid System 4 outils pour minifier des fichiers PHP, HTML, JS et CSS | Blogdevphp.fr Afin de rendre nos fichiers CSS et JS plus légers, il existe un procédé afin d'alléger le poids de ces fichiers, c'est la minification. Quand vous souhaitez télécharger Jquery, vous avez le choix entre deux versions, d'une part, celle qui est compressée avec l'extension min.js et d'autre part, non compressée avec l'extension js. La version non compréssée va etre utilisée, en phase de développement, en revanche, celle qui est compressée pour la mise en production de votre site. Il existe, des outils en ligne, pour effectuer la minification de ses fichiers. Tinyfier Tinifyer est un outil où on peut minifier ses fichiers HTML, CSS, JS et PHP. Tinifyer est un outil tout-en-un car vous pouvez minifier tous vos fichiers au même endroit. Compress My Code Sur le site, vous pouvez minifier vos fichiers HTML, CSS, JS et du simple texte. Vous pourrez choisir également des options par rapport aux langages proposés. HTML Minifier Online JavaScript/CSS Compressor Conclusion
Pimp Your Tables with CSS3 Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup. We will be applying the -webkit and -moz […] View demoDownload source Today I am going to show you how to use some neat CSS3 properties to beautify your tables. We will be applying the -webkit and -moz gradients for creating a great look without images and learn how to insert content into elements with a specific class. Let’s start with the markup. The Markup The following will be our basic table structure: We have all the elements a table needs, a header, a body and a footer. CSS Table 1 The first table will be in green tones with some gradients for the descriptive cells, the “th” elements. We want to have some space between the table cells, so we will make the border-collapse separate. The th elements of the head will have the following style: CSS Table 2
Blueprint: A CSS Framework | Spend your time innovating, not replicating Dans Tools - Online tools for users and developers. Top 10 CSS Table Designs - Smashing Coding CSS Tutorial 30 Must Have Chrome Extensions For Web Developers - The Web Developer Times Here’s the list of must have chrome extensions for web developers. Many of these are useful to both web developers and designers. All of these help me a lot when I am working on websites. The below list includes different chrome extensions for different tasks. The List: 1. As a web developer you may have come across Yslow. 2. Web Developer is a really useful tool for web developers. 3. What font is an easy to use chrome extension that helps you easily detect font used on an element with just a click. 4. Web Developer Checklist is another great tool that allows you to check your website for completion of different things. 5. Google Font Previewer is one of my favorites. 6. User Agent Switcher is a great tool to check your website for different user agents. 7. fb-flo Fb-Flo is an extension created by Facebook that allows you to edit your applications without reloading your web browsers. 8. Corporate Ipsum is a handy extension that generates lorem ipsum dummy text. 9. 10. 11. 12. 13. 14.