Responsive web design is an approach to building websites that are optimized for browsers across desktops, tablets, smart phones, and other mobile devices based on a single design.
The new responsive web design features in Dreamweaver CC 2015 include visual tooling support for Bootstrap and the ability to add Bootstrap components, a draggable scrubber in live view, and visual media query break points.
Bootstrap is a popular framework because it provides much of the layout and functionality for a website, allowing you to modify it as needed.
I can also use the new features to create a responsive website design from scratch.
The new document dialogue includes options to start a responsive design based on a new or existing Bootstrap style sheet.
In this case, I'll click the Bootstrap tab and select to create a new Bootstrap CSS file.
Then I'll select the number of columns and sizes for the three layouts.
The default settings will work for what I need, so I'll click Create and save my file.
From these settings, Dreamweaver creates the CSS, JavaScript, and fonts and adds the respective Bootstrap files into folders.
These files define the grid system that provides the base layout for my site.
I'll delete placeholder text and use the scrubber to resize live view and click to add additional break points to a new CSS file to keep my base Bootstrap.css intact.
Then I'll double-click to expand live view.
Bootstrap components are reusable, styled components, such as buttons, responsive images, carousels, nav bars, and other elements to quickly define layout and styling.
Here, I'll add the container component to hold most of my pages' content.
Now my page is almost complete.
I just want to add some gallery images.
I'll use the DOM panel to quickly navigate to the column in the art section where I want to add a row for these images.
I'll use the grid row with column Bootstrap component to insert the row with the columns already defined.
Three columns should work, so I'll accept the default and click OK.
The heads-up display in live view in Dreamweaver shows the class selector automatically applied to the row and column divs from the Bootstrap stylesheet.
I'll set additional predefined selectors from the Bootstrap style sheet to set each column width so they resize correctly when the content wraps for optimal display on layouts such as tablets and smart phones.
Then I'll insert the image and nest it into each column.
I have two more images I want to add to this section.
Live view makes it easy to add rows and columns to my grid system.
I can click this icon on the last div column in the row to add columns for the last two images.
Dreamweaver updates the Bootstrap classes in real time, so I can immediately see the effects on my design.
Finally, I'll click Visual Media Query Break Points to visually test the various layouts.
Unlike Creative Suite versions, Dreamweaver CC is a complete, all-in-one tool for building modern, responsive web sites.
Install the latest update to Dreamweaver and check out the new responsive features.
