Almost every website has more than one page, making it a challenge and time-consuming task to ensure design consistency across these pages.
Let's say your company changes the brand's color swatch and now you have to edit all the text and background colors on each page. Switching to a seasonal theme (red, green, and white for Christmas?) is another example. It takes time to change all these pages. It's guaranteed that you will miss something if your website has more than a dozen pages.
You can create an unlimited number of styles and apply a style to more than one layout. Any changes you make to your style will also affect the corresponding layouts.
Nilead admin users can manage their Styles by opening the Quick Menu and searching for Styles.
We should explain how we style the website under the hood before moving on. Our platform uses the popular TailwindCSS framework to style everything you see on your website. If you are an end-user, you really don't need to know any about Tailwind at all. Please skip this section.
If you are a designer or developer that plans to use Nilead platform to build awesome websites, it's strongly recommended that you spend an hour or two reading up the TailwindCSS document (which is super easy and straightforward if you have basic HTML and CSS knowledge).
The TailwindCss Just In Time feature (Play) builds your CSS in real-time as you work on your Visual Editor. When you publish your website, we will run your layout through a build script to generate optimized, static CSS. To generate the minimum amount of CSS, the build process uses the classes within the HTML code. A potential issue with this process is that your layout may contain dynamic content that contains extra CSS classes (which cannot be included during the build process). You can work around this issue at the moment by including a hidden div within the custom code section of the page or layout. We'll have a better place to put these white-list classes in the next version.
TailwindCSS allows you to customize many many things (which we may not support 100% at the moment). Among the important configurations is the screen configuration. With screens you can customize default breakpoints for your layout.
By enabling only the screens you want to support, you will simplify your design process (and avoid generating way more code than you need, which can negatively affect performance).
You can easily update your brand's colors in the future without having to update every element on your website by setting up your color swatch here. You should use very generic names for your colors, such as color 1, color 2, or primary, secondary, etc. When you name your color "red" and later want to change that to blue, the classname will still be red (you cannot and should not change classnames), but the color will be something else that can be misleading.
You want your text font families, sizes, and other text-related display properties to remain consistent throughout your site. Having your typography configured on the style is a good idea. You can even select different font families for different locales (languages), which is very useful for multi-language websites. Similar to color swatches, name your fonts very generically such as primary, secondary, heading, paragraph, etc.
You can add default properties like margins, padding, widths, heights, etc that you may want to reuse across elements. Alternatively, you can skip this entirely and the system will use tailwind's default configuration. These properties can also be edited directly in the Visual Editor's style panel.
We utilize TailwindCSS's apply feature to allow applying Tailwind's any existing utility classes into your own selector. With this, you can easily apply styling to any element, class, or valid CSS selector.
After you makes your changes, the style need to be rebuild. Depending of the number of layouts that use this style, the process will take several minutes to finish.
