🔎 No more digging in a code. Inspect styles in a simple, well-organized & beautiful way. Get it now!
CSS Peeper is a CSS viewer tailored for Designers. Get access to the useful styles with our Chrome extension. Our mission is to let Designers focus on design, and spend as little time as possible digging in a code.
Ever wondered what’s the line-height, font or a button size on a website? We provide you the ultimate tool to satisfy your curiosity. We enable you to inspect code in the easiest possible way. Check the hidden CSS style of objects, colors and assets on the web.
CSS and HTML responsive grid of hexagons. View the Demo page of the responsive grid of hexagons GitHub repository. This grid is made with CSS and HTML, it adapts the number of hexaongs per row according to the available width and features title and short text on hover.
Your markup, your design, your opinions | our math.
In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?
Over the past few months, I’ve collected a few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff…
in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face’d text will not succeed. Same applies for font-style:italic. You can fix by adding the following to your @font-face declaration: (via doctype, crbug/31883 , crbug/35739 , webk.it/34147 )
/* these values are defaults in FF/Opera/IE but not webkit */
FF/Linux cannot serve webfonts from the file:// protocol. (Also, a tome on type quality with linux from Evan Martin)
‘320 and Up’ is a lightweight, easy to use and content first responsive web design boilerplate.
This is the new ‘320 and Up’
A lot’s changed since I wrote the original ‘320 and Up’, my ‘tiny screen first’ responsive web design boilerplate. Back then we were just getting started with responsive web design and many sites, including mine, and frameworks and boilerplates like HTML5 Boilerplate, structured their CSS3 Media Queries from the desktop down, rather than for small screens up.
To put things right, I wrote ‘320 and Up’. It worked as an extension to HTML5 Boilerplate or a set of standalone files. ‘320 and Up’ has been used by designers and developers all over the web and I’ve used versions of it on every website I’ve worked on since I wrote it.
What’s in the new ‘320 and Up’?
Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px
Design ‘atmosphere’ (colour, texture and typography) separated from layout
These “sliding” style navigation bars have been around a while, I just thought I’d take a crack at doing it myself as the opportunity came up recently. Turns out it’s really pretty darn easy. I put two examples together for it.