This site developed and maintained by Rachel Andrew offers an extensive collection of examples, video and other resources to help you learn CSS Grid Layout.
Category: Web Design
Pricing Tables Generator from coveloping{}
Pricing Tables Generator lets you change a lot of parameters:
- number of columns and rows
- width, paddings and margin of columns
- position of the price row
- which column to highlight by default
- borders for all table elements
- fonts and colors for text
- buttons
Once everything looks to your satisfaction, all you have to do to enjoy the beautiful result is copy two surprisingly short and elegant code snippets (one for HTML and another for CSS).
px-em
px-em is a px to em converter that allows you to work out the em sizes from px. Enter the parent px size in the top box, required px size in the bottom one, and it will calculate the result for you.
Liquidapsive (Liqui-dap-sive)
If layout type names like “responsive,” “adaptive,” “liquid” confuse you, Liquidapsive is here to bring clarity with a traditional 3 column layout and multiple page elements.
In a few clicks, you will see which is which and what the differences are. And the good old “static” version is there too to remind you where it all started.
Pick a flavor from the drop down on the top of the page then drag your window narrower and wider, taller and shorter. It will make much more sense when you see for yourself how the approach works.
7 Habits of Highly Effective Media Queries
Brad Frost shares his considerations for creating high-quality media queries in his article 7 Habits of Highly Effective Media Queries.
Responsive Resources
This large collection of links about various aspects of responsive web design is a part of the This Is Responsive web site. It covers approach, process, cost considerations, case studies, tools, layout and typography issues, and of course the basics of responsive design.
Screensiz.es
Screen size reference for smartphones, tablets, and monitors, complete with popularity: Screensiz.es
How To Benefit From CSS Generated Content And Counters
Gabriele Romanato wrote an awesome article about using CSS generated content and counters to embellish our layouts with text strings and images and to add automatic numbering. Lots of code snippets and demos to illustrate all that.
The Era of Symbol Fonts
Today A List Apart features a very good article on symbol fonts by Brian Suda. It covers the place of symbol fonts in the whole process of improving web site performance, visual and accessibility advantages of their use, new possibilities for ligatures, and possible issues a web designer can run into with symbol fonts.
How to improve site navigation
Stripping a website to its barest form, ignoring for a moment, content which is only text and images, all a browsing experience is, is navigation. It’s clicking links that take you to other pages with more links. The main navigation of your site is such a crucial part of this as it represents the persistent doorway to the most important pages of your content.