CSS Grid is energizing the web industry! This technique allows you to craft unique layouts that have been virtually impossible to build before. We are proud to announce the new Site Designer V3 app provides visual controls for using this incredible method.
Yes, V3 does have the ability to open previous RSD projects including designs from Grid Builder, Bootstrap Builder and Foundation Framer. Upon open, it will convert rows and columns to the containers. The sizing and layout of these containers will still be controlled by the classic layout methods.
We suggest upgrading to 'grid' on a section-by-section basis. Bob wrote up an insightful article on Medium, discussing a workflow for transitioning from old layout methods to the technique of the future. We highly suggest reading this before getting started (and don't forget to clap while you are at it).
Once you understand the concept, you should read my step-by-step example of cleaning up the old layout code and implementing Grid.
CSS Grid controls may be the star of the show here in V3, but there is much more to be excited about. Let’s dive into some of the new things:
- Site Designer V3 (notice this version doesn’t have ‘Responsive’ in the title) so that you can run both versions of the apps at the same. We heard that many of you wanted the ability to do that.
- A fresh UI - reorganized and easier to navigation to the options you need. I made quick overview of the UI changes. https://tutorials.coffeecup.com/respons … l#ui-intro
- Eliminated Rows and Columns - CSS Grid uses Containers. You can build your row/column grids as needed inside your Container elements.
- Drag-n-drop pictures from your computer right on the canvas! Finally!!
- Integration with the Materialize CSS framework. It has been gaining popularity since it is based on Google’s Material design.
- Improved Inspector mode (now called Element pane). Includes CSS class names so you can quickly identify what you’re looking at.
- Apply fallback styles for browsers that don’t support CSS Grid
- Tweaked the Page Management so to ensure nested pages no longer get lost in oblivion.
- We cleaned up and unified CSS Styles between our design apps.
- Double click to launch the Inline/Text Editor - Yippeee!!
- New Layout Classes for converted projects from V1-2 (RSD, BB and FF).
- Added the ability to hit the ESC Key on dialogs so they cancel/close.
- Updated the app’s memory so that it will remember the save and export paths (on a per project basis).
- Bootstrap 4 has been updated to V4.1.0.
- Navigate element with keyboard keys! These will we the selection rules that we will follow depending on the arrow used:
1. Down: Select first selectable child of the current element in case it exist, if not, the key will do nothing
2. Up: Select the first selectable parent of the element, if the element is the body, the key will do nothing
3. Left: Select previous selectable brother, if the element is the first child, we will loop to the last child
4. Right: Select next selectable brother, if the element is the last child, we will loop to the first child - When opening an older project, the app will automatically create a backup of the original for you (how sweet.)
- You can now add variables within the Inline/Text editor without the formatting going haywire.
- New theme shop! You can download the themes you want directly from our shop. Coming soon will be a Component Shop too. You should check out the new Gloss Content Design. It is on sale for just $19!
That's all for now you cool cats! Hope you enjoy!!
Learn the essentials with these tips on Site Designer. You'll be making epic, code-free responsive sites like a boss.
