Skip to content

Instantly share code, notes, and snippets.

@dbisso
Created July 12, 2012 17:26
Show Gist options
  • Save dbisso/3099490 to your computer and use it in GitHub Desktop.
Save dbisso/3099490 to your computer and use it in GitHub Desktop.
CSS: Be Responsive
/*
Format is .be-[behaviour]-bp[n]
Assumptions:
- Breakpoints are defined numerically rather than by device (because we want to be device agnostic).
- bp0 is always the base breakpoint
- Mobile / essentials first development (ie. each sequential bp[n] overrides bp[n-1] )
- The properties that are affected are not defined in other definitions.
If they are there are potential problems with specificity and we want to
avoid !important.
Or maybe it's better to thing of .be classes as a base classes
which everything else extends…
Limitations:
- Each behaviour must be defined for every breakpoint. This leads to CSS
bloat. Partially ameliorated (possibly) by gzip-ing etc.
- Classitis : especially if the behaviours are too atomic.
- Child elements mostly inherit their parents behaviours which could lead
to confusion.
Thoughts:
- This might be easier if we could select elements by regex match class attributes
- Could we do something better using not() [class|='be-align'] or [class*='bp1'] selectors?
*/
/* Display modes */
.be-hidden-bp0 {
display: none;
}
.be-block-bp0 {
clear: both;
display: block;
}
/* Alignment */
.be-align-left-bp0 {
text-align: left;
}
.be-align-right-bp0 {
text-align: right;
}
.be-align-center-bp0 {
text-align: center;
}
/* Micro layout */
.be-inline-children-bp0 > *{
display: inline-block;
}
/* Example breakpoint: bp1 */
@media screen and (min-width: 860px) {
.be-hidden-bp1 {
display: none;
}
.be-block-bp1 {
clear: both;
display: block;
}
.be-align-left-bp1 {
text-align: left;
}
.be-align-right-bp1 {
text-align: right;
}
.be-align-center-bp1 {
text-align: center;
}
.be-inline-children-bp1 > *{
display: inline-block;
}
}
<p class="be-hidden-bp0 be-block-bp1">Small screens don't see this, but big screens do</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment