CSS: Be Responsive

be-responsive.css

/*
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;
	}
}

page.html

<p class="be-hidden-bp0 be-block-bp1">Small screens don't see this, but big screens do</p>