I totally forgot about print style sheets
A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing.
november 2016
CSS Mega Dropdown | CodyHouse
A responsive and easy to customise mega-dropdown component. Browser support ie Chrome Firefox Safari Opera 9+
menus  megamenus  design  webdesign  web 
september 2016
Oh, shit, git!
"Git is hard: screwing up is easy, and figuring out how to fix your mistakes is fucking impossible." Git documentation in plain English.
git  help  howto  documentation  tips 
september 2016
Simple email forms
forms  email 
august 2016
Glyphs | CSS-Tricks
Reference for encoding symbols and glyphs
april 2016
GitHub - jgarber623/aria-collapsible: A lightweight, dependency-free JavaScript module for generating progressively-enhanced collapsible regions using ARIA States and Properties.
A lightweight, dependency-free JavaScript module for generating progressively-enhanced collapsible regions using ARIA States and Properties.
webdesign  web  javascript  css  design  accessibility 
march 2016
CSS Buttons
CSS and JavaScript button inspiration
webdesign  javascript  inspiration  css  web  design  html  button 
october 2015
The Shapes of CSS
Generating shapes using CSS
code  css  shapes 
may 2015
The Ultimate Guide to CSS
Guide to CSS usage in various email clients
css  design  email 
may 2015
flexbox in 5 minutes
An interactive tour of all the major features of the new CSS property: flexbox.
css  education  tutorial  web  howto  flexbox  design  layout 
march 2015
Using CSS flexible boxes - Web developer guide | MDN
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
design  web  reference  css  webdesign  flexbox  layout 
march 2015
Harnessing Flexbox For Today's Web Apps - Smashing Magazine
Although the syntax might be initially confounding, flexbox lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order.
css  design  web  layout  flexbox 
march 2015
A Complete Guide to Flexbox | CSS-Tricks
The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container.
design  web  responsive  layout  css  flexbox  webdesign 
march 2015
Using Flexbox: Mixing Old and New for the Best Browser Support | CSS-Tricks
Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax.
css  design  layout  flexbox  web 
march 2015
Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou
Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Because <datalist> still doesn’t cut it.
javascript  webdev  js  library  forms  search  autocomplete  tool  css  webdesign 
february 2015
Style Guide Resources
A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries
styleguide  collection  guide  frontend  web  webdesign 
november 2014
Free My Data
Download and archive your social media data
data  indieweb  export 
november 2014
An enhanced pinboard bookmarklet for the persnickety
october 2014
CSS Guidelines
High-level advice and guidelines for writing sane, manageable, scalable CSS
august 2014
Simple examples for HTML, CSS and Javascript
html  css  javascript  examples 
july 2014
skelJS : Documentation
skelJS is a lightweight frontend framework for building responsive sites and apps
framework  js  javascript  frontend  web  design 
may 2014
Transitions for Off-Canvas Navigations | Codrops
Collection of CSS based transitions for revealing menu navigation
animation  css  web  design  menu  navigation 
april 2014
Labelmask | Brad Frost Web
Nice idea for adding a formatting hint to forms
forms  html  web  design  input  masks 
april 2014
How To: Build Your Own Functionality Plugin | @thetorquemag
A functionality plugin separates what would normally be in a theme's functions.php by placing it in a plugin.
wordpress  plugin  theme  themeing  functions  development 
april 2014
crowdfavorite/wp-post-formats · GitHub
An admin interface and structured post meta for WordPress post formats.
plugin  wordpress  postformats  blog 
april 2014
Typekit Practice
Practice and learn typography
typography  lessons  web  design 
april 2014
Scalable Vector Graphic (SVG) can be rewritten without affecting the resulting image
svg  optimization  frontend  images 
march 2014
A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas
html  css  bugs  webdesign  web  design 
march 2014
Leveling Up With Flexbox presentation at Smashing Conference
Presentation and resources for progressive enhancement using flexbox
flexbox  css  layout  presentation 
march 2014
plainmade/unmark · GitHub
Self hosted read it later service
reading  list  software  php  bookmark 
march 2014
Ridiculously Responsive Social Sharing Buttons by KNI Labs
Social buttons for responsive design built with SASS and SVG
buttons  css  icons  responsive  social  web  design  webdesign 
february 2014
Label Pattern - CodePen
Interesting use of a label element as a placeholder for a text input
form  label  placeholder  web  design  webdesign 
february 2014
Basic instructions for creating a responsive grid
css  design  grid  layout  responsive 
february 2014
Git tips from the trenches
Lots of useful one liners and tips for Git
git  tips 
february 2014
Ghostbusting For Front-end Developers
Tips for using a clean browser environment for front end development and testing
development  web  design  webdesign  javascript  testing 
january 2014
You Might Not Need jQuery
JavaScript equivalent statements for jQuery for modern browsers
development  javascript  jquery  reference  web 
january 2014
filamentgroup/grunticon · GitHub
grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it's easy to use, as it generates a class referencing each icon, and doesn't use CSS sprites.
grunt  css  icons  javascript  svg 
january 2014
JavaScript Promises: There and back again - HTML5 Rocks
Explaination and details about native support for JavaScript promises
javascript  promises  web  development  webdev 
december 2013
Proxy solution for avoiding cross domain restrictions
crossdomain  javascript  proxy  sameorigin 
december 2013
Custom Homescreen Icons with Pythonista
Using Pythonista and the iPhone Configuration Utility to create custom home screen shortcuts for websites
iphone  iOS  python  hacks 
december 2013
Absolute Horizontal And Vertical Centering In CSS | Smashing Coding
How to center a content area both vertically and horizontally
html  centering  css 
december 2013
Responsive scrollable tables
A solution for data tables that are too wide for a container area
web  tables  data  responsivedesign  webdesign  responsive  design 
november 2013
Git Cheatsheet
An interactive git cheat sheet
git  cheatsheet  tips 
november 2013
Styleguide | MapBox
Style guide for web development from MapBox
styleguide  mapbox  css 
november 2013
Pattern Library | MailChimp
MailChimp's pattern library for web development
pattern  library  mailchimp  css 
november 2013
Wallop Slider
Image carousel animated by CSS transitions
slider  css  transitions 
november 2013
« earlier      
accessibility adobe advertising advice ajax ala alistapart amazon animation apache api apple application architecture art article astronomy atom attributes audio authentication baby background blog blogging book bookmarklet bookmarks browser browsers business button calendar camera canvas cheatsheet classical clever climate code collaboration color comments commercial community comparison compatibility computer content cool copyright corners cors css css3 culture data debugging del.icio.us delicious design development digital django doctype documentation dom education effects email enhancement entertainment environment environmentaltobacco examples extension favicon feed feeds film firefox fix flash flexbox flickr font fonts form forms framework free freeware frontend fun funny gallery game games generator git globalwarming google googlemaps graphics grid grids grunt guide hack hacks hcard history howto htaccess html html5 http humor icon icons idea identity ie ie7 illustrator image images information input inspiration interesting interface internet internetexplorer ios iphone iraq javascript jquery js junkscience knoxville last.fm law layout legal library lightbox links list login mac management map maps marketing markup mashup media mediaqueries menu menus microformats microsoft mobile movies mozilla music nasa navigation news online openid opensource optimization oracle parody passwords pattern patterns performance photo photography photos photoshop php pictures plugin plugins politics presentation productivity programming progressive prototype psychology puzzle python quotes rails reference research resources responsive responsivedesign roundedcorners rss rwd safari sass science scripting search secondhandsmoke security selectors seo showcase social socialsoftware software space standards starwars statistics style styleguide svg syndication tables tabs tagging tags tech technology templates testing text theme themes time tips tool tools toread travel tutorial twitter type typography ui url usability useful ux validation video visualization web web2.0 webdesign webdev webdevelopment webkit webservices website webstandards windows wordpress workflow writing xhtml xml xmlhttprequest yahoo youtube yui

Copy this bookmark: