SalahHamza

Grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

via: Wikipedia

Installation

1- install grunt-cli globally:

SalahHamza

The web and Images

Responsive Images

Use relative size images

The key to handling images is to use relative widths to prevent them from accidentally overflowing the container and eventually the viewport, so it is better to pre-set the width of all image tags to 100%. In fact it is recommended to do that on img, video, embed and object elements:

img, video,
embed, object {

SalahHamza

Flexbox

Let's say we have a set of items with a container around them, like this:

<div class="container">
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item yellow"></div>

SalahHamza

Useful Links

• CSS Properties
  • http://www.w3.org/community/webed/wiki/CSS/Properties
• Truncate text
  • for 1 line
    • https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
  • for multiple lines
• http://joelsaupe.com/programming/multiple-line-ellipsis-css/