DIGIFORMS
Digiforms Designer Documentation
 
 
 
 
 
 
Help by samples
 
 
 
Capture or output data in a defined layout
 
Extensible Markup Language
Responsive Design
Design pages to be viewed across a wide range of devices (from desktop computer to mobile phones).
Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:
  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
Built-in support
Creating responsive pages With Digiforms
Digiforms Server supports a basic level of responive layout using a standard set of CSS style rules.
  • Scalable pages
    A scalable page will be rendered to HTML using relative measures, a flexible grid.
  • Scalable objects
    All objects, including images are rendered with relative sizes to adopt to different screen sizes.
  • Responsive tables
    Tables using pre-defined CSS rules from Digiforms-responsive.css will adopt to screen resolution in 4 different layout rules
Scalable pages
Allow page to be rendered using relative measrues
Setting page scaling attribute
Responsive table
Using pre-defined CSS and tables to control distribution of content
By using tables and pre-defined CSS media-Query rules, one template can be designed to fit many screen resolutions. The pre-defined rules in Digiforms summarized:
  • responsive-row
    Use this CSS-class on table rows to enable the media-Query to set different layout options mtaching most common media-sizes
  • col25
    Use for table cells in a (4 x N) table to allow fluid grid layout
  • col33
    Use for table cells in a (3 x N) table to allow fluid grid layout
  • col50
    Use for 2 column fluid grid layout
  • col66
    Combine with col33 table to allow fluid grid layout