Pinboard: bookmarks for tbrown tagged 'css'

Stop the cascade · Deep Thoughts by Mark Otto

Mark Otto: "Find ways to isolate components and make them more durable by limiting the scope of their CSS. You’ll discover that components can be more easily rearranged without causing adverse effects and the amount of code necessary will likely decrease."

CSS Well-Formedness
12 weeks ago by tbrown

copy to mine

Gridset

"Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. Using it is as simple as embedding a link."

Type CSS RWD Layout Grids
march 2012 by tbrown

copy to mine

CSS Column Breaks | Trent Walton

"Rather than using a more traditional HTML & CSS column/grid approach, I opted for column-count to keep everything extra efficient & scalable. The trouble is, sometimes content gets split across columns awkwardly."

CSS Layout Type
february 2012 by tbrown

copy to mine

LukeW | An Event Apart: Detail in Web Typography

Luke Wroblewski: "In his presentation at An Event Apart in Minneapolis MN, Richard Rutter walked through a preview of the detailed typographic control CSS3 will offer in the future. Here's my notes from his talk."

Type CSS3 CSS Richard-Rutter OpenType
january 2012 by tbrown

copy to mine

umbrUI - CSS3 Shadow DOM styling

"Basically this demo is about selecting those special [Shadow DOM] pseudo elements and style them with CSS. And to make this Shadow-DOMing game even more fun, more rules: No images, no extra markup and no JavaScript (the browser already adds the functionality)."

Shadow-DOM CSS Forms
september 2011 by tbrown

copy to mine

How Do Browsers Render the Different CSS Border Style Values?

Louis Lazaris: "Just like form elements, you’ll never get these looking exactly the same cross-browser, and neither should you want to. But if nothing else, it’s interesting seeing how the different browser makers interpret these different values."

CSS Browsers Borders
september 2011 by tbrown

copy to mine

Sassy Mother Effing Text Shadow

"There shouldn’t be more. I’d like to tell you that a masked gunman made me make a Lorenz Attractor in Sass. But the truth is that it was just bad judgement. For the love of all that is good don’t use this anywhere. The CSS is just out of control. View source at your peril."

CSS text-shadow Sass
september 2011 by tbrown

copy to mine

Masonry CSS

Radu Chelariu: "CSS columns. Granted, their purpose is to display text in columns like a newspaper, but their display mode is exactly what’s needed to recreate the Masonry effect."

css layout
july 2011 by tbrown

copy to mine

Controlling Web Typography

Trent Walton: "Lettering.js is a solution, but perhaps it’s not the ultimate solution. […] Here’s a brief timeline recounting what’s already been discussed."

Type JS CSS
february 2011 by tbrown

copy to mine

New Bulletproof Font-Face Syntax

Ethan Dunham: "The hack that makes this work is the '#' following the EOT filename. Seriously."

CSS Type @font-face
february 2011 by tbrown

copy to mine

Moving Highlight

Chris Coyier uses radial gradients and jQuery to produce a subtle highlight that follows a user's mouse.

CSS jQuery JS
january 2011 by tbrown

copy to mine

Remove unused CSS - CSS Optimizer

"Our tool explores the pages of your site automatically, find the unused CSS selectors and creates new clean CSS files you can download."

CSS
january 2011 by tbrown

copy to mine

CSS formatting

"Been thinking about formalizing a style guide for CSS as CSS3 includes some especially complex syntax."

CSS
december 2010 by tbrown

copy to mine

Sass - Syntactically Awesome Stylesheets

"Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin."

CSS
december 2010 by tbrown

copy to mine

24 ways: My CSS Wish List

What Inayaili de León would like to see made real. Lots of thoughtful typographic stuff here. Great list.

Type CSS
december 2010 by tbrown

copy to mine

The History of CSS Resets

Michael Tuck: "By using a CSS reset, you’re setting the styles of the fundamental CSS elements to a baseline value, thusly rendering the browsers’ varying style defaults moot."

Type CSS
december 2010 by tbrown

copy to mine

Type study: A layered text shadow

Ryan Essmaker for Typekit: "The header and quote at the bottom of the site are set apart by a text shadow. This gives it a three-dimensional feel and emulates offset printing mishaps occasionally seen in newspapers."

Type CSS
december 2010 by tbrown

copy to mine

Type-a-file

"A simple CSS stylesheet that adhered to best typographic practices that anyone could just grab and run with."

Type CSS from twitter_favs
november 2010 by tbrown

copy to mine

Lettering.js

"Web type is exploding all over the web but CSS currently doesn't offer complete down-to-the-letter control. So we created a jQuery plugin."

Type CSS jQuery from twitter_favs
october 2010 by tbrown

copy to mine

HTML5Rocks - Quick hits with the Flexible Box Model

Paul Irish: "I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short."

CSS Layout
october 2010 by tbrown

copy to mine

YUI 2: Fonts CSS

Yahoo's recommendations for font size normalization across browsers and the method recommended by HTML5 Boilerplate. Explains why to use percentages to size type, rather than pixels or ems, and has a reference for common type sizes.

Type CSS Measurement
september 2010 by tbrown

copy to mine

Lucida Improved Font Stack

Matt Wiebe explores the @font-face definition's src property to make a single family out of visitors' local Lucida Grande and Lucida Sans fonts.

Type CSS
september 2010 by tbrown

copy to mine

Less.js Will Obsolete CSS

"Very soon we’ll see the next evolution of LESS. The new change will be bigger than any previous implementation or update because LESS has now been re-implemented in JavaScript. What this means is you no longer need Ruby, ASP or PHP to use LESS, you just need a browser.

Less.js is a JavaScript implementation of LESS that’s run by your web browser. As any JavaScript, you include a link to the script in your HTML, and…that’s that. LESS is now going to process LESS code so instead of including a link to a CSS file, you’ll include a link directly to your LESS code. That’s right, no CSS pre-processing, LESS will handle it live."

CSS JS
june 2010 by tbrown

copy to mine

I ♥ BLUR

Simurai: "But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur."

Type CSS3 CSS
june 2010 by tbrown

copy to mine

Code Standards | Isobar

"By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. By adhering to best practices, we ensure optimized page loading, performance and maintainable code."

HTML CSS JS
april 2010 by tbrown

copy to mine

The history of a model for fonts on the Web

SXSW presentation from Bert Bos, co-creator of CSS, on why we are where we are: "When W3C proposed to resurrect the Fonts Working Group in order to standardize the next version of EOT, the three browser makers [Opera, Mozilla, Apple] protested violently."

W3C CSS Type Web-Standards WOFF Typography
march 2010 by tbrown

copy to mine

Cross Browser CSS Transforms – even in IE

Zoltan Hawryluk: "The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. Although you can do the same thing with images in Photoshop or The GIMP, using CSS transforms allows developers to do the same thing with any HTML markup and allows users to select the text within the transformed object."

CSS
march 2010 by tbrown

copy to mine

CSS Fonts Module Level 3 - Editor's Draft

"This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules."

CSS Type from twitter_favs
march 2010 by tbrown

copy to mine

jQuery Masonry

David DeSandro: "Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall."

JS CSS
february 2010 by tbrown

copy to mine

Sub-Pixel Problems in CSS

John Resig: "The problem then becomes: Which way do you round the number? Up, down, or a mixture of the two?"

Type CSS Measurement
march 2008 by tbrown

copy to mine