How to Use Dot Profiles in Breezi
Now you can hide the Dots menu when you’re not using it. Check out the Design Mode options in this article.
It has always been our idea that designing should be faster, so creating a way for our users to manage and propagate our dots styles was a no-brainier. Today we’ll be showing you how this amazing feature also known as Propagatable Dots will allow you to save time on your design process while giving you pixel-level control over your website.
Creating Visual CSS Classes Through Dot Profiles
Using our Dots you’ll be able to edit apps and layout component styles such as borders, colors, spacing margins and more. Each one of our apps and layout components has several dots that will help you to gain pixel-level control over it. Once that you get an idea on how our dots work, then you can start using our Dot Profiles. We’ve created a tool that is already built in the dots themselves that will help you propagate whatever styles you have placed on a specific dot by saving it as a style (commonly known as a css class) and apply it to other ones. This means that our web design application acts like a true visual css editor.
The process is pretty simple; you click on a dot, open it, style it, save it as a profile and then, once you open another dot, you simply apply and link the Dot Profile that was created to the newly opened dot.
And why should you use this? Well, saving and propagating dot profiles will allow you to save time by eliminating the hassle and time consuming task of editing each one of your dots one by one. This, together with our Bulk Style Editor will help you design faster and have your site ready in no time.
Let’s say that you want all of your buttons to have the same background color, rollover color, corner radius and drop shadow but you don’t want to style them one by one since it would take too much time. Well, there’s a solution, as easy as editing just one of the buttons trough it’s Dot Profile, saving it as a profile and applying that profile to each one of your dots. This is very similar to creating css classes when you are creating a website through coding.
On top of that, if you link them all, and change the style at some point of your editing process, just push those changes on demand and save and propagate that style trough every dot that has that profile applied to it.
Save And Propagate On Demand
One thing to keep in mind is that changes that you make to a dot that has a Linked Dot Profile applied to it (see Linked Dot Profile & Propagation below) won’t transfer to other dots linked to the same profile automatically, changes are pushed on demand and you have to press the Save And Propagate button at the bottom of the modal.
Saving A Profile
The first thing to do will be to open a dot, once that you have styled it is time to save it, click on the Save Style as Dot Profile link at the bottom of the Dot Modal.
Once that done another modal will come up, asking you to name your Dot Profile, under that field you can see the Saves as linked dot profile option (already checked by defaulted) that will link this dot to others that use the same profile allowing you to propagate further changes and styles later on. Uncheck this option if you don’t want all dots that have this profiled applied to them to be linked between each other.
Linked Dot Profiles & Propagation
Once you have named your Dot Profile the editor will ask you if you want this dot to also be linked (in case you never unchecked the Saves as linked dot profile option) to the new profile that you’ve just created. if you select Yes, Link It our editor will link your dot to that dot profile and any other dot that gets that profiled applied to later on.
See how your linked dot will turn darker now.
Loading & Applying A Profile
Now that you have saved your Dot Profile you can click on another dot and hit the Load Dot Profile link, another modal will pop up and show you your saved Dot Profiles, their names, classification and if they are linked or not. At the top of the modal you will encounter the classification of the dot that you are currently using, see further sections to have each dot class explained. Hover over the Dot Profile that you want to use and hit load to apply the profile.
If you clicked on a dot, and the profile that you are applying belongs to the same classification of that dot (i.e. applying a Button profile dot to a button dot), the editor will simply apply it and link it to other dots with the same profile (if the dot profiled is Linked of course, otherwise the editor will just apply the style to it).
If you clicked on a dot and apply a Dot Profile that does not have the same classification (i.e. applying a Button profile dot to an image dot) our editor will let you know the previous stated and ask you if you still want to apply whatever styles match to that dot, in this case, the Dot Profile will not be linked at all.
Modify A Linked Dot
The good thing about this profiles is that applying one to a certain dot does not lock you into using that one.
In case your dot as a Linked Dot Profiled applied to it, you can still change it. Dark Dots that have Linked Dot Profiles applied to them can still be modified. A menu at the top of the modal of the dot you clicked on will show for this kind of dots. The menu will have the name of the Linked Dot Profile applied to it and a gear icon. Clicking on the gear icon will display a sub-menu showing you options to either Load Another Profile, Save It As A New Profile and Unlink It.
Unlinking the dot or loading another profile that is not linked to it will turn the dot you are currently on color back to normal.
The Dots Tab
There’s a tab on the Shelf at the bottom of our Editor that says Dots on it; with this menu you can manage your saved profiles and perform an array of actions to them.
You can Edit the profile and change it’s style set up and Linked options, save it as a new profile, rename it or delete it. Remember that changes done while editing your Dot Profile are pushed on demand so be sure to hit Save And Propagate. Deleting Dot Profiles that are linked will cause all dots that have this Profile applied to them to be un-linked and their dot color will go back to normal.
To help you manage the way your site is created we’ve categorized dots depending on the element that you are styling. There are dots for images, buttons, apps, sections, blocks, etc. Check out the next tab where you an have a brief explanation of what kind of dots you’ll find within our editor.
Text style (like size, font, alignment, etc.) is not savable as a dot profile.
Plan your website in advance, and categorize wich apps and layout components will have the same style, once this is done, edit one of them and save it as a profile, apply it to the others and have it linked for further changes.
Thank you so much for reading, please send any questions and post any comments under this section!