Basic CSS Styling tips

Submitted by editor on Tue, 11/15/2016 - 14:29

Sizes : em and px

By default on all browsers 1em is equal to 16px. In px sizes are fix and can't zoom in or out but with em, sizes are relative to the parent element. If you need to use zoom feature, use en intend of px. You can also use a mixin SCSS or LESS like

@include fontSize(16);

@mixin fontSize($px) {
  font-size: ($px/16) + em;
}

 

Blank (Space) in :after or :before

:after {
  content: '\00a0';
}

 

SASS (SCSS) and LESS Syntax:

LESS Calculate

width:  calc(~'100% - 50px');

Multiline truncation with ellipsis

/* SASS mixin for multiline*/
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}

.block-with-text {
  @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: white);  
}

 

jQuery Style changes

Add odd, even to a list usin jQuery
Example:
$('div.list-item:even').addClass('even');
$('div.list-item:odd').addClass('odd');

 

Tags

Add new comment