– EM BaseTheme is based on Bootstrap front-end framework with custom grid system 24 columns. For more information http://getbootstrap.com/. Basic usage:


  • Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
  • Use .container for a responsive fixed width container.


  • Use .container-fluid for a full width container, spanning the entire width of your viewport


Grid System – http://getbootstrap.com/css/#grid-example-fluid

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .row.
  • The negative margin is the reason why the examples below are outdented. Thus, content in grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns use three .col-xs-4.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md-class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
  • See how aspects of the Bootstrap grid system work across multiple devices with a handy table.







Typography – http://getbootstrap.com/css/#type

  • Alignment classes: Easily realign text to components with text alignment classes.

    Left aligned text.

    Center aligned text.

    Right aligned text.

    Justified text.

    No wrap text.

  • Transformation classes: Transform text in components with text capitalization classes.

    Lowercased text.

    Uppercased text.

    Capitalized text.

Code – http://getbootstrap.com/css/#code

Tables – http://getbootstrap.com/css/#tables

Responsive tables: Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on any screen larger than 768px wide, you will not see any difference in these tables. Example

Forms – http://getbootstrap.com/css/#forms

Buttons – http://getbootstrap.com/css/#buttons

Images – http://getbootstrap.com/css/#images

  • Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
  • Add classes to an element to easily style images in any project. Cross-browser compatibility: keep in mind that Internet Explorer 8 lacks support for rounded corners

Helper classes – http://getbootstrap.com/css/#helper-classes

  • Quick floats: Float an element to the left or right with a class.!important is included to avoid specificity issues. Classes can also be used as mixins.

  • Showing and hiding content: Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins. .hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead. Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

Responsive utilities: For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.


EM BaseTheme is based on Less front-end framework: http://lesscss.org/ To start creating your own styles, lets create a mycustom.less inside skin/frontend/default/embasetheme/css/. Go to backend, EMThemes > EM BaseTheme Settings, in section Theme Design > CSS tab, enter value mycustom.less in field Additional CSS File(s) To access these variables in your custom css file mycustom.less, use syntax below: css-selector { css-attribute:@variable; } or css-selector { mixin(@variable); } – Example body{ .changeAllColor(@body_text2_color; @body_bg_color); .changeFont(@general_font); }There are some variables of the variations that you can access inside your custom css:

  1. @screen-large-desktop
  2. @screen-desktop
  3. @screen-tablet
  4. @desktop
  5. @tablet
  6. @page_bg_color
  7. @page_bg_position
  8. @page_bg_repeat
  9. @page_bg_attachment
  10. @box_shadow
  11. @rounded_corner
  12. @general_font
  13. @h1_font
  14. @h2_font
  15. @h3_font
  16. @h4_font
  17. @h5_font
  18. @h6_font
  19. @header_bg_color
  20. @header_bg2_color
  21. @header_bg3_color
  22. @header_bg4_color
  23. @header_bg5_color
  24. @header_bg_position
  25. @header_bg_repeat
  26. @header_text_color
  27. @header_text2_color
  28. @header_text3_color
  29. @header_line_color
  30. @topmenu_bg_color
  31. @topmenu_hover_bg_color
  32. @topmenu_text_color
  33. @topmenu_hover_text_color
  34. @topmenu_line_color
  35. @topmenu_font
  36. @vnav_bg_color
  37. @vnav_hover_bg_color
  38. @vnav_text_color
  39. @vnav_hover_text_color
  40. @vnav_line_color
  41. @vnav_font
  42. @dropmenu_bg_color
  43. @dropmenu_text_color
  44. @dropmenu_text2_color
  45. @dropmenu_text3_color
  46. @dropmenu_line_color
  47. @dropmenu_font
  48. @body_bg_color
  49. @body_bg2_color
  50. @body_bg3_color
  51. @body_bg4_color
  52. @body_bg5_color
  53. @body_bg6_color
  54. @body_bg_position
  55. @body_bg_repeat
  56. @body_text_color
  57. @body_text2_color
  58. @body_text3_color
  59. @body_text4_color
  60. @body_text5_color
  61. @body_text6_color
  62. @body_text7_color
  63. @body_text8_color
  64. @body_line_color
  65. @body_line2_color
  66. @footer_bg_color
  67. @footer_bg_position
  68. @footer_bg_repeat
  69. @footer_text_color
  70. @footer_text2_color
  71. @footer_text3_color
  72. @footer_line_color
  73. @btn1_bg_color
  74. @btn1_text_color
  75. @btn1_line_color
  76. @btn1_font
  77. @btn2_bg_color
  78. @btn2_text_color
  79. @btn2_line_color
  80. @btn2_font
  81. @btn3_bg_color
  82. @btn3_text_color
  83. @btn3_line_color
  84. @btn3_font
  85. @btn4_bg_color
  86. @btn4_text_color
  87. @btn4_line_color
  88. @btn4_font


You can learn more about Font Awesome CSS here: http://fortawesome.github.io/Font-Awesome/