css write screen type by media

by amindunited

HTML

<div id="screen_type"></div>
<header id="top">
    
    <div id="navTrigger">
        <span>[]</span>
    </div>
    <ul>
        <li>Item _1</li>
        <li>Item _2</li>
        <li>Item _3</li>
        <li>Item _4</li>
        <li>Item _5</li>
        <li>Item _6</li>
        <li>Item _7</li>
        <li>Item _8</li>
        <li>Item _9</li>
        <li>Item _10</li>
        <li>Item _11</li>
        <li>Item _12</li>
        <li>Item _13</li>
        <li>Item _14</li>
        <li>Item _15</li>
        <li>Item _16</li>
        <li>Item _17</li>
        <li>Item _18</li>
    </ul>
</header>
<article class="central">
    <div class="article_body">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</article>
<article class="right-column">
    <div class="article_body">
        Side bar
    </div>
</article>
<script src="https://rawgithub.com/less/less.js/master/dist/less-1.6.1.min.js"></script>

CSS

html, body {
    margin: 0px;
    padding: 0px;
}
.page_background {
    background-color: #efefef;
}
/////////////////
// Semantic.gs // for LESS: http://lesscss.org/
/////////////////

// Defaults which you can freely override
@column-width: 60;
@gutter-width: 20;
@columns: 12;

// Utility variable — you should never need to modify this
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
//@total-width: @gridsystem-width;
@total-width: 100%;

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// @min-width: 960;
// @correction: 0.5 / @min-width * 100 * 1%;

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	*zoom:1;

	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}


//////////
// GRID //
//////////

body {
	width: 100%;
	.clearfix;
}

.row(@columns:@columns) {
	display: block;
	width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
	margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
	// *width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction;
	// *margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction;
	.clearfix;
}
.column(@x,@columns:@columns) {
	display: inline;
	float: left;
	width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
	margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
	// *width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction;
	// *margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction;
}
.push(@offset:1) {
	margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) +...

JavaScript

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Tell LESS to refresh the styles
less.refreshStyles();

$(function(){
    $(window).resize(function() {
	    if ($(window).width() <= 480){	
		    // do something here
            console.log("testing after text ", $('#screen_type').css('content'))
            $('body').removeClass(function (index, css) {
                return (css.match (/\screen_\S+/g) || []).join(' ');
            }).addClass('screen_480')
            $("#top > ul").hide();
        } else if ($(window).width() >= 480){
            console.log("greater");
            $("#top > ul").show();
        }	
    });
    
    $('#navTrigger').click(function(){
        $("#top > ul").toggle();
    });
});