10 best open source responsive web design projects.

We have collection of more than 1 Million open source products ranging from Enterprise product to small libraries in all platforms. We aggregate information from all open source repositories. Search and find the best for your needs. Check out projects section.

Displaying 1 to 10 from 10 results

responsively-app - A modified web browser that helps in responsive web development

Javascript

A modified browser built using Electron that helps in responsive web development.

electron react redux desktop-app web-development responsive developer-tools hacktoberfest contributions-welcome responsive-web-design good-first-issue opensource-alternative

eq.js - Lightweight JavaScript powered element queries

Javascript

Element queries are the "holy grail" of responsive web design, allowing you to create a single component that can be dropped into any position in any layout and have them respond appropriately. Unfortunately, due to some hard-to-deal-with chicken-and-egg cases, especially involving inline elements, it's unlikely that element queries will make it into browsers any time soon. In order to use eq.js, you need to include eq.js on your site. Setting up element queries can be done in one of two ways: the first is to set up a data-eq-pts attribute on your desired element and the second is to use the eq-pts mixin in Sass. The first way is preferred, as it is faster for JavaScript to parse and can fire on DOMContentLoaded whereas the second way is slower and can only be fired on window load, increasing the likelihood of a flash of unstyled content.

element-queries responsive-web-design rwd

flint - Flint is a powerful Sass grid framework designed for rapid responsive development.

Flint is a responsive grid framework written in Sass, created to allow developers to rapidly produce responsive layouts that are built on a sophisticated foundation. Most notably? The syntax. Being a designer myself, a large amount of time was spent on this aspect. Flint is very unique in the fact that it uses only a single mixin for all output: _(...).

grid-system grid-framework framework ui grid layout flint breakpoint breakpoints semantic responsive-web-design

borealis - Element query based responsive image solution

Javascript

By the end of 2013, the average web page served 1,030Kb of images, much to the chagrin of low bandwidth and pay-per-kilobyte users. The need to serve smaller images where appropriate, and to be able to control the scale and crop of images at all sizes, is imperative to creating a light weight and editorially rich web experiences. This is where responsive images come in. Unfortunately, we don't have a standard solution yet, and of those proposed, images will be swapped based on viewport information, not element information. Until we have a standard solution, you've got to pick your favorite hack. In order to use borealis, you need to both include borealis.js on your site and set up the data-borealis-srcs attribute on your desired image. data-borealis-srcs needs to be written in key: value pairs separated by a comma ,, with the key being the min-width pixel width when you would like to swap out an image and the value being the URL to the image. The first item in data-borealis-srcs should not have a key and will be the default. In order to prevent extra image requests, do not include the src attribute in the image definition.

element-queries responsive-images responsive-web-design rwd

ember-element-query - Element queries for Ember

HTML

This Ember addon lets you apply styles to elements conditionally based on their own width, instead of using media queries based on window width. It lets you implement reusable responsive components — with encapsulated styles, decoupled from their parent context. Such components will realign their content depending on how much space is available to them.

ember-addon element-queries element-query e-q responsive-web-design responsive rwd eq ember sass scss slice slices breakpoint-slicer media-query media-queries

themes - Tophat Themes - Give Bootstrap a custom, stylish look.

HTML

Free, open source themes to give Bootstrap 4 a custom, stylish look. Give your Bootstrap 4 projects a unique, custom style. Simply download the theme.css file for any theme, and include it after the standard bootstrap.css in your project's HTML templates. Each theme also includes example layout templates to demonstrate Bootstrap 4 elements, components, and content integration.

bootstrap themes responsive-web-design css sass

corgi - The css equivalent of a small and stupid log of fur.

The css equivalent of a small and stupid log of fur.

css3 css flexbox responsive-web-design corgi

vue-responsive-image - A Vue component that lets you quickly create responsive image tags with an optimal number of image sources for all devices

Javascript

Vue Responsive Image is a Vue component that allows you to quickly insert responsive image tags in your Vue project, provided you have some automated system that produces the various sizes of images required. The component calculates all source sizes and, depending on the parameters passed, generates the appropriate <img> tag and its srcset attribute and, if needed, separate <source> tags for tablet portrait and smartphone views. You can also include the script you find in the dist/ folder called vue-responsive-image-web.min.js. This way you can use it directly in simple Vue-based pages. To find out how to include it, check the HTML file in web-test/web-test.html. Keep in mind that in this case your component won't be automatically upgraded unless you manually update the script.

vue-components vue vuejs responsive-images responsive-web-design responsive-design front-end srcset vue.js responsive images frontend

science-fiction-magazines-blog - Blog template (concept) is inspired by stylish science fiction magazines of the 80-90s

Check this project on Dribbble. We’re happy to share with you our Science Fiction Magazines Blog template that can be used as a spectacular blog concept. When creating this template, we were inspired by the stylish science fiction magazines of the 80s-90s.