10 Great Tips for Writing Better And More Comprehensive CSS There are many different coding styles, some do not like indentation, some like to capitalize certain things, others like to add more than one element on a line, the main train of thought is they are all after one common thing: organization and better code. Without influencing my coding style, we’ll discuss ten tips for writing better CSS. Let us know what you think in the comment section! See you there ;) Comments Commenting throughout your style sheet significantly helps you locate certain code blocks of CSS quickly and efficiently. Indentation Indentation is another key to keeping your code neatly organized and easy to flip through. Shorthand Code I have seen many style sheets consist of non-shorthand code. One Line per Rule One of the most irritating things to see is multiple rules written out on a single line as if the person who coded it was running out of lines and crammed everything onto several. Hacks Should Stay Out Meaningful Names for Classes and IDs Alphabetical Order
800px ~ Golden grid system | 9columns ~ margin:8px — based on the Golden Grid system You have generated a 800px Golden grid system | 9 columns ~ margin left: 8px The grid result is shown below (or a full screen preview) Follow these instructions to get started: Click here to download the css/xhtml & template files Include the file "800_9_8.css" in the <head> of the HTML page. You may also use the included reset.css and text.css files, or opt to leave them out. [ Click here for more detailed installation instructions ]
BonBon Buttons - Sweet CSS3 buttons There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. No, wait! Before you click that download button and try to use them on your site, please also read the flaws. Markup I get a real kick out of trying to keep the markup minimal, so I'm really happy with the outcome. You can change the look by adding more classes: <a href="" class="button orange glossy">Label</a> Label Icons Accessibility Addingrole="button" makes it more accessible. Looks I tried to avoid any images but couldn't resist adding a PNG for the noise. A border-radius doesn't always need to be rounded. For the colors HSL values are used. I tried to simulate different materials. The glossy shape is created using an :after element with a gradient background on top. Flexibility There is one thing I'm kinda sad about. Note
960 Grid System (CSS layout) How To Design a Website in One Hour For most professional designers, time equals money. Creating the same quality work in less time means you can earn more money -- so there is a significant incentive to work efficiently. In this tutorial I'm going to explain how it's possible to design an entire website in under an hour, and I'll show examples of the site along the entire process and at completion. You probably don't want to do this for any really important projects you're working on, but hopefully this exercise will give you a few tips to make your design process more efficient while still maintaining really high quality work. Okay, let's take a look at how this works: General Principles There are several principles that make it possible to create a website concept in one hour. Separate planning from designingUse pre-made resources for certain design elements (like icons)Collect all resources and plans BEFORE beginning the design 0:00—Kill Distractions 0:05—Plan & Sketch 0:15—Collect All Materials 0:25—Rough Concept
960 Grid System Toolbox & Resources The 960 Grid System was created by Nathan Smith as a way to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 960.gs (or any CSS framework) was primarily developed for rapid prototyping, cutting down on repetitive and tedious tasks, but is also more than suited to be used for any web design project. It will give your site a structured and solid foundation for you to build and style your design upon. In this article, you’ll find tutorials, a showcase of sites designed using the 960.gs, spin offs, basic WP themes built on the 960.gs and possible alternative frameworks, if for some reason you don’t like the 960 grid system. Within the download package there are printable sketch sheets, design layouts and a CSS file that have identical measurements. You have two templates, a 12 column grid divided into portions of 60px and a 16 column grid divided into 40px. Homepage : 960.gs Homepage. Download : Download the 960.gs. 960.gs Tutorials
FORM :: About :: Blog :: How to print from an iPad Anomalies & Curiosities How to print from an iPad We're working on integrating this technology into our latest apps. Comments Click here to leave a comment Klauskerl(at)gm... This is way cool. Archive Latest Tweets 44 years ago The Dirt Left What's The Dirt? If FORM were a person, this would be a little peek into its brain. Find out more about our studio Last Track Played Find FORM on Last.fm Desktop Friday "Mortality" Josh Feb 04, 2011 View More Desktop Fridays Someone Said This is too helpful. Read more Someone Said Blog
Don’t Put Hints Inside Text Boxes in Web Forms By Caroline Jarrett Published: March 21, 2010 This is my first Good Questions column for UXmatters. In this column, I’ll be writing about questions. When communicating with users in one direction, we typically ask them questions—often through forms or surveys. When communication goes in the other direction, we try to respond to users’ questions—both through the design of our Web applications and other products and, sometimes, in assemblies of what we hope will be their Frequently Asked Questions. “Hint text is rarely effective as a way of helping users, but instead becomes a default input.” In January 2010, Janet Six’s column, Ask Matters, “Label Alignment in Long Forms,” included extensive discussion of one of the most frequently asked questions about forms design: where to put labels in relation to their fields. Don’t worry. The short version of my advice: Don’t do it! Read on, and I’ll explain. An Example of a Hint Inside a Text Box Where Did the Idea of Hint Text Come From? Reference
CSS Total Recall #1: The Ultimate Collection of the Best Free Templates 2013 in PSD and HTML/CSS The past leaves its own mark, so it is very useful to look back early in the year, and put up a best-of-collection of remarkable things and resources. May be you have missed something valuable that might come in handy in the near future, probably something that will make your working process more efficient, time-saving and cost-effective. Or be it something that can help to quickly “kickstart” your web project, and is available free of charge and can freely undergo different changes. Read more