Stronger: 2014

I have to includ the @media queries as a seperate file and sections before.
That was very circumstantial and took a long time to find and redefine each elemnt to display properly on Mobile Devices.

Since LESS has included the support of mixins, it is very comfortable to define such queries.

All you need is:

Define your preferred Breakpoints as Variables
Include the queries inside the main element

Sample:

Step 1: Define your preferred Breakpoints as Variables

	@extraSmall: ~"only screen and (max-width: 360px)";
	@small: ~"only screen and (max-width: 640px)";
	@medium: ~"only screen and (max-width: 768px)";
	@large: ~"only screen and (max-width: 960px)";

view raw gistfile1.less hosted with ❤ by GitHub

Step 2: Include the queries inside the main element

	.menuWrapper {
	position: relative;
	width: 100%;

	& .menu {
	display: table;
	margin: auto;
	width: 70%;

	@media @medium {
	width: 90%;
	}

	@media @extraSmall {
	width: 95%;
	}
	}
	}

view raw gistfile1.less hosted with ❤ by GitHub

here is a sample of creating a horizontal rule with only CSS commands without using an Image. The point here is to define a DIV element with same settings as HR and rotate and put it over the HR.

your page with look like here:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

and here is the code:

	<style>
	div.container {
	width: 60%;
	margin: 30px auto;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	background-color: #888;
	padding: 10px;
	}

	hr.style1 {
	border: none;
	border-top: 2px dashed #fff;
	height: 2px;
	width: 80%;
	}

	hr.style2 {
	border: none;
	border-top: 2px dashed #fff;
	height: 2px;

	margin: 30px auto;
	width: 80%;
	}

	hr.style2:after {
	content: "\00a0";
	left: 50%;
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	background-color: #888;
	margin-top: -16px;
	pointer-events: none;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	z-index: 1;

	border: none;
	border-top: 2px dashed #fff;
	border-right: 2px dashed #fff;
	}
	</style>


	<div class="container">
	<span>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
	</span>

	<hr class="style1">

	<span>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
	</span>

	<hr class="style2">

	<span>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
	</span>
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

Stronger

Wednesday, 10 December 2014

Responsive Design: Include @media queries as mixins using LESS

Wednesday, 8 January 2014

nice HTML HR (horizontal rule) with CSS