2015-05-18
1.0.0
DemoTeam
9.0.1.3
All
All
Components, Widgets
[Overview]
Resizable left pane with responsive containers
[Detail]
Resizable left-pane with widgets allowing for responsive behaviour within that pane using pure CSS!
Example CSS:
.widget-name {
padding: 25px;
}
.widget-name[max-width="200px"] {
padding: 0;
}
.widget-name[min-width="500px"] {
padding: 55px;
}
/* responsive images /*
.responsive-image img {
width: 100%;
}
.responsive-image[max-width^='400px'] img {
content: url(demo/image-400px.jpg);
}
.responsive-image[max-width^='1000px'] img {
content: url(demo/image-1000px.jpg);
}
.responsive-image[min-width='1000px'] img {
content: url(demo/image-full.jpg);
}
The underlying javascript is credited to Marc J. Schmidt. Check for samples and documentation at http://marcj.github.io/css-element-queries/.
Under this license