Responsive Images in Drupal 8

Note: This page could use some more information!

Using responsive images means loading images that have been specifically sized for the screen based on screen width breakpoints. This practice makes websites load faster on mobile devices because image sizes are optimized for mobile devices. This is different than fluid images which are large images scaled with CSS.

Theming OpenAid

OpenAid 1.0

The OpenAid distro comes with the OpenAid theme, which integrates with the Color module and is responsive out of the box.

To customize the theme for your site's needs, it is suggested that you create a child theme based off of OpenAid.

The theme's settings and color picker are located at /admin/appearance/settings/openaid


NUCLEUS is a base theme first released with Drupal 7 by ThemeBrain. The goal of this base theme is to provide a solid foundation for web development geeks to develop a theme quick and easy. Having a fast learning curve is the inflection point for UX/UI designers, Back-End and Front-End Developers.

Currently, 9000 sites are using Nucleus.


Code Examples

Bootstrap Library Examples:

Kalatheme Subtheme Examples:

Sites using Kalatheme

Here are some examples of Kalatheme being used to rapidly build bootstrap driven subthemes:


Advertising -

Tulare County Federal Credit Union


Subscribe with RSS Subscribe to RSS - Responsive Design