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

 

Ebraam Tharwat

In this article i 'll share with you some techniques that can be used to implement inheritance in JavaScript. JavaScript is a prototype-based language which contains no class statement, such as is found in C# or Java (confusing, right!).  Instead, JavaScript uses functions as classes (no "classes", just objects).

JavaScript Inheritance techniques:

Pseudo-classical inheritance:

  1. Define the base object with it's properties normally.
  2. Define the derived object  then change it's prototype to be an object of type base object (e.g. derivedObj.prototype = new baseObj();).
  3. Using the derived object prototype, we can add new functions/properties or even modify base object functions with a new implementaion.

Prototypal Inheritance:

  1. Make a helper function create which simply takes an object as a parameter and returns an empty new object that inherits from the object we passed to it.
  2. Then we can modify base object functions implementation or add a new functions/properties.

Parasitic Inheritance:

  1. Define the base object with it's properties normally.
  2. Inside the derived object function/constructor create a base object instance. That object is then 'll be enhanced or augmented with the new properties of the derived object.
  3. Return the base object instance we just created.

sara

When it’s too negative all around, when your energy is drained or when you are just exhausted because of all the bad news that overwhelms us all the time…don’t hide, don’t be passive and don’t pretend that bad actuality doesn’t exist, just HELP.

One sunny Saturday, I decided to go and help the children in a poor area to play and organize games for them. I went there with the perspective of helping other people and make them enjoy the day, just to find out that I was the one who received all the joy and the happiness of that day. No matter how simple my role was but meeting new people, smiling at their faces, chatting with complete strangers yet awesome characters, and finally playing with them, brought waves of happiness to my soul and renewed my energy, it extended my ability to give and maximized my passion for life.

GO volunteer and DO help others…not just for them but for YOURSELF.