*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 …
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
swmitra Merge pull request #13 from xorandnor/master
Design View for XHTML files
Latest commit 6734888 Feb 16, 2017
Permalink
Failed to load latest commit information.
attribute Responsive Tools Aug 28, 2015
borderradiusresizer Responsive Tools Aug 28, 2015
controlhtml Styles tools in docked toolbox Sep 14, 2015
css Minor UI change Oct 7, 2015
editmodule Source Code commit Jul 6, 2015
grid Responsive Tools Aug 28, 2015
html Responsive Tools Aug 28, 2015
lib Target Selector fixes Sep 8, 2015
propertysheet Bug fixes Sep 16, 2015
pseudomarker Source Code commit Jul 6, 2015
resizer Source Code commit Jul 6, 2015
responsive Bug Fix Sep 29, 2015
stylemodule Bug fixes Sep 16, 2015
toolboxhtml Minor UI fix Sep 21, 2015
view Styles tools in docked toolbox Sep 14, 2015
widgetprofiles Fluid Grid and UI changes Aug 8, 2015
.DS_Store Source Code commit Jul 6, 2015
AlignmentHandler.js Multiselect Tools Implementation Jul 23, 2015
BorderRadiusHandler.js Source Code commit Jul 6, 2015
BoxModelCreator.js Responsive Tools Aug 28, 2015
BoxModelMarker.js Source Code commit Jul 6, 2015
Commands.js Source Code commit Jul 6, 2015
CommonUtils.js Design View for XHTML files Feb 9, 2017
ContainmentEditHandler.js Widget Toolbox Upgrade Jul 20, 2015
ContextMenuActionHandler.js Source Code commit Jul 6, 2015
ContextMenuHandler.js Source Code commit Jul 6, 2015
DesignAreaSandboxingHandler.js Source Code commit Jul 6, 2015
DesignDOMUpdater.js Responsive Tools Aug 28, 2015
DesignScrollManager.js More Features Sep 7, 2015
DesignerSettingsManager.js Stylesheet selection settings Aug 6, 2015
DistributionHandler.js Multiselect Tools Implementation Jul 23, 2015
DocumentFragmentHandler.js More Features Sep 7, 2015
DragAndDropCreationHandler.js Source Code commit Jul 6, 2015
DragHandler.js Responsive Tools Aug 28, 2015
ElementCopyHandler.js Source Code commit Jul 6, 2015
ElementDeleteHandler.js Source Code commit Jul 6, 2015
ElementHrchyBreadcrumbHandler.js Source Code commit Jul 6, 2015
ElementMarkupEditHandler.js Source Code commit Jul 6, 2015
ElementSearchHandler.js Source Code commit Jul 6, 2015
InteractionModeHandler.js Stability changes for Responsive Tools Aug 30, 2015
LICENSE License Copyright change. Still MIT though. Jul 21, 2015
LayoutDecisionManager.js Performance improvement and media features Sep 10, 2015
MultiSelectionClickControl.js Source Code commit Jul 6, 2015
MultiSelectionDrawControl.js Multiselect Tools Implementation Jul 23, 2015
MultiSelectionHandler.js Responsive Tools Aug 28, 2015
PersistenceManager.js Bug Fixes Jul 28, 2015
PreSelectionHandler.js Pre-selection show/hide fix Aug 18, 2015
PrecisionPositionHandler.js Source Code commit Jul 6, 2015
PrecisionResizeHandler.js Source Code commit Jul 6, 2015
README.md Removing Online user tracking client Dec 21, 2015
ResizeHandler.js Source Code commit Jul 6, 2015
RotationHandler.js Source Code commit Jul 6, 2015
SelectAndDrawCreationHandler.js Custom Design Snippet support Aug 1, 2015
SelectionHandler.js Bug fixes Sep 16, 2015
SelectionUtility.js Multiselect Tools Implementation Jul 23, 2015
TargetDOMEventRouter.js Fluid Grid and UI changes Aug 8, 2015
WidgetCreationManager.js Source Code commit Jul 6, 2015
main.js Removing Online user tracking client Dec 21, 2015
package.json Removing Online user tracking client Dec 21, 2015

README.md

==================== Whats New!

In 2.0.0 release

  • Fluid Grid support with click to distribute feature
  • Responsive design tools ( Resolution breakpoints as media queries )
  • Docked Layout,css,attributes editor
  • Seamless Unit conversion by retaining current position
  • Styles tools to link , unlink and edit style sheets

A screen shot with responsive controls enabled.

Responsive Controls

Context Menu ( @ Ruler Corner ) to activate responsive controls and fluid grid configuration.

Responsive Controls

Media Explorer to remove media queries

Responsive Controls

Add Breakpoint function with min/max filter

Responsive Controls

Fluid grid configuration for column width, gutter and content padding

Responsive Controls

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.

Responsive Controls

New Styles task shortcut to link, unlink and edit stylesheets.

Responsive Controls

==================== html-designer

An extension for the popular open-source code editor Brackets to design and customize web UI with HTML and CSS

Brackets HTML Designer channel on YouTube

Basic UI


How to enable Design Mode?

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. View Options

Here is a small animation to depict how to enable Design Mode.

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.


Features

  • WYSIWYG design editor to design and customize HTML pages
  • Rendering of HTML page with Split view support for stylesheet editing and HTML page source editing
  • Illustration controls for popular CSS properties like -
    • Layout ( BoxModel)
      • All CSS layout support
      • Reference anchoring change by retaining current position( when element is positioned)
      • Layouting parameters change by retaining current position
      • Intelligent unit persistance and incr/decr logic based on unit present in target selector
    • Background Properties
    • Shadow Properties
    • Transformation properties
    • Border Properties
    • Transition Animation(with Preview)
    • CSS3 Keyframe animation(With Preview)
  • Automatic CSS selector selection based on specificity for property change persistence
  • User can override tools automatic selection for property change presistense
  • Drag Selection to position ( Decision tree driven property selection for positioning a positioned or non-positioned element )
  • Drag Resize controls to Resize
  • Precise positioning by using arrow keys to shift by 1 pixel
  • Precise Resizing by using shift+arrow keys to increase/decrease height/width by 1 pixel
  • Shift+Drag to change containment
  • Alt+Click to do layered selection
  • Element serach by using jquery selector
  • On-Demand sandboxing of application iFrame to stop JS execution
  • HTML attribute editing using intutive input controls
  • Drag Border radius control points to change radius for one corner
  • Shift+Drag Border radius control point to change radius for all corners
  • Ctrl+Drag to copy/Clone ( nested )
  • Double Click a selected element to open inner HTML editor non-modal popup
  • MultiSelect by Ctrl+Click
  • Multiselect by drawing control rect
  • Alignment on multiselected elements
  • Cut/Copy/Paste of elements using context menu

Information Overlay


  • Offset Markers with Offset values
  • Element position reference axis ( x and y)
  • Current containment and prospective containment based on mouse interaction while editing containment using Shift+Drag
  • Border radius focal point for rx and ry
  • Selection Rectangle

Ruler and Grid


  • Ruler and Grid support with pixel calibration
  • On Demand grids by clicking on Rulers
  • Dynamic position of Grids drawn
  • Lockable grid lines
  • Show/Hide of Grid lines
  • Clear Grid lines
  • Options accessible from right click context menu at grid corner block

Skeleton Snapshots


The following snapshots will show the different controls and their access source

Designer Launch option

Designer Skeleton

Designer Split view

Illustration controls

HTML Attributes

HTML Attributes input controls

CSS Text controls


Installation

Can be used as a Brackets extension only in its current form. Install Brackets. GoTo Extension Manager --> Available tab and search for "html-designer"


Licence

html-designer is released under MIT License.


Contact

For queries and discussions, please contact: swagatammitra@gmail.com

Moreover any contribution towards stabilization or new feature addition is most welcome


TODO

  • Custom widget template addition in Widget Toolbox ( Next Release )
  • Stabilization of split view feature
  • Undo Redo from design context ( as of now switch to code view to do the same )
  • Media query support
  • Pseudo element illustration
  • Revamp of Transform control with 3D support

Versions

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.

    MultiSelect Toolbox

  • 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.

Snippet Addition Snippet Editing Snippet Bookmark

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. Widget Toolbox

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