CSS for making a welcome box in the middle of your screen,

This makes a ‘welcome’ box app equal to half the size of the viewport, and directly in the center of the screen. Useful in some cases.

.welcome_box {
    opacity: 0.5;

CSS for making a fullscreen 2×2 grid

This divides the screen into four equal areas, stretching the whole area of the screen. Useful in some instances.

/* 2x2 Grid Styling */

.kx_grid_2x2 > div {
    position:absolute; padding:0px; margin:0px; height:50%; width:50%;

.kx_grid_2x2 > div.kx_grid_top_left        { left:0%;  top:0%; }
.kx_grid_2x2 > div.kx_grid_top_right       { left:50%; top:0%; }
.kx_grid_2x2 > div.kx_grid_bottom_left     { left:0%;  top:50%; }
.kx_grid_2x2 > div.kx_grid_bottom_right    { left:50%; top:50%; }

/* End 2x2 Grid Styling */

Use it like:

<div class = "kx_grid_2x2">
<div class="kx_grid_top_left">TOP LEFT</div>
<div class="kx_grid_top_right">TOP RIGHT</div>
<div class="kx_grid_bottom_left">BOTTOM LEFT</div>
<div class="kx_grid_bottom_right">BOTTOM RIGHT</div>
</div><!-- end grid_2x2 -->

How to get CSS properties of a clicked element

Came across some old code that could be useful in the future. Basically if you use this, if you click on a div it will cycle through the CSS properties (that you’ve asked for) and tell you what the value is. In this instance, it tells you the width, height and background-color.

$( "div" ).click(function() {
var arr_css_properties = ["id", "width", "height", "color", "background-color", "top", "left"];
var html = [ "The clicked div has the following styles:" ];
var styleProps = $( this ).css(arr_css_properties);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
$( "#result" ).html( html.join( "<br>" ) );
alert( html.join( "<br>" )  );