DMXzone Bootstrap 3 Features Unveiled

January 20, 2014

Next generation perfect site layout in just a few minutes

We're just two days away from the official release of DMXzone Bootstrap 3 and as always, today we'll show you some of the awesomeness packed in it. DMXzone Bootstrap 3 is now responsive by default! There are four grid systems so it makes it easy to create great-looking web pages and web apps, and their designs are automatically compatible with various devices. It comes with full support for Bootstrap 3 mobile first design and a dedicated floater that gives you a quick access to all the options you need. These and many more great features you can check our below.

Stay tuned for the official release on Wednesday and more insights coming tomorrow!

The Story

General Features

  • Full support for the Bootstrap 3 mobile first design - Due to the major changes in the Grid, Bootstrap 3 targets smaller devices first and then expands components and grids (cascades up) for larger screens. When you declare a specific grid size, that is the grid for that size and above.


  • Bootstrap 3 grid dedicated floater - With the greatly helpful and easy accessible floating panel you have all the needed options just a mouse click away. 


  • Design for each device differently, directly in Dreamweaver - There are four Grid systems included in Bootstrap 3 for extra small devices, such as phones < 768px, small devices (tablets>= 768px), medium devices (desktops>= 992px) and large devices (desktops>= 1200px).


  • Fully responsive layout within Dreamweaver - When designing your layout you can follow the work in progress for mobile and desktop browsers directly in Dreamweaver by selecting the desired size for mobile phones, tablets, desktop and large desktop.


  • Twitter Bootstrap 12-column responsive grid - It includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.


  • Support for advanced grid layouts and nested columns - You can add as many rows as you wish within a column and it's incredibly easy and much more intuitive!


  • Great Design View integration - The DMXzone Bootstrap 3 allows you to add/delete cells, rows and containers as well as merge cells, duplicate and spread them in just a mouse click time.


  • Supported devices - DMXzone Bootstrap supports different devices and screen resolutions.


  • DMXzone Boostrap Options Command - You can choose how to include your bootstrap on your pages; normal, minified or even through CDN, so you can achieve the fastest performance for your website.


  • Automatic file copy and include - If you don't like to automatically copy bootstrap files and inclusion, you can switch it off! 

Bootstrap Grid Management

Grid Cells Management

  • Add cell left  - will add a new grid cell on the left side of the current selected cell
  • Add cell right - will add a new grid cell on the right side of the current selected cell
  • Duplicate cell - will duplicate the selected cell
  • Merge with left cell - will merge the contents of the current grid cell with its right neighbor
  • Merge with right cell - will merge the contents of the current grid cell with its left neighbor
  • Delete cell - will delete the selected cell

Grid Row Management

  • Add row above - will add a grid row above the current selected row
  • Add row inside - will add a grid row inside the current selected cell
  • Add row below - will add a grid row below the current selected row

General Alignment and selection options

  • Spread cells - will make all grid cells on the same row equal in size
  • Select cell - selects the cells and opens the Property inspector
  • Add container - adds a fluid/fixed container that wraps the page content

Cell properties

  • Increase offset - increases the number of columns before the cell
  • Decrease offset - decreases the number of columns before the cell
  • Increase push - will increase the number of pushed columns in the grid right
  • Decrease push - will decrease the number of pushed columns in the grid right
  • Increase pull - will increase the number of pulled columns in the grid left
  • Decrease pull - will decrease the number of pulled columns in the grid left
  • Expand to left - will expand the width of the current grid cell getting the needed width from its left neighbor
  • Contract from left - will contract the width of the current grid cell and increase the width of its left neighbor
  • Expand to right - will expand the width of the current grid cell getting the needed width from its right neighbor
  • Contract from right - will contract the width of the current grid cell and increase the width of its right neighbor

Related Blog Posts

Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>

Comments

Be the first to write a comment

You must me logged in to write a comment.