CSS Media Queries

If you install frontendcore using the Yeoman installation you will have available the following breakpoints:

Frontendcore proposes you a media-query system based on mixins that will allow you to have all the code of your objects in the same .scss file but the media-queries will be declared just once at the bottom of your css file. This is very important because you will generate less code that if you open and close the media-query each time you need to declare something specific for any device, but providing you the control of all the variations of the object.

For example, if we have an object box and in his mobile first version the margins are the padding are defined as small:

.box {
	margin-bottom: $spacing/2;
	padding: $spacing/2;
}

Then, on the same file just after our object, we must create a mixin with the variations of the object for big devices:

@mixin papa-boxes() {
	.box {
		margin-bottom: $spacing;
		padding: $spacing;
	}
}

Finally in a folder called devices (if you are using the Frontendcore installation, you already have it), we will create the media-queries and add the mixin:

@media screen and (min-width: 980px){

	@include papa-boxes;

}

You can create as many breakpoints as you need, and it's posible than one mixin could be used to create different variants depending on the breakpoint. Following with the same exaample, if we just add some parameters to the mixin we can get something like this:

@mixin papa-boxes($spacing) {
	.box {
		margin-bottom: $spacing;
		padding: $spacing;
	}
}

@media screen and  (min-width:800px) and (max-width: 978px) {

	@include papa-boxes(16px);

}

@media screen and (min-width: 980px){

	@include papa-boxes(32px);

}

The objects included in Frontendcore has some variants based on media query. If you are not using the Frontendcore installation through Yeoman you must include the general mixins:

@include mobile-core;
@include tablet-core;
@include desktop-core;