Lets, have a take on CSS frameworks...
Any application having a good layer and backbone of consistent Visual design, in which it is been agreed..how different tag, form elements and rich UI controls, how will they render themselves in different browsers.
Any application whether it is 3 pages site or if that is 30,000 pages site or application.
From code consistency purpose, which further translates itself into visual consistency.
As long as the code is kept consistent in the framework and which further agreed by developers when the same code guidelines will be used, visual consistency can be maintained.
Backend or core developers don't bother much about how the application will look, what they are more keen into
whether the supported framework or html+css+js code, can support the functionality they have been taking care of.
Continued... With these UI frameworks, since the application look and feel is maintained and kept consistent. Backend Developers need not much to bother about the code in JSP at front end. Staying away from inline css, embedded code and
reusing the existing code base is highly encouraging practice.
Inline css code and embedded css code... kill the design aesthetics and UI interaction.
For which all backend developers, should not create a mess with it. Specifying their own version of visual appearance.
If they also believe in the fact, that the application they are working upon and developing... will serves an ideal source of bread and butter for ages to come, including themselves also. And they can roll out quick updates effectively, rather then having using an Just-in-time fix. With little precaution and code discipline, Deployments and updates rolling can be made safer and smoother.
The power of reusable framework codebase, provides the user interface expert or the user experience designer the CONFIDENCE, in accomplishing their goals.
As the code guidelines effective usage is followed.
The concern, with these frameworks appears at visual level.. for e.g if we user Twitter Bootstrap.. the whole world may began to smell like Twitter bootstrap.
What if the local vendor, client want to the provide the branding test and dress the application in their way of thinking and style.
BINGO! You are safe.. as long as you know and understand the markup. And can create variety of mocks for the visual design based on existing widgets (drop down, color picker, date picker, modal window, multiselect drop down etc)
/* reusable stuff, like LEGOS */
/* div,p and block elements is viewed as display:block by default */
/* you can change there visual rendering in a line, just like span tag..
by assigning the property display:inline with the help of class */
.block-in,.block-inline {
display: inline
}
.block {
display: block
}
.block-in-b {
display: inline-block
}
/* to hide the tag, at visual level */
.block-no {display: none}
/* The tag will be hidden, but it will occupy some height */
.visi-hide {visibility: hidden;}
/********/
.float-l {
float: left !important
}
.float-r {
float: right !important;
}
.clear-cf {
float: none;
clear: both;
}
/* .clearfix{} is also good to use */
/* For text alignment*/
.txt-l {text-align: left}
.txt-r {text-align: right}
.txt-c {text-align: center}
/* reusable margins & padding */
/* padding:1px */
.p-1 { padding: 1px;}
.p-t1 { padding-top: 1px;}
/* padding:2px */
.p-2 {padding: 2px;}
.p-t2 {padding-top: 2px;}
/* padding:10px */
.p-10{padding:10px;}
.p-t10 {padding-top: 10px ;}
.p-b10 {padding-bottom: 10px;}
.p-l10 {padding-left: 10px;}
.p-r10 {padding-right: 10px;}
/**/
.m-b1{margin-bottom:1px;}
.m-t2 {margin-top: 2px !important;}
.m-t3 {margin-top: 3px;}
.m-b3 {margin-bottom: 3px}
.m-5 {margin: 5px;}
/* Reset margins and padding selectively */
.reset-m {margin: 0 !important}
.reset-m-l {margin-left: 0 !important}
.reset-m-r {margin-right: 0 !important}
.reset-m-t {margin-top: 0 !important}
.reset-m-b {margin-bottom: 0 !important}
/* Padding */
.reset-p {padding: 0 !important}
.reset-p-l {padding-left: 0 !important}
.reset-p-r {padding-right: 0 !important}
.reset-p-t {padding-top: 0 !important}
.reset-p-b {padding-bottom: 0 !important}
/* auto width for select html tag */
.auto-width select{width:auto;}
/* Reseting the border and Reseting the border-radius classes **/
.no-border {border: 0 none !important;}
.no-border-radius {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-khtml-border-radius: 0 !important;
border-radius: 0 !important;
}
.no-btl{
border-top-left-radius :0;
-moz-border-radius-topleft :0;
-webkit-border-top-left-radius:0;
}
.no-btr{
border-top-right-radius :0;
-moz-border-radius-topright :0;
-webkit-border-top-right-radius:0;
}
.no-bbl{
border-bottom-left-radius :0;
-moz-border-radius-bottomleft :0;
-webkit-border-bottom-left-radius:0;
}
.no-bbr{
border-bottom-right-radius :0;
-moz-border-radius-bottomright :0;
-webkit-border-bottom-right-radius:0;
}
/**/
.border-radius-5 {
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
-khtml-border-radius: 5px !important;
border-radius: 5px !important;
}
<div class="footer-container">
<div class="p-t10 p-b5 ">
<div class="row-fluid foot-inner">
<div class="span6 ">
<div class="block-in-b key-pop p-r20 p-l20">
<input type="checkbox" id="hotkeys"checked name="uni_c1"
class="uni_style tip"></input>
<a class="popover-link color-white" data-toggle="popover" title=" <spring:message code="label.hotkeys" />" data-placement="top"> <spring:message code="label.hotkeys" />
</a>
</div>
</div>
</div>
</div>By Gaurav Mishra
Why I do not like to write css, instead getting away from stylesheets. Focussing on markup and using the classes and id and reusable components. Just like author use verbs, nouns or adjectives to construct its sentence.
I am Product UIX Designer. My interest in this direction is for good product usability, which sum up slowly and evolving out for the better UX factually. To Observe, think and reflect for Hi-Performing Agile teams that's my parallel goal.
