Skip to content

Instantly share code, notes, and snippets.

@bensmithett

bensmithett/_widget.html.erb

Last active December 18, 2015 19:49
Show Gist options
  • Save bensmithett/5835649 to your computer and use it in GitHub Desktop.
Save bensmithett/5835649 to your computer and use it in GitHub Desktop.
Download ZIP
Working around a lack of element queries: http://filamentgroup.com/lab/element_query_workarounds/
Raw
_widget.html.erb
<!-- this partial takes a boolean "respond" argument -->
<div class="<%= respond ? "widget--respond" : "widget" %>">
...
</div>
Raw
_widget.sass
.widget
color: skinny
.widget--respond
@extend .widget
+at-breakpoint(32.5em)
color: fat
// Using Susy's at-breakpoint mixin for brevity. This outputs:
//
// .widget, .widget--respond {
// color: skinny;
// }
//
// @media (min-width: 32.5em) {
// .widget--respond {
// color: fat;
// }
// }
Raw
homepage.html.erb
<div class="content">...</div>
<aside>
<%= render "widget", :locals => { :respond => false } %>
</aside>
Raw
schedule.html.erb
<div class="content">
<%= render "widget", :locals => { :respond => true } %>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment