.glippo {
	width:100px;
	height:100px;
	padding:40px;
	border:4px solid blue;
	box-sizing: border-box;
}
.frippo {
	width:100px;
	height:100px;
	border:4px solid red;
	box-sizing: border-box;
}


.snurdo {
	width:50px;
	height:50px;
	border:1px solid black;
	float:left;
}

.snurdo  + .snurdo {
	border:4px solid blue;
	float:right;
}

div[glimpy*="borpbarney"] {
	border:6px solid green;
	width:200px;
	height:200px;
}


// start of grid foundation elements

.row,
.column {
	box-sizing: border-box;
}

.row:before,
.row:after {
	content: " ";
	display: table;
}

.row:after {
	clear: both;
}

.column {
	position: relative;
	float: left;
}

.column + .column {
	margin-left: 1.6%;
}

.column-1 {
    width: 6.86666666667%;
}
 
.column-2 {
    width: 15.3333333333%;
}
 
.column-3 {
    width: 23.8%;
}
 
.column-4 {
    width: 32.2666666667%;
}
 
.column-5 {
    width: 40.7333333333%;
}
 
.column-6 {
    width: 49.2%;
}
 
.column-7 {
    width: 57.6666666667%;
}
 
.column-8 {
    width: 66.1333333333%;
}
 
.column-9 {
    width: 74.6%;
}
 
.column-10 {
    width: 83.0666666667%;
}
 
.column-11 {
    width: 91.5333333333%;
}
 
.column-12 {
    width: 100%;
}

@media only screen and (max-width: 550px) {
    .column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        width: auto;
        float: none;
    }
 
    .column + .column {
        margin-left: 0;
    }
}