Helper classes

Skar.IS includes 5 types of helper classes. Every helper class has !important by its propertiers, which is guaranteeing it will work in spite of other CSS. Every helper class has the prefix h-.

Display

        
.h-displayBlock {
  display: block !important;
}

.h-displayNone {
  display: none !important;
}

.h-displayInline {
  display: inline !important;
}

.h-displayInlineBlock {
  display: inline-block !important;
}

.h-displayTable {
  display: table !important;
}

.h-displayTableCell {
  display: table-cell !important;
}

.h-displayTableRow {
  display: table-row !important;
}

.h-displayGrid {
  display: grid !important;
}

.h-displayFlex {
  display: flex !important;
}

.h-displayInlineFlex {
  display: inline-flex !important;
}

.h-circle {
  border-radius: 50%;
}
        
    

Float

        
.h-floatLeft {
  float: left !important;
}

.h-floatRight {
  float: right !important;
}

.h-floatNone {
  float: none !important;
}
        
    

Links

        
.h-linkUnderlineHover {
  text-decoration: none !important;
  &:hover {
    text-decoration: underline !important;
  }
}

.h-linkNoneHover {
  text-decoration: underline !important;
  &:hover {
    text-decoration: none !important;
  }
}
        
    

Positioning

        
.h-positionAbsolute, .h-positionAbsoluteCenter, .h-positionAbsoluteCover {
  position: absolute !important;
}

.h-positionRelative {
  position: relative !important;
}

.h-positionFixed, .h-positionFixedCenter, .h-positionFixedCover {
  position: fixed !important;
}

.h-positionStatic {
  position: static !important;
}

.h-positionAbsoluteCenter, .h-positionFixedCenter {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
}

.h-positionAbsoluteCover, .h-positionFixedCover {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.h-positionSticky {
  position: sticky !important;
}
        
    

Text

        
.h-textLeft {
  text-align: left !important;
}

.h-textRight {
  text-align: right !important;
}

.h-textCenter {
  text-align: center !important;
}

.h-textJustify {
  text-align: justify !important;
}

.h-whitespaceNowrap {
  white-space: nowrap !important;
}

.h-truncate {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
        
    

Cross-browser compatibility issues

Some of helper classes dont work on certain browsers supported by Skar.IS:

• .h-displayGrid - doesnt work on Chrome 49, iOS Safari 10.2, Opera Mini, Android Browser 4.4 and Samsung Internet 4.
• .h-circle, .h-positionFixed, .h-positionAbsoluteCenter, .h-positionFixedCenter - doesnt work on older versions of Opera Mini
• .h-positionSticky - doesnt work on Internet Explorer 11, Chrome 49, Opera Mini, Android Browser 4.4 and Samsung Internet 4. On other browsers like Mozilla Firefox, newer versions of Google Chrome and UC Browser for android dont work with table elements.