Author Archives: Mina Feniar

Mina Feniar

Bootstrap is a popular CSS responsive framework. It’s feature-packed and will have most of the things you’ll need for developing responsive sites.

Foundation is another popular responsive front-end framework. With this modern HTML5 framework, you can approach web design either mobile first, or from big displays down to mobile sizes.

Main Features:

 

Bootstrap

Foundation

Grid System

Both use grid system, but differ in naming conventions and structure.

  • col-xs-1, col-xs-2,..., col-xs-12  » For Extra small devices Phones (<768px)
  • col-sm-1, col-sm-2, ..., col-sm-12  » For Small devices Tablets (≥768px)
  • col-md-1, col-md-2, ..., col-md-12  » For Medium devices Desktops (≥992px)
  • col-lg-1, col-lg-2, ..., col-lg-12  » For Large devices Desktops (≥1200px)
  • small-1, small-2, ... , small-12  » For Mobile
  • large-1, large-2, ... , large-12  » For Desktop and Tablet

 

Offsets

  • col-xs-offset-1, ..., col-xs-offset-11  » Extra small devices Phones (<768px)
  • col-sm-offset-4, ..., col-sm-offset-11  » Small devices Tablets (≥768px)
  • col-md-offset-4, ..., col-md-offset-11  » Medium devices Desktops (≥992px)
  • col-lg-offset-4, ..., col-lg-offset-11  » Large devices Desktops (≥1200px)
  • small-offset-0, small-offset-2, ... , small-offset-10  » For Mobile
  • large-offset-1, large-offset-2, ... , large-offset-11  » For Desktop and Tablet

 

Menu – Top Nav

  • May include forms, buttons, text and non-nav links.
  • Position can be fixed to top, fixed to bottom and static top.
  • Menu supports only two levels – Plugins added to support multi-level.
  • Plugins added to allow menu hover instead of click – for multilevel menu.

 

  • Positioning the Bar.
  • Clickable Top bar optional – Default hovers.
  • Menu supports multi-level. 

CSS

 

Bootstrap

Foundation

Typography

All HTML headings, Body classes, Abbreviations, Addresses, Blockquotes, lists and Labels (in components).

All HTML headings, lists, labels and Keystrokes.

Buttons

Styles, sizes, active state, disabled state, button tags, Dropdown buttons (in components), Button group (in components with more options) and Button dropdowns (in components with more options).

Styles, sizes, rounded, disabled state, Button Groups, Dropdown Buttons & Split Buttons.

Tables

Striped, Bordered, Hover, Condensed, Contextual and Responsive

Striped only – Default, no more options.

Forms

Inline Form, Horizontal Form, Supported Controls, Static Control, Control States, Control sizing and Help Text.

Forms, different Style radio buttons & checkboxes and Switch (on & off).

Alerts

Dismissable alert optional – Different styles for alert boxes (success, info, warning, & danger). Availability to add links in alert boxes.

Dismissable alert by default – Use Different styles for alert boxes and optional rounded corners.

Panels

Different styles, Header, content and footer.

Build with Predefined HTML Classes.

Progress Bar

Different colors, Basic, stripped, animated and stacked.

Different solid colors and optional rounded corners.

JavaScript and Components

 

Bootstrap

Foundation

Navs

Tabs (includes dropdowns).

Filtering » Pills (In Components).

Section (includes dropdowns).

Filtering » sub-nav (In Navigation).

 

Navigation – Sticky

Affix (JavaScript).

Magellan (JavaScript).

Slider

Carousel (JavaScript).

Orbit (JavaScript).

Pop-up window (Modal dialogs)

Modals (JavaScript).

Reveal (JavaScript).

Collapse

Collapse (JavaScript).

Section (JavaScript).

Images

Add class=”img-responsive” to make images responsive (In CSS).

Interchange (JavaScript).

 

Bootstrap Features

  • Add classes to images – easily styled (rounded, circle and thumbnail).
  • Helper classes (close icon).
  • Use carets to indicate dropdown functionality.
  • More options for Input Groups.
  • Badges.
  • Page header.
  • Jumbotron, A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
  • Media objectAbstract object styles for building various types of components (like blog comments, Tweets, etc).
  • List groups, A flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content
  • Wells, Use the well as a simple effect on an element to give it an inset effect.
  • ScrollSpy.
  • Glyphicons.
  • Disabling responsiveness.
  • Internet Explorer 8 and 9 are supported.

Foundation Features

  • Pricing tables.
  • Side Navigation
  • Flexible Videos.
  • Form Validation – Abide.
  • Responsive light boxes with any size image – Clearing.
  • JoyrideAn extremely flexible plugin that gives users a tour of your site or app when they visit.
  • Right-to-Left Support.

Other Common Features (less detailed):

  • Mobile-first.
  • Use Tooltips.
  • Use Dropdowns (many features and options).
  • Use Thumbnails.
  • Use Pagination.
  • Use Breadcrumbs.
  • Customizable framework.
  • Use Preprocessor (SASS /LESS).