Foundation Framer and Responsive Site Designer
The code-free interfaces of Responsive Site Designer and Foundation Framer share many similarities. However, Foundation Framer boasts some pretty big differences as it is based upon Foundation 6, one of the most popular open source front end frameworks, created by the talented people of Zurb.
This app is beloved because it is powered-up with custom breakpoints, pre-built components, and symbols for global content updates. It also has JavaScript plugins so you can add interactive components for navigation, slideshows, toggles, and much more without the hassle of external libraries.
Learn more about these features below.
Components
Foundation Framer comes with a bunch of pre-built components — website building blocks such as responsive navigation menus, modal dialogs, tab systems and more. These handy components speed up the design or prototyping process and are easy to customize. The included themes come with theme specific variations and customizations of these components, such as a ‘tab-image-gallery’.
Using the ‘Toggler’ included in the Foundation 6, all types of custom interactive components can be created as well. Toggle classes or visibility of elements by simply adding a data-attribute and / or value on the design pane, and the sky’s the limit!
Symbols
Symbols represent linked elements of groups of elements. A change to a symbol item will globally update all instances of the symbol, whether located on the same page or any other pages of the project.
Website modules (components) such as footers and navigation menus are frequently the same across all pages. Using the symbol functionality a link edit, text tweak, or even a content restructuring only needs to be done in one place. The footer or menu symbol will than be updated everywhere it has been placed.
The symbol control includes a preview function and shows how many instances of the symbol are currently used in the project. Using the arrow keys you can navigate to each instance of the symbol. In case a variation of a symbol is needed, a specific page could have a slightly different footer for example, the symbol can be unlinked and will not be affected by updates to other instances.
Both components and symbols make creating and maintaining websites a whole lot smoother and we have big plans for further developments here, so stay tuned. For now, let’s look at two more places where Foundation Framer has additional power compared to Responsive Site Designer.
Multiple backgrounds and shadows
CSS3 allows web designers to specify multiple backgrounds, images and gradient, on a single element. With a bit of practice this can be used to create cool effects, such as overlays on images as can be seen in the A Festival Event theme.
The use of these controls is straightforward, simply Add an Image or Gradient and set the desired CSS property values. The order of applied settings can be changed by moving the background property boxes up or down.
Data-attributes
With HTML 5 came the possibility to assign custom data to (HTML) elements. These data-attributes and their values can be accessed by JavaScripts to create richer, more engaging user experiences. An example is the navigation menu in the A Festival Event theme. On small screens the menu is hidden by default, but slides in when clicked by the viewer. This happens because the menu icon and text link instruct the Toggler (JavaScript) module to change the display of the element with the ‘view-menu’ ID.
Setting this up is straightforward. The clickable elements get a the ‘data-toggle’ attribute which has a value of the ID of the element that needs to be toggled; ‘view-menu’ in this case. The element that needs to be toggled, the container element with the menu buttons using ID ‘view-menu’, gets the ‘data-toggler’ attribute (without value). Now set the display property of the menu container to none in the Position section and that was all there is to it!
The animation can be changed by editing the values for the data-animate attribute. More details on the Toggler and possible animations can be found here.
Other differences
Foundation Framer also benefits from many many changes that we had to wrestle our way through when making the app work with the Foundation framework. An example is the nesting of containers and subgrids, where certain limits are in place in RSD we had to make this work with (almost) no constraints in Foundation Framer. Otherwise many of the prebuilt (and custom) components such as the accordion and tabs could not have been created. Another example are the link containers, we created these so an entire area can be clickable and work with the included JavaScripts.
