Category Archives: css
A good resource for flat UI design
css management
from: http://stackoverflow.com/questions/2253110/managing-css-explosion
The following are the rules I am myself trying to adhere to (not that I always manage to.)
- Refactor early, refactor often. Frequently clean up CSS files, fuse together multiple definitions of the same class. Remove obsolete definitions immediately.
- When adding CSS during fixing bugs, leave a comment as to what the change does (“This is to make sure the box is left aligned in IE < 7”)
- Avoid redundancies, e.g. defining the same thing in
.classnameand.classname:hover. - Use comments
/** Head **/to build a clear structure. - Use a prettifier tool that helps maintain a constant style. I use Polystyle, with which I’m quite happy (costs $15 but is money well spent). I’m sure there are free ones around as well (Update: like for example Code Beautifier based on CSS Tidy, an open-source tool I’ve not used myself yet but looks very interesting.)
- Build sensible classes. See below for a few notes on this.
- Use semantics, avoid DIV soup – use
<ul>s for menus, for example. - Define everything on as low a level as possible (e.g. a default font family, colour and size in the
body) and useinheritwhere possible - If you have very complex CSS, maybe a CSS pre-compiler helps. I’m planning to look into xCSS for the very same reason soon. There are several others around.
- If working in a team, highlight the necessity of quality and standards for CSS files as well. Everybody’s big on coding standards in their programming language(s), but there is little awareness that this is necessary for CSS too.
- If working in a team, do consider using Version Control. It makes things that much easier to track, and editing conflicts that much easier to solve. It’s really worth it, even if you’re “just” into HTML and CSS.
- Do not work with
!important. Not only because IE =< 7 can’t deal with it. In a complex structure, the use of !important is often tempting to change a behaviour whose source can’t be found, but it’s poison for long-term maintenance.
Building sensible classes
This is how I like to build sensible classes.
I apply global settings first:
body { font-family: .... font-size ... color ... }
a { text-decoration: none; }Then, I identify the main sections of the page’s layout – e.g. the top area, the menu, the content, and the footer. If I wrote good markup, these areas will be identical with the HTML structure.
Then, I start building CSS classes, specifying as much ancestry as possible and sensible, and grouping related classes as closely as possible.
div.content ul.table_of_contents
div.content ul.table_of_contents li
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumberThink of the whole CSS structure as a tree with increasingly specific definitions the further away from the root you are. You want to keep the number of classes as low as possible, and you want to repeat yourself as seldom as possible.
For example, let’s say you have three levels of navigational menus. These three menus look different, but they also share certain characteristics. For example, they are all <ul>, they all have the same font size, and the items are all next to each other (as opposed to the default rendering of an ul). Also, none of the menus has any bullet points (list-style-type).
First, define the common characteristics into a class named menu:
div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }then, define the specific characteristics of each of the three menus. Level 1 is 40 pixels tall; levels 2 and 3 20 pixels.
Note: you could also use multiple classes for this but Internet Explorer 6 has problems with multiple classes, so this example uses ids.
div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }The markup for the menu will look like this:
<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>If you have semantically similar elements on the page – like these three menus – try to work out the commonalities first and put them into a class; then, work out the specific properties and apply them to classes or, if you have to support Internet Explorer 6, ID’s.
Miscellaneous HTML tips
If you add these semantics into your HTML output, designers can later customize the look of web sites and/or apps using pure CSS, which is a great advantage and time-saver.
- If possible, give every page’s body a unique class:
<body class='contactpage'>this makes it very easy to add page-specific tweaks to the style sheet:body.contactpage div.container ul.mainmenu li { color: green } - When building menus automatically, add as much CSS context as possible to allow extensive styling later. For example:
<ul class="mainmenu"> <li class="item_first item_active item_1"> First item </li> <li class="item_2"> Second item </li> <li class="item_3"> Third item </li> <li class="item_last item_4"> Fourth item </li> </ul>This way, every menu item can be accessed for styling according to its semantic context: Whether it’s the first or last item in the list; Whether it’s the currently active item; and by number.
Note that this assigning of multiple classes as outlined in the example above does not work properly in IE6. There is a workaround to make IE6 able to deal with multiple classes; I haven’t tried it yet but looks very promising, coming from Dean Edwards. Until then, you will have to set the class that is most important to you (item number, active or first/last) or resort to using IDs. (booo IE6!)
//
css with super powers
example of creating beveled frame in CSS
good icon site
Example of a jQuery plugin to animate table rows
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);Basic Usage:
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');Pass slide options as individual arguments:
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as objectBasically, for the slide down animation, the plug-in wraps the contents of the cells in DIVs, animates those, then removes them, and vice versa for the slide up (with some extra steps to get rid of the cell padding). It also returns the object you called it on, so you can chain methods like so:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row redExplanation on animating table rows
from: http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html
jQuery contains a powerful and flexible animation engine. However, it has some limitations, primarily due to underlying limitations of CSS-based layout
For example, there is no simple way to slideUp() a table row (<tr> element). The slideUp animation will animate the element’s height to zero. However, a table row is always tall enough to show its elements, so the animation cannot actually shrink the element.
To work around this, we can wrap the contents of each cell in a <div> element, then slideUp() the <div> elements. Doing this in the HTML would create ugly and non-semantic markup, so we can do it in jQuery instead.
For example: Demo
$('tr')
.children('td, th')
.animate({ padding: 0 })
.wrapInner('<div />')
.children()
.slideUp(function() { $(this).closest('tr').remove(); });Explanation:
- Get all of the cells in the row
- Animate away any padding in the cells
- Wrap all of the contents of each cell in one
<div>element for each cell (calling wrapInner()) - Select the new
<div>elements - Slide up the
<div>s, and remove the rows when finished.
If you don’t remove the rows, their borders will still be visible. Therefore, if you want the rows to stay after the animation, call hide() instead of remove().
LightBox example that works in IE7
<div class=”DAT_LightBox_Shadow”></div>
<div class=”DAT_LightBox” id=”dnbSummaryDetail”></div>
<script>
$(document).ready(function(){
$(“.DAT_LightBox_Shadow”).click(function(){
$(“.DAT_LightBox, .DAT_LightBox_Shadow”).hide();
});
$(“#summaryTable”).on(“click”, “a[id^=\”dnbSummaryDetail\”]”, ‘hello’, showDNBSummaryDetail);
});
function showDNBSummaryDetail(evt) {
$(“#dnbSummaryDetail”).find(‘div[id$=”CIF”]’).text(“You piece of shit”);
$(“.DAT_LightBox_Shadow, #dnbSummaryDetail”).show();
}
</script>
div.DAT_LightBox {
position: absolute;
top: 15%;
left: 50%;
margin-left: -250px;
background: #fff;
z-index: 1001;
overflow: auto;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
display: none;
}
div.DAT_LightBox_Shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 1000;
display: none;
}
div#dnbSummaryDetail {
width: 500px;
height: 500px;
font-family: sans-serif;
}
Altar Moss 