- A List Apart Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
- Mozilla Applying SVG effects to HTML content
- Smashing Magazine Resolution Independence With SVG
- Smashing Magazine Rethinking Responsive SVG
- CSS Tricks http://css-tricks.com/svg-sprites-use-better-icon-fonts/
#Styleguides on the web
- Salesforce http://sfdc-styleguide.herokuapp.com/
- Mailchimp http://ux.mailchimp.com/patterns/grids
- Github https://github.com/styleguide/css
- Yelp http://www.yelp.com/styleguide
- Pivotal Labs https://console.run.pivotal.io/style_guide
#Process
- Pivotal's Process http://pivotallabs.com/nicole-sullivan-colin-obyrne-components-sgdd-cf-developer-console/
- Codecademy's Process https://medium.com/webicratic-insights/1ebd994e2c08
If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article.
- Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
- Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
- Empty state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
- One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
- Some data state: This is usually what you think