Elements Design: Modern Social Media Icons (PSD, PNG)
UI: Flat UI Design Kit (PSD)

Elements Design: Ridiculously Responsive Social Sharing buttons (HTML5, CSS3, SVG)


Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach. - Responsive Web Design

A site designed with responsive web design adapts the layout to the viewing environment by using fluid, proportion-based grids,[5] flexible images, and CSS3 media queries, an extension of the @media rule. - Responsive web design

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.
Responsive web design

Ridiculously Responsive Social Sharing buttons
is built with SASS, so you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons as you see fit — the rest will fill in automagically in the container.


Resource: Ridiculously Responsive Social Sharing buttons (HTML5, CSS3, SVG)

  • Buttons will automatically fill to the size of the ul rrssb-buttons.
  • Adding a class of popup to the anchor tag for each share button will make the share dialog open in a popup, rather than a new window.
  • Each sharing URL requires various parameters that allow you to pass through messaging in the sharing dialog.

Created by Daniel Box.

Enjoy this freebie and want to show support? Spread the word.

Enjoy Downloading this freebie!


Tags: ridiculously responsive social sharing buttons, social media, social buttons, responsivity, responsive, html5, css3, svg

Leave a Comment

No Comment

© Creative3x Ltd.