Needs updating

ADDING MENU BLOCKS
------------------

To add new menu blocks, use the "Add menu block" link on the administer blocks
page, admin/structure/block. You will then be able to configure your menu block
before adding it.

CONFIGURING MENU BLOCKS
-----------------------

When adding or configuring a menu block, several configuration options are
available:

Basic Options:

Block title
For menu trees that start with the 1st level, the default block title will be
the menu name. For menu trees that start with the 2nd level or deeper, the
default block title will be the title for the parent menu item of the
specified level.

For example, if the active menu trail for the Management menu is: Administer >
Structure > Menus > Main menu, then a menu block configured to start with the
1st level of the Management menu will display a block title of "Management".
And a menu block configured to start with the 3rd level of the Management menu
will display a block title of "Structure".

Block title as link
For menu trees that start with the 2nd level or deeper, the default block
title will be the title for the parent menu item of the specified level. If
this option is checked, the block title will be a link to that menu item.

Administrative title
To help identify the block on the administer blocks page, you can specify a

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

Tools that need to be installed for Sass.
Linux user:
sudo apt-get install ruby1.9.1 Sass is written in Ruby, so you’ll need Ruby installed as well.

sudo gem install sass Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. For more information check this Sass

sudo gem install compass Compass is an open-source CSS Authoring Framework. For more information check this Compass

Windows user:
Installing Sass in windows first of all You have to install Ruby gem. To install Ruby click on the link and follow the instructionsRuby

gem install sass Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. For more information check this Sass

Tools that needs to be install Sass.
Linux user:

sudo apt-get install ruby1.9.1 Sass is written in Ruby, so you’ll need Ruby installed as well
sudo gem install sass Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. For more informantion check this http://sass-lang.com/
sudo gem install compass Compass is an open-source CSS Authoring Framework. For more informantion check this http://compass-style.org/

The Breakpoints module allows you to group breakpoints together. This way other modules can use these groups. The Picture module, for example, allows you to select a breakpoint group when you select the Picture display formatter for a field. The formatter will determine the size of the image to display based on the breakpoints in the selected group.

Following these steps you can create your own groups:

Navigate to the breakpoints configurations page

Go to Configuration » Media » Breakpoints. You will notice you can add your own breakpoints on this page.
In stead, click on "Add a new group":

Configure the breakpoints group

Enter a name for the new breakpoints group and select the breakpoints to include in this group:

Save the form and your new group should show up at the top of the page. You should also see the breakpoints selected on the previous step in this group:

Warning

The Twig theming engine compiles templates into PHP code. By default, the compiled code is stored in RAM, and is not easy to debug.

To make the Twig theming engine save templates in the file system, edit file core/lib/Drupal/Core/CoreBundle.php. Set cache => TRUE in function registerTwig();

This is the default option.

Twig debugging configuration may still change, as per #1843034: Make Twig settings configurable

Currently, Twig cache can only be cleared through Drupal's clear cache interface and it does not respond to changes in a Twig template. This means that if you have set cache set to TRUE until the above issue is in you will need to clear the cache for each template change in order for Drupal to regenerate the template.

The Picture module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints. The Picture module is a backport of the Drupal 8 solution for responsive images, and promises to provide a smooth upgrade path.

Installation

Recommended to download the latest version as usual. This version doesn't use JavaScript to detect the device width, but uses a picture tag and full media queries.

Module dependencies

1. Breakpoints
2. Ctools

Install and enable

1. Place all the modules in: your sites/all/modules directory; or your sites/[my site]/modules directory.
2. Enable the modules at: admin/modules

Configuration

1.Configure your theme

After you have all the modules enabled and ready to go, start with theme configuration. You set the breakpoints for view ports in your theme’s .info file.