Web Design Bookmarks
Note: This page is out of date, and is currently being rewritten. Instead of posting it all at once, I’ve started to put sections up as I complete them. I’ll post on Twitter when new sections are added.
- HEAD tag elements - An exhaustive list of what goes in the
- Offline Webapps - A list of resources on how to make your webapp work offline.
- HTML Schemas - A guide on how to use schemas for different sets of structured data.
- Form Autofill - Tips on how to guide the browser in autofilling form fields. This is particularly useful since form autofilling doesn’t have a lot of documentation.
- Form Autcomplete - Additional resources on specifying autocorrect and autocapitalization attributes.
- Mobile Keyboards - A set of tips and tricks to help indicate to mobile browsers what keyboards to use for different input types.
- Form Validation - An article that looks at HTML5 form validation options.
- Picture Element - A introduction to the
<picture>element and what its intended usage is.
- When to not use Picture - When and where to not use the
- Picture Snippets - Additional technical information on using the
- Viewport - Snippet for correctly setting the viewport on responsive designs.
- Color Input via Datalist - Snippet for choosing a color from a set defined in a datalist.
- Prevent Chrome Translation - David Walsh shows how to prevent Chrome from prompting the user to translate the page.
- Plyr - A well designed HTML5 media player.
- Normalize.css - I rarely see a project that isn’t using this. Whenever you create a new website, your first step should be including this file.
- Flexbox Cheatsheet - I use this cheatsheet the time. Very helpful explanation on what the different Flexbox properties do.
- Solved by Flexbox - Flexbox is amazing. If you’re having trouble learning it, this is a great guide for common layouts.
- Flexbox Reading List - Learn Flexbox, it is absolutely worth it. I promise.
Tricks for Polish
- Modal Overlay with CSS - Instead of a complicated HTML / CSS hybrid, Lea Verou shows how to get an overlay with one line of CSS. Apologies for not having the original tweet.
- Easy Visual Separator - My favorite way of styling a partial underline / border.
- Font Smoothing - I’m not sure if this is needed anymore, but for a time it was a lifesaver.
- Font Features - Neat CSS tricks to get the most out of web typography.
- Correct Rounded Corners - A quick explanation on correctly rounding corners with borders.
Responsive Media and Layouts
- Flexible Cover Images - With the modern web’s trend of large banner images (guilty!) this is a handy link to have.
- CSS Tetris - Some tricks on how to leverage CSS to prevent orphan grid items.
- Object Fit - This is something I need to learn more about. I think it has huge potential to ease responsive designs.
- Object Fit / Position - More information on the above.
- Full Screen Images - Additional information on large image trends in web development. This article is older; focus on the
background-size: coverbit. You shouldn’t need prefixes / IE hacks anymore. NOTE: I learned this the hard way when working on Company Inc., but mobile browsers don’t support full screen background images very well (or at all) due to the massive performance hit.
Colors and Fonts
- HTML5 Placeholder Styling - A guide on styling the
placeholdertext on HTML input elements.
- Native System Fonts - A growing trend in CSS is using the native system font as the body
font-family. This bootstrap pull request contains information on how to achieve that - as it turns out, it’s pretty tricky!
- Clrs - A set of replacements for the default web colors. I use these frequently in other places as well - the color choices are great.
- Colors from Miyazaki Films - I haven’t ever used these, but I think it’s a fun resource to have in your pocket.
Libraries (Animation and Filters)
- Animate.css - One of the most prolific CSS animation libraries. A solid choice to use for drop in animations.
- Repaintless - Repainting is generally bad for performance - this library is a set of animations that won’t cause a browser repaint. If you’re looking at Animate.css, check this out first.
- Hover.css - Hover animations you can add to buttons and other elements.
- CSSgram - A library of Instagram filters reproduced using CSS.
- CSSCO - Similar to the above, but with VSCO filters.
- progrecss - A CSS powered progress bar.
- Typesetting - A typography focused CSS boilerplate.
Measurements and Advanced Tips
- CSS Pro Tips - A list of CSS tips that contains semi-obscure things.
- Drop Line Heights - A quick tip to developers calling on them to reduce their line heights.
- Media Query Units - A discussion on the different types of units in CSS and which to use for media queries.
- rem and em - A quick guide on when to use rem vs em for unit sizing.
- Which CSS Measurement to use When - Another guide explaining the different CSS measurements and when to use them.
- :target Animations - A neat way of using
:targetto create some pure CSS animations.
- Ladda - A great way of inlining loading indicators and displaying them as part of the button.
- Float Label - There are several forms of this out there, but this one is my favorite.
- Morphing Buttons - A fun concept that takes a button and transforms it into a modal when clicked.
- CSS Tooltips - A nice tooltip that you can style / animate as needed.
- Glitchy Text - A fun effect that might serve well on an error page.
- Glitchy Text 2 - A different style of the above.
- Click Effects - Some subtle animated click effects.
- Caption Hover Effects - A great collection of hover effects to use.
- Notification Styles - A collection of different notification styles and themes.
- Hover Effects - Image hover effects that animate text and borders.
- More Hover Effects - More of the above.
- Dialog Animations - Some crazy ones, but a couple of nice ones here as well.
- Credit Card Input - An interesting experiment that styles a credit card input form.
- Animated Weather Icons - A fun example of using animated CSS icons.
- Rotating Words - Perhaps a little too flashy for practical use, but a fun demo of rotating a word in a sentence.
- CSS Animated Hamburgers - A collection of hamburgers that animate when clicked using CSS.
- CSS Loading Animations - A diverse collection of CSS loading animations.
- Single Element CSS Spinners - A collection of CSS spinners.
- CSS Spin Loaders - Another set of spinners for use on your website.
- Bulma - A CSS Framework that uses Flexbox.
- Tachyons - Another generic CSS framework, but it had some components I liked.
- Spectre - I’m interested in the optimization for asian fonts.
- Sass Boilerplate - My preferred Sass file structure.
- Susy - Although I’d recommend using Flexbox now, if for some reason you want a “traditional” grid system I’d start here.
- HiDPI Mixin - A mixin for specifying styles on HiDPI displays.
- px to rem - A mixin for converting pixel values to rem values.
- Breakpoint Mixin - A mixin to ease media query usage.
- Shevy - A Sass library for typography and vertical rhythm.
- Sass Snippets - Useful mixins for colors, fonts, and breakpoints.
- Managing z-index - How to use Sass Maps to manage z-index values.
- Sass Maps - Some uses are covered elsewhere here, but the icon idea is great too.
- Sass Burger - A mixin for an animated Sass hamburger icon.
- Color / Background Color - How to use Sass to automatically swap color based on the background color.
- Pantone Colors - Pantone colors as Sass variables.
- Glitchy Text Mixin - A Sass mixin to give text a glitch effect.
For CSS animations, look in the CSS section. This deals mainly with theory
User Interface (UI)
User Experience (UX)
- Ethical Web Development - If you’re a web developer, live by these principles.
- 7 Principles of Rich Web Applications - I mentioned it in the Highlight section already but this article is a phenomenal guide to follow.
- The 12 Factor App - I don’t adhere to this as strongly as some but I do think it has some valuable advice.
- Public Speaking - If you ever find yourself giving a talk these tips are quite helpful.
- Building The Times UI - A nice case study on building a rather complicated site.
- Open Weather Map - My personal choice to get weather information.
- ipinfo - Useful for getting regional information about a user from their IP address. Please use responsively!