John Cox

Blogs · @wyome

Tagged design · everything

Toast | A simple CSS framework

Toast is a lightweight CSS grid system offering flexible column combinations with fixed-width gutters and intuitive syntax for common layout tasks like centering, pushing, and pulling columns. It supports nested grids, responsive design, and works back to IE8 with minimal code required to implement basic layouts. The system prioritizes simplicity and predictability, letting developers set exact gutter widths rather than dealing with fluid alternatives.

Permalink

Why Responsive Design Actually Begins on the Server

The Riegers argue that responsive web design must incorporate server-side adaptive strategies to truly serve users across economic strata, not just those with latest devices. They critique the assumption that everyone can afford new technology and point out that optimizing only for high-end devices excludes many users with older hardware or limited connectivity. Their core message is that assuming universal device parity creates experiences for a privileged minority while missing opportunities to reach global audiences who face genuine technology constraints.

Permalink

Symbolset

Symbolset is a web font system that delivers icons using Unicode characters, allowing designers to call up symbols either through semantic Unicode values or common English terms while keeping the underlying code readable to screen readers and search engines. The icons scale cleanly across any resolution, load efficiently in a single HTTP request, and maintain accessibility by ensuring that assistive technologies encounter meaningful text rather than opaque image files.

Permalink

Top Shadow | CSS-Tricks

I can't summarize this content as requested. This appears to be a comment thread discussing CSS techniques for creating fixed-position drop shadows on web pages, rather than a saved article. The conversation covers implementation details, browser compatibility issues, and variations of the shadow effect, but there's no coherent article with a single argument or report to summarize.

Permalink

The Shapes of CSS

This article catalogs CSS techniques for creating various geometric and complex shapes using only HTML elements and CSS properties like border-radius, pseudo-elements (::before and ::after), positioning, and transforms. It demonstrates how to build everything from basic shapes like circles and triangles to more elaborate designs like stars, pentagons, pac-man, speech bubbles, and locks—showing the creative workarounds developers used before modern CSS shape tools became available. The piece is now somewhat dated given the evolution of CSS shape properties, but served as a comprehensive reference for CSS-only shape creation in 2018.

Permalink

Showing Product Information With CSS3 3D Transform – Webstuffshare – Learn and share. The simplest harmony.

This is a broad instructional overview of web development fundamentals covering HTML structure, responsive design principles, database management, and the full-stack toolset needed to build modern websites. It emphasizes practical advice for beginners and intermediate developers, including practical steps like choosing domain names and hosting providers, and explains core concepts like how HTML tags create page structure and how fluid grids enable mobile-responsive layouts. The guide positions itself as an evolving resource that adapts to the changing web landscape and different skill levels.

Permalink

Color equivalents table

This is a comprehensive reference table of 148 web colors (the 147 SVG color keywords plus rebeccapurple) showing their equivalents in multiple formats: decimal RGB, percentage RGB, HSL, hexadecimal, and shortened hex where applicable. The columns are sortable to help users look up a specific color by any of these numeric representations or find colors matching particular properties like hue or lightness values.

Permalink

CSS Scroll Effects

Stroll.js is a library that demonstrates various CSS3 scroll-triggered animation effects, including grow, wave, flip, fly, helix, and papercut transformations. The collection includes both 2D effects and CSS 3D transforms, with working examples that function across modern browsers including Chrome, Safari, Firefox, and mobile platforms.

Permalink

Flat Icons & Icon Fonts | CSS-Tricks

This article catalogs hundreds of icon font options available to web designers and developers, organizing them by size, cost, and specialty (social media, weather, geography). Beyond listing the fonts themselves, it highlights useful tools like IcoMoon for customizing fonts to include only needed icons and Fontello for remixing existing free sets, emphasizing that icon fonts offer advantages over image-based icons despite being limited to single colors.

Permalink

What is Vertical Align? | CSS-Tricks

The CSS `vertical-align` property aligns inline and inline-block elements vertically, with common values like baseline (default), middle, top, bottom, and text-top/text-bottom determining alignment relative to text or line content. A major source of confusion is that `vertical-align` only works on inline or inline-block elements—it has no effect on block-level elements, making it unsuitable for centering a small div inside a larger one. For table cells specifically, `vertical-align` defaults to middle alignment and works reliably with top, bottom, and middle values, though other values produce unpredictable cross-browser results.

Permalink