Pinboard: bookmarks for tstephens tagged 'css'

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

css grid design framework webdesign
august 2011 by tstephens

copy to mine

An Event Apart: CSS Best Practices

In her Our Best Practices Are Killing Us presentation at An Event Apart in Minneapolis MN, Nicole Sullivan walked through common CSS best practices that have outlived their usefulness and what we can do instead to improve CSS performance and maintenance long term.

css
august 2011 by tstephens

copy to mine

Columnal

A responsive CSS grid system helping desktop and mobile browsers play nicely together.

css development framework grid webdesign
august 2011 by tstephens

copy to mine

IE 8 Thinks All Table Cells Have a Colspan

IE 8 (only) thinks that all table cells have a colspan attribute, whether they do or not. So if you are looking to style table cells uniquely that have that attribute, it's a bit tough.

tables css webdev html
july 2011 by tstephens

copy to mine

DropKick - a jQuery plugin for beautiful dropdowns

Create custom dropdowns with keyboard navigation, degradation, etc.

css html5 jquery plugin
july 2011 by tstephens

copy to mine

CSS Lint
css coding
june 2011 by tstephens

copy to mine

Useful :nth-child Recipes | CSS-Tricks

A simple list of examples of how to use :nth-child and :nth-of-type declarations.

css lists reference
june 2011 by tstephens

copy to mine

ProCSSor - Advanced CSS Prettifier

Looks like a powerful CSS formatter that lets you determine the way you want your CSS to look. Looks worthwhile for a production or debugging scenario.

code css tool tools webdesign
april 2011 by tstephens

copy to mine

CSS3 Patterns Gallery

Gradient wizard Lea Verou compiles all her crazy I-didn't-know-that-was-possible patterns into one library with easy to snag code samples. Make sure to click the patterns for full screen view.

css design patterns tools
april 2011 by tstephens

copy to mine

Setting a Google Map as the Background of your Web Site

Nice tutorial on a great effect for a site background.

css google maps
march 2011 by tstephens

copy to mine

31 CSS Code Snippets

Excellent list of CSS hacks and snippets. Very useful.

cheatsheet code css design web
february 2011 by tstephens

copy to mine

Isotope

David DeSandro has written a pretty cool jQuery plugin that adjusts your layout all sorts of crazy and cool ways. Check out the demos, words just don't work here.

layout jquery javascript css webdev
february 2011 by tstephens

copy to mine

Remove unused CSS - CSS Optimizer

Find the classes and IDs you no longer use. Neat tool.

code css optimization tools webdev
january 2011 by tstephens

copy to mine

CSS3 Submit Button

Create a IE Submit Button natively with CSS. Slick.

css coding design
january 2011 by tstephens

copy to mine

The Flexible Box Model, thank you HTML5

I love this. Gets rid of floats, flexible layouts, browser calculations, etc. Check it out.

html5 layout css
november 2010 by tstephens

copy to mine

SlickMap CSS

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

cool css design webdesign
july 2009 by tstephens

copy to mine

Elliott Kember, in Pulp Browsers.
funny webdesign browsers standards css
april 2009 by tstephens

copy to mine

Don't use @import.

Wow. I had no idea. Steve (who knows what he is talking about) talks about how using @import is actually slower and worse for the browsers than link elements.

design webdesign css browsers html performance optimize tips
april 2009 by tstephens

copy to mine

CSS Font Stacks

A compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes. Defintely not the Dreamweaver defaults you see all over the place. This is a good list.

css fonts typography lists
january 2009 by tstephens

copy to mine

How to Design the Perfect List

Lists are a beautiful way to display content and information in a very easy to scan, easy to read method. Lists are found on most blogs to list posts, comments, tags, or links. In this post we will be exploring the modern practices of lists as an element of web design and they will be showing you how to design better lists to add to the overall design of your site.

reference lists tips css webdesign howto tutorial
january 2009 by tstephens

copy to mine

Select Cuts Off Options In IE (Fix)

If you set a static width on the <select> element, any <option> elements that are wider get cut of in IE 7 and below. There is no good CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.

javascript CSS browsers how-to
january 2009 by tstephens

copy to mine

Facebox 1.2

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. You'll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files

jquery css javascript plugin lightbox ui
january 2009 by tstephens

copy to mine

20 Good CSS Tutorials

There are some advanced tutorials in here, and some good tips and examples. Fuzzy shadows to rounded corners, to sliding doors navigation... all good stuff.

css how-to tutorials lists
december 2008 by tstephens

copy to mine

A Closer Look At the Blueprint CSS Framework - NETTUTS
CSS design webdesign HowTo tutorials framework grid html
december 2008 by tstephens

copy to mine

Yahoo! UI Library: Rich Text Editor

I don't use YUI, I'm more of a jQuery type of guy. But this is very nice. Very very nice indeed.

javascript design yui library CSS webdesign tools html forms
december 2008 by tstephens

copy to mine

12 Principles For Keeping Your Code Clean
coding tips CSS howto standards development design webdesign
november 2008 by tstephens

copy to mine

Image Resizing

Interestingly (and not surprisingly), browsers differ in rendering images at non-native sizes, with some providing noticeably better results than others. Internet Explorer 6 in particular looked to be the least smooth when scaling images down, but some interesting workarounds are available.

UI CSS coding
november 2008 by tstephens

copy to mine

Ten Web Development Tips I Wish I'd Known Two Years Ago

A very nice list of tips. I particularly endorse both the charging for IE 6 support, and the learning of a JavaScript API (jQuery, mootools, etc)

lists javascript webdesign design CSS tips development
november 2008 by tstephens

copy to mine

Are You Making These 10 CSS Mistakes? - NETTUTS

A nice listing of Ten Common CSS Mistakes.

css lists how-to html coding design
november 2008 by tstephens

copy to mine

Golden Ratio in modern CSS

A short article, but useful information. "...Let’s say for example that our page width is 960 pixels and we want to divide this using the golden ratio. Our main-content will be 960 / 1.62 = 593 pixels and our sidebar 960 - 593 = 367 pixels. ..."

css coding reference design
november 2008 by tstephens

copy to mine

CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer

Most standards favoring browsers (Firefox, Opera & Safari) have no method of targeting CSS to the specific browser while Internet Explorer, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only IE.

reference CSS tips browsers html
october 2008 by tstephens

copy to mine

CSS simple fluid drop shadows

Stu Nichols provides an easy CSS example of creating fluid solid drop-shadows.

css coding how-to reference UI effects webdesign
october 2008 by tstephens

copy to mine

jQuery & CSS Example

An extremely basic, yet extremely powerful, technique for adding dropdown menus using jQuery and CSS.

CSS webdesign jQuery HowTo tutorials javascript menus
october 2008 by tstephens

copy to mine

12 Examples of Paragraph Typography

Only standard <p> tags have been used. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent. Paragraph font size is set at 1em (equivalent to 16px if browser font size is unchanged) and line height set at 1.25em. Georgia was used exclusively. No browser specific CSS has been used—any inconsistency in the rendering of line-height, baseline and element positioning has been left for cross browser comparison before implementing.

coding CSS howto examples text type design
october 2008 by tstephens

copy to mine

Five CSS design browser differences I can live with
css coding html lists
september 2008 by tstephens

copy to mine

Typechart - Browse Web Type, Grab CSS.
design webdesign tools CSS font type typography fonts
september 2008 by tstephens

copy to mine

7 Principles Of Clean And Optimized CSS Code

Nice collection of tips and how to optimize and use shorthand.

css coding how-to reference webdesign
august 2008 by tstephens

copy to mine

Specifics on CSS Specificity - CSS-Tricks
css how-to coding
august 2008 by tstephens

copy to mine

Label Placement on Forms - CSS-Tricks

When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form.