How to customize CSS & HTML for theme?

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

Containers:

• 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.

Example

….

.col-md-12

.col-md-12

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.