{"id":5714,"date":"2013-08-08T11:55:38","date_gmt":"2013-08-08T18:55:38","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=5714"},"modified":"2013-08-20T09:51:13","modified_gmt":"2013-08-20T16:51:13","slug":"style-designer-how-we-did-it","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/style-designer-how-we-did-it\/","title":{"rendered":"Style Designer: How We Did It"},"content":{"rendered":"

Overview<\/h2>\n

What is the Style Designer?<\/strong>
\nThe Style Designer<\/a> is a new feature in Yola\u2019s SiteBuilder that allows you to easily configure the look of your entire site from a single panel. It allows you to set parameters on nearly every element of your site that will get applied to all pages. This saves a lot of time and frustration since you no longer have to go to every element on every page to make modifications.<\/p>\n

How did we do it?<\/strong>
\nThere are three major parts of the Style Designer:<\/p>\n

    \n
  1. The property framework.<\/strong> These are the properties that we store when you change the look of your page, for instance \u201cMain Heading Font Color\u201d or \u201cParagraph Text Font Family.\u201d With the Style Designer, we introduced over 60 individual properties that can be set by the user.<\/li>\n
  2. The UI\/widget framework.<\/strong> This is the how you interact with the properties. We created color selectors, sliders, dropdowns, and more so you can set the properties. It just wouldn\u2019t be very pretty or useful if we gave you a bunch of text boxes to fill in.<\/li>\n
  3. The stylesheet (CSS)<\/strong> that lets us apply your style to your site. Once you set all of your properties, we have to apply them to your site. We created a special stylesheet, using the LESS<\/a> framework that gives us a lot of flexibility when it comes to styling your site.<\/li>\n<\/ol>\n

    Properties<\/h2>\n

    \"properties\"<\/strong>When you create a site with Yola<\/a>, we populate it with several properties that keep track of data specific to your site. These properties include things like site name, font selection, banner image, and much more.<\/p>\n

    In creating the Style Designer, we added a lot of base properties to sites with which we could store all of your site\u2019s style information. Some of these properties include \u201cMain Header Font Family,\u201d \u201cParagraph Text Font Color,\u201d \u201cSecond Header Letter Spacing\u201d and many more.<\/p>\n

    With the first release of the Style Designer, this list of properties is static. This means all sites receive the same properties, and we control those properties with the predefined widgets. As the Style Designer evolves, we will be adding additional properties, as well as style-specific properties.<\/p>\n

    Style-specific properties will allow our style authors to create custom functionality on a per-style basis. For instance, if a particular style has a landing page<\/a>, you could potentially turn the landing page on or off. If a style has the option of vertical or horizontal navigation, we will give an option to configure it accordingly.<\/p>\n

    This will ultimately give our users nearly limitless customization options for their site.<\/p>\n

    Widgets and UI<\/h2>\n

    Design Decisions<\/strong>
    \nOnce we had our properties configured, we needed a way to present them to our users. Many discussions were had over how to present them:<\/p>\n