What is the best Approach for CSS framework of an Enterprise Cloud application?

There are several ways to style the elements in each page, in Enterprise applications usually the CSS Framework size increased about 1 MB, and when your users are using slow internet connection, you should decrease css framework size.

we can create new CSS for our element like .Blah and value it in css framework and do this for each element which cause increase size of css framework, but a cleaner page

<div id="blah" class="blah"></div>

we can also use our css framework utilities in each view to format each element to keep size of css framework, but a non-clean page

<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>

which of above approach is the best approach for an Enterprise application, while you ensure that a majority of your users are using slow internet connection

Why is this JQUERY selector with a varibale and space not working?

 $(".lookup "+id).css("background-color","green");

I want to to change the background of "lookup 123456" to green when matches are found. I write this to the console: console.log(".lookup "+id) it works fine. But it's not getting selected with the selector.

Any help?

Making a quick padding/margin library with loops + arrays in Less

I'm trying to understand the loop and array function in Less (css). But it seems like I can't find any good tutorials on the topic.

More specifically, I'm trying to code a quick padding- & margin class library for Bootstrap 3 using Less. The coder should only change som global variables and the library will rebuild the padding/margin functionality. I want the padding/margin to be responsive. Giving a more spaciesh design on big devices, and not so spaciesh on smaller devices.

I know that the current code is extremly repetitive and will, if I expand it to every device, an extremely long document with code, that isn't gracies nor giving an outside coder a good overview of the function.

So, what can I do to minimize the code into smaller loops and arrays?

//Global variables for space calculation in a mixin
// Variables for padding and margin sections - also refered to as mixin-space-value
   @base-top-space: 100px;
 @base-right-space: 100px;
@base-bottom-space: @base-top-space;
  @base-left-space: @base-right-space;

// Variables for different Types of sizes of space - also refered to in mixin-space as @mixin-space-size
 @space-small:      0.75;
@space-medium:      1;
 @space-large:      1.75;
@space-xlarge:      2.5;

// Variables for different types of devices - also refered to in mixin-space as @mixin-space-device
@space-xs:  0.5;
@space-sm:  1;
@space-md:  1.25;
@space-lg:  1.5;

//Variables of types of space in mixin
// Padding
@space-type-padding-top:    escape('padding:');
@space-type-padding-top:    escape('padding-top:');
@space-type-padding-right:  escape('padding-right:');
@space-type-padding-bottom: escape('padding-bottom:');
@space-type-padding-left:   escape('padding-left:');

// Margin
@space-type-margin:         escape('margin:');
@space-type-margin-top:     escape('margin-top:');
@space-type-margin-right:   escape('margin-right:');
@space-type-margin-bottom:  escape('margin-bottom:');
@space-type-margin-left:    escape('margin-left:');



// Mixin of padding space
// mixin-space-type: eg. padding-top, margin-right...
// 
//      Local variables         Global variables:
//      ===============         ================
// Eg.: mixin-space-type    =   @space-type-padding-top
// Eg.: mixin-space-value   =   @base-top-space
// Eg.: mixin-space-size    =   @space-small, @space-medium, @space-large, @space-xlarge
// Eg.: mixin-space-device  =   @space-xs, @space-sm, @space-md, @space-lg

.mixin-space(@mixin-space-type, @mixin-space-value, @mixin-space-size, @mixin-space-device) {
    @mixin-space-type abs(@mixin-space-value * @mixin-space-size * @mixin-space-device);
}



// The following media queries beloow generates different types of padding sizes.
//    Top: .pad-top-s,      .pad-top-m,     .pad-top-l,     .pad-top-xl
//  Right: .pad-right-s,    .pad-right-m,   .pad-right-l,   .pad-right-xl
//   Left: .pad-left-s,     .pad-left-m,    .pad-left-l,    .pad-left-xl
// Bottom: .pad-bottom-s,   .pad-bottom-m,  .pad-bottom-l,  .pad-bottom-xl

// The following media queries beloow generates different types of margin sizes.
//    Top: .mar-top-s,      .mar-top-m,     .mar-top-l,     .mar-top-xl
//  Right: .mar-right-s,    .mar-right-m,   .mar-right-l,   .mar-right-xl
//   Left: .mar-left-s,     .mar-left-m,    .mar-left-l,    .mar-left-xl
// Bottom: .mar-bottom-s,   .mar-bottom-m,  .mar-bottom-l,  .mar-bottom-xl

@media (max-width: @screen-xs-max) {
    .lg-md-content-margin {
        margin-top: 0px;
    }

    .pad {
        &-top {
            &-s {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-top, @base-top-space, @space-xlarge, @space-xs);
            }
        }

        &-bot {
            &-s {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-bottom, @base-bottom-space, @space-xlarge, @space-xs);
            }
        }

        &-right {
            &-s {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-right, @base-right-space, @space-xlarge, @space-xs);
            }
        }

        &-left {
            &-s {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-padding-left, @base-left-space, @space-xlarge, @space-xs);
            }
        }
    }

    .mar {
        &-top {
            &-s {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-top, @base-top-space, @space-xlarge, @space-xs);
            }
        }

        &-bot {
            &-s {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-bottom, @base-bottom-space, @space-xlarge, @space-xs);
            }
        }

        &-right {
            &-s {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-right, @base-right-space, @space-xlarge, @space-xs);
            }
        }

        &-left {
            &-s {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-small, @space-xs);
            }

            &-m {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-medium, @space-xs);
            }

            &-l {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-large, @space-xs);
            }

            &-xl {
                .mixin-space(@space-type-margin-left, @base-left-space, @space-xlarge, @space-xs);
            }
        }
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    // redo the whole process and changing some global variables
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    // redo the whole process and changing some global variables
}

@media (min-width: @screen-lg-min) {
    // redo the whole process and changing some global variables
}

jQuery does not work during css animation

I am currently building a small menu consisting of two images. The image caption on these images was build with this little css stylesheet. CSS CAPTION ANIMATION I am using the images to switch between different containers, filled with text. But since i've integrated the css captions, the jQuery "toggle" statement won't work constantly anymore. It seems like it only works when the animation has stopped. Therefore i can't switch the containers during the css animation. Here is a shortened upload of the construct. (try to switch rapidly between the two divs, by clicking on the images)

Thanks for any help.

Images stacking instead of floating since changing them to an css sprite

Ive been converting a lot of my site to sprites to speed it up. Once i switched a heap of images to a sprite that are in a marquee through css, they aren't floating left anymore but are stacked instead.

Its got be baffled to what the issue is.

Any ideas? http://ift.tt/1LvDDuC

<p class="microsoft marquee">  <span><a href="hd-tropical-island-beach-paradise-wallpapers.htm"><img class="a1"></img></a>
<a href="hd-garfield-and-friends-comic-desktop-wallpapers.htm"><img class="a2"></img></a>
<a href="the-legend-of-zelda-majora%27s-mask-desktop-wallpapers-3ds.htm"><img class="a3"></img></a>
<a href="hd-disney-frozen-wallpapers-for-mobile-phones-1080x1920.htm"><img class="a4"></img></a>
<a href="hd-penguins-of-madagascar-mobile-wallpapers-1080x1920.htm"><img class="a5"></img></a>
<a href="the-augusta-national-golf-course-wallpapers-hd.htm"><img class="a6"></img></a>
<a href="banjo-kazooie-wallpapers-hd-nuts-and-bolts-and-nintendo-64.htm"><img class="a7"></img></a>
<a href="the-legend-of-zelda-twilight-princess-hd-wallpapers-skyward-sword.htm"><img class="a8"></img></a>
<a href="vw-combi-van-hd-wallpapers-volkswagen-hippie-bus.htm"><img class="a9"></img></a>
<a href="monsters-inc-backgrounds-and-monsters-university-wallpapers-hd.htm"><img class="a10"></img></a>
<a href="awesome-minecraft-hd-desktop-wallpapers-1080p-backgrounds-1920x1080.htm"><img class="a11"></img></a>
<a href="despicable-me-2-hd-wallpapers-for-desktop-1920x1080.htm"><img class="a12"></img></a>
<a href="toy-story-1-2-3-wallpapers-hd-1920x1080-backgrounds.htm"><img class="a13"></img></a>
<a href="the-avengers-wallpapers-for-desktop-1920x1080-movie-backgrounds.htm"><img class="a14"></img></a>
<a href="1920x1080-funny-backgrounds-hilarious-wallpapers-for-desktop.htm"><img class="a15"></img></a></span></p>

.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a9, .a10, .a11, .a12, .a13, .a14, .a15
{width:100px; height:58px;
background-image: url('http://ift.tt/1GTKbjo');
  background-repeat: no-repeat;
float: left;}


.a1 {background-position: 0px 0px;}
.a2 {background-position: 0px -64px;}
.a3 {background-position: 0px -128px;}
.a4 {background-position: 0px -186px;}
.a5 {background-position: 0px -244px;}
.a6 {background-position: 0px -302px;}
.a7 {background-position: 0px -366px;}
.a8 {background-position: 0px -424px;}
.a9 {background-position: 0px -482px;}
.a10 {background-position: 0px -540px;}
.a11 {background-position: 0px -598px;}
.a12 {background-position: 0px -656px;}
.a13 {background-position: 0px -714px;}
.a14 {background-position: 0px -772px;}
.a15 {background-position: 0px -830px;}

.marquee {
    width: 235px;

float:left;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px green solid;

}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 30s linear infinite;

}
.marquee span:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }



.microsoft {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2em; height: 2em;

}

Float table elements using only html/css

I'm trying to write a responsive email template at present so am restricted to using html tables and inline css (without the assistance of javascript or media queries) in order to support as many email clients as possible.

Specifically I'd like to float some elements (either entire tables or internal columns) so that they fill the width available evenly but also drop to the next to the line when the width available isn't large enough to accommodate all text.

This is my first attempt which spaces the elements evenly within the width available: http://ift.tt/1K5V3i8.

table { 
    width: 100%;
    max-width: 600px;
    background-color: #eeeeee;
    text-align: justify; 
}
table:after {
    display: inline-block !important;
}
table th { 
    vertical-align:top; 
    text-align: center;
    font-weight:normal; 
}

<table align="center">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>
        <th>Eight</th>
        <th>Nine</th>
        <th>Ten</th>
    </tr>
</table>

This is my second attempt which allows the elements to drop to the next line when necessary but does not evenly distribute the elements within the full width available: http://ift.tt/1QWQYkq.

table { 
    width: 100%;
    max-width: 600px;
    background-color: #eeeeee;
    text-align: justify; 
}
table th { 
    display: inline-block !important;
    vertical-align:top; 
    text-align: center;
    font-weight:normal; 
}

<table align="center">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>
        <th>Eight</th>
        <th>Nine</th>
        <th>Ten</th>
    </tr>
</table>

Is it possible to combine both these effects to distribute the elements evenly but also allow them to drop to the next line when the available width is not sufficient?

Note: I realise it's a little unorthodox to use th elements, however it's to combat an Android quirk.

How do you position div's in html5?

I have been for hours attempting to get several div's to display and align properly. I have looked all over the internet and I just cannot get it right.

What I want is inside a section determined by a theme of a wordpress page, is the title of the space in the top left of that section, an info box to the left of the title, and below both of those a section containing a table.

At this point, I Just need to make a typical web page where I can build the thing i am building and I can worry about adding it into wordpress later.

|-----------------------------------------|-------------------------------------------| |.......................Title......................|...........................Info.....................| |-----------------------------------------|-------------------------------------------| |..........................................................................................................| |.................................................Table.................................................| |..........................................................................................................| |-------------------------------------------------------------------------------------|

Why that is so hard is beyond me.

The other problem is that I wish for this to be browser independent. I would like to figure out a way for it to be displayed in just such a manner on a desktop computer or a tablet or phone screen. (This may not be possible without a little effort but I thought I'd throw it out there.)

The html generated by php:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Knights Tour</title>
<link rel="stylesheet" type="text/css" href="http://bmfmain/kt/game.css">
<script src="http://bmfmain/kt/jquery.min.js"></script>
</head>
<body>
<div id="header">
    <div id="title">
        <h1>Knight's Tour</h1>
    </div>

    <div id="info">
        <p>adsf</p>
    </div>
</div>

<div id="section">

    <table id="game">
        <tr>  
            <td class="tdcls" name="0"></td>  
            <td class="tdcls" name="1"></td>  
            <td class="tdcls" name="2"></td>  
            <td class="tdcls" name="3"></td>  
            <td class="tdcls" name="4"></td>  
            <td class="tdcls" name="5"></td>  
            <td class="tdcls" name="6"></td>  
            <td class="tdcls" name="7"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="8"></td>  
            <td class="tdcls" name="9"></td>  
            <td class="tdcls" name="10"></td>  
            <td class="tdcls" name="11"></td>  
            <td class="tdcls" name="12"></td>  
            <td class="tdcls" name="13"></td>  
            <td class="tdcls" name="14"></td>  
            <td class="tdcls" name="15"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="16"></td>  
            <td class="tdcls" name="17"></td>  
            <td class="tdcls" name="18"></td>  
            <td class="tdcls" name="19"></td>  
            <td class="tdcls" name="20"></td>  
            <td class="tdcls" name="21"></td>  
            <td class="tdcls" name="22"></td>  
            <td class="tdcls" name="23"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="24"></td>  
            <td class="tdcls" name="25"></td>  
            <td class="tdcls" name="26"></td>  
            <td class="tdcls" name="27"></td>  
            <td class="tdcls" name="28"></td>  
            <td class="tdcls" name="29"></td>  
            <td class="tdcls" name="30"></td>  
            <td class="tdcls" name="31"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="32"></td>  
            <td class="tdcls" name="33"></td>  
            <td class="tdcls" name="34"></td>  
            <td class="tdcls" name="35"></td>  
            <td class="tdcls" name="36"></td>  
            <td class="tdcls" name="37"></td>  
            <td class="tdcls" name="38"></td>  
            <td class="tdcls" name="39"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="40"></td>  
            <td class="tdcls" name="41"></td>  
            <td class="tdcls" name="42"></td>  
            <td class="tdcls" name="43"></td>  
            <td class="tdcls" name="44"></td>  
            <td class="tdcls" name="45"></td>  
            <td class="tdcls" name="46"></td>  
            <td class="tdcls" name="47"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="48"></td>  
            <td class="tdcls" name="49"></td>  
            <td class="tdcls" name="50"></td>  
            <td class="tdcls" name="51"></td>  
            <td class="tdcls" name="52"></td>  
            <td class="tdcls" name="53"></td>  
            <td class="tdcls" name="54"></td>  
            <td class="tdcls" name="55"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="56"></td>  
            <td class="tdcls" name="57"></td>  
            <td class="tdcls" name="58"></td>  
            <td class="tdcls" name="59"></td>  
            <td class="tdcls" name="60"></td>  
            <td class="tdcls" name="61"></td>  
            <td class="tdcls" name="62"></td>  
            <td class="tdcls" name="63"></td>
        </tr>  
    </table>

</div>
<script src="http://bmfmain/kt/game.js"></script>
</body>
</html>

Formatting slightly off due to copy/paste.

The css that is currently being used: (Will change as I work the problem.)

html, body 
{
margin: 0;
padding: 0;
}
#header
{
width: 800px;
margin: 0 auto;
float: top;
padding: 5px;

}
#title
{
width: 400px;
text-align: center;
float: left;
position: absolute;
}
#info
{
width: 400px;
text-align: center;
float: right;
position: absolute;
}
#section
{
width: 800px;
height: 800px;
margin: 0 auto;
float: bottom;

}
table 
{
width: 100%;
height: 100%;
}
table, th, td 
{
border: 1px solid #0000cc;
border-spacing: 0.0rem;
}
th, td 
{
width: 8%;
height: 8%;
text-align: center;
background-color: transparent;
}

Again, formatting is off due to not being able to copy/paste code straight into stackexchange.com.

The question is: How do I make the div's appear like the picture above? How do I make the div's appear like the picture above on any platform, computer, tablet, or phone?

Thank you.

Current live example: