750 Free icons from Google for Material Design

action-icons

Google Design are open-sourcing 750 glyphs as part of the Material Design system icons pack. The system icons contain icons commonly used across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on. They’re equally useful when building for the web, Android or iOS.

Check them out: https://github.com/google/material-design-icons/releases/tag/1.0.0

Bootstrap Responsive Video Embeds

Responsive videos seem to be an after-thought for many websites. While text and images are easy to resize to mobile and tablet screens, videos have always required extra work. Even popular video sharing sites like Youtube.com still don’t have an easy “responsive” option and require specifying a video dimension for embedding.

bs-responsive-video

Luckily, the 3.2+ version of Bootstrap solves that with a few simple classes you apply. To use them, wrap the <iframe> code with a div and give it the class of embed-responsive and either embed-responsive-16×9 (for widescreen) or embed-responsive-4by3 (if your videos are stuck in the 1980s format).

The embed-responsive-item part is optional. Since the only requirement is the outer wrapper for the video, it’s easy to globally apply this previously embedded videos, saving a ton of work with legacy content. This little snippet of jquery using .wrap() will wrap any iframe for you.

If you’re upgrading from an older version of Bootstrap and compiled your CSS from the LESS source files, you’ll need to include the responsive-embed.less file in your bootstrap.less file so the new styles are available.