Home | Docs  
 
 
   
  Categories


Home
  -  SP-Cart 2.0 architecture peculiarities -
Special classes

Special classes


Special classes

The so called special classes are provided to minimize CSS file size. They can be used both separately

1.
 //Creating a floating element
2.
 <div class="float-left">It's a floating block</div>
3.
 <div>It's a standard block</div>


 


and together with standard classes (in this case there should be gaps in class names)

1.
 //Creating a floating element on basis of a notice box
2.
 <div class="notice-box float-left">It's a floating block</div>
3.
 <div>It's a standard block</div>

 

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   

List of special classes

  • input-text - used for text inputs, the width of the element is equal to the parameter size
  • input-textarea - used for text areas, the width of the element is equal to the parameter cols
  • input-textarea-long - used for all text areas in forms, the width is defined through css
  • input-text-short - used for inputs such as Position, Amount, etc. in forms and tables, the width is defined through CSS (30px)
  • input-text-medium - used for inputs such as Price, Weight, Product Code, etc. in forms
  • input-text-large - used for inputs such as Title, Name, etc. in forms
  • hand - used to change the mouse cursor to a hand when the mouse is over an element
  • nowrap - used instead of the nowrap parameter in tables so that words are not wrapped to the
    next line
  • uppercase - all letters in words will be capital
  • lowercase - all letters in words will be small
  • strong - the word will be in bold type
  • small-note - the font size will be smaller than the main one, the font size is defined in CSS
  • error-text - red color font
  • solid-border - there will be a 1px frame around the element
  • float-left - a floating element is created, it is located on the left, other elements flow it around from
  • the left (relative to runaround elements)
  • float-right - a floating element is created, it is located on the right, other elements flow it around
    from the right (relative to runaround elements)
  • clear - defined for a parent block if this block contains only floating elements in order to stretch it
    over the area occupied by floating blocks
  • no-padding - the attribute padding, which is specified in CSS or inherited, is zeroed out
  • no-margin - the attribute margin, which is specified in CSS or inherited, is zeroed out
  • valign - element is aligned in the middle with the baseline of the row where it is located
  • no-valign - element is aligned with the baseline of the row where it is located
  • checkbox - used to align check boxes in tables and forms
  • radio - used to align radio buttons in tables and forms
  • no-items - used to design a block where the notification 'no items found' is displayed
  • center - used to align text and inline elements in the middle inside the block
  • right - used to align right text and inline elements inside the block
  • table-fixed - used to assign the attribute table-layout: fixed; to a table (in this case it is necessary to specify the width of cells)
  • scroll-x - creating horizontal scrolling
  • no-scroll - scrolling will not appear when block is overfilled
  • bullet-list - list of markers (by default all lists are without markers)
  • hidden - used instead of style="display: none;", hides the element
     
              << Read Previous                                                                                                        Read Next>>
     
Copyright © 2009 SP-CART.COM. All Rights Reserved.