*NOW WITH RESPONSIVE DESIGN TOOLS AND FLUID GRID* An extension for popular opensource editor Brackets , to design and customize html pages/applications along with transition and key-frame CSS3 animation support. It also supports creation of design snippets or bookmark fragments from existing design under custom tagging section in widget toolbox to facilitate reuse later. YouTube channel for Brackets Designer -
In 2.0.0 release
A screen shot with responsive controls enabled.
Context Menu ( @ Ruler Corner ) to activate responsive controls and fluid grid configuration.
Media Explorer to remove media queries
Add Breakpoint function with min/max filter
Fluid grid configuration for column width, gutter and content padding
Color coded selector list to specify whether a particular selector is present in the current active breakpoint. The add ('+') control gets activated when the currently selected css selector definition is not present in the current breakpoint.
New Styles task shortcut to link, unlink and edit stylesheets.
An extension for the popular open-source code editor Brackets to design and customize web UI with HTML and CSS
When a document with ".html/.shtml" is opened in active editor as current document the "CodeView" button drop down is visible in the bottom right corner ( in StatusBar before 'extension' DropDown ). Please refer to the following image to have an illustration of the position and view options.
Here is a small animation to depict how to enable Design Mode.
NOTE: If you enable Design Mode and then navigate to another html file , Design Mode will be retained and the new document will be rendered in Design Mode. But if you navigate to any non html file while in Design Mode , the editor will switch back to code view and if you wish to enable Design Mode for the next html file you open , you need to follow the view options menu again described earlier.
The following snapshots will show the different controls and their access source
Can be used as a Brackets extension only in its current form. Install Brackets. GoTo Extension Manager --> Available tab and search for "html-designer"
html-designer is released under MIT License.
For queries and discussions, please contact: [email protected]
Moreover any contribution towards stabilization or new feature addition is most welcome
1.0.1 * Bug Fixes in Selection * Minor UI changes
1.0.2 * Cascade update of pseudo selectors on element ID change using attribute editor
1.0.3 * New Text Toolbox Inclusion * Usability Improvement
1.0.4 * Fragment/Template Loader fix * Enable partial design view of ".shtml" files
1.0.5 * Widget Toolbox UI upgrade * Inclusion of text and table element in widget toolbox
1.0.6 * Scattering of text toolbox icons fix while PSD Extract plugin is installed
1.0.7 * Selection rectangle position fix while parent having border
1.0.8 * Design editor context menu upgrade with cut/copy/paste/delete icons
1.0.9 * New Multiselect toolbox display on multiselect.
* Vertical spacing feature * Horizontal spacing feature * Height normalization to multiselect box or reference element * Width normalization to multiselect box or reference element * Pre Selection rectangle display fix
1.0.10 * ColorPicker fixes in Background/Border/Shadow/Text Tollboxes to allow edit in the host input fields
1.0.11 * input type-checkbox selector removal from extension css as it might affect other checkboxes across the application
1.0.12 * Adding box-sizing attribute in Layout Toolbox * More select options for display attribute
1.0.13 * Fix for hiding Brackets split view resizer while launching Design view from split view mode * Pre selection UI highlight change ( with transparent blue fill )
1.0.14 * Enable design view on '.htm' files * Fix for sidebar resizer control while design view is active
1.0.15 * Preselection highlight on HTML fix * Widget toolbox UI change. * Addition of Iframe as an element in widget toolbox * Attribute editor re-styling * Removed bootstrap widgets from Widget toolbox ( see TODO section )
1.2.0 * Design snippet creation/tagging/bookmark support. * Design snippet edit support. * Design snippets import/export manually.
1.2.1 * Default stylesheet selection settings capability to let the tool know , which stylesheet to choose when creating/cloning elements using widget palette (NOTE: Unless a settings path "swmitra.html-designer.settings-file-path" is configured in preferences and Brackets reloaded, settings screen will not be shown. Settings screen will show all the stylesheets loaded for the current file in design mode and only one of them can be identified as "Default")
1.2.2 * Docked Widget toolbox on the left of design area for better usability.
1.2.3 * Minor UI update in Widget Toolbox
1.2.4 * Online User tracking service integration
1.2.5 * Hiding preselection while pointer leaves design area or design window getting resized
2.0.0 * Responsive design tools(media queries) * Fluid grid support with click to distribute feature * Nested distribution across grids * Docked Layout , CSS and Atrribute editor * Styles tools to link , unlink and edit style sheets * Length unit conversion by retaining current position
2.0.1 * Stylesheet list refresh button in tools shorcut
2.0.2 * Fix for addition of border-color property on selection * Colorpicker update on text color sync * Selection rectangle fix for some edge cases
2.0.3 * Minor z-order css fix to arrange designers modal plane on top of all controls
2.0.4 * Bug fix to refresh "add to media" button for current selector beside media label when a new media is being inserted
2.0.5 * Minor UI change - Docked toolbar opacity change
2.0.6 * Removing Online user tracking client