Refactor HTML + CSS Website - DOM

• Refactor the entire LESS / HTML architecture since the code was written badly from start and to adopt 8pt grid system.
• Full rebase of the LESS files and to be converted into SASS using Gulp to automate compilation using configuration, also using best practices of SASS architecture. 
• Styles must be based on SCSS pre-processor - to extend the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow us to make CSS that is more maintainable, themeable and extendable. 
• Divide elements into individual components. Reuse components. (attention, by components we mean just specific SASS component and not a component developed under a specific framework. 
• Refactor the color variables in order to support the light-mode and dark-mode of the entire UI. A full set of specific variables will be provided. 
• Working with multi-language environment and display direction where content displays from the right-hand side of a page and concludes on the left-hand side, such as in Arabic, Hebrew and Urdu and in order to initialize translations of the website and visualize them accordingly (LTR and RTL support). Using a localization management platform that's fit for teams like POEditor.

The website template, after the refactoring, must support the following editing options: 

A. Colors (basics, brand colors, contextual colors, text colors, shade colors, tint colors (to support light / dark UI)

B. Typography (multiple typography options as multiple type-faces without breaking the layout of the components: various line-heights, font size etc.)

C. Style: Multiple options for the roundness of the UI elements, buttons style: filled / gradient. Text filed style: fill or border. 

D. Icons: to support multiple icons libraries.

                If a .environment configuration file can added in order to manage, the better it is.

Current situation: 

Currently, we own the current development and website layout but was not taken into consideration many customization aspects in order to act as a white-label product. On the other hand, we need to consider mixins to manipulate the brand language of the product, like border-radius, using multiple typefaces and so on. 

In the future, the website will use data attributes, so we need individual JSON files in order to populate modules with data, without making any impact on the HTML. (Samples also can be provided on project brief).

If needed, we can also understand that from one developer to another is not easy to refactor, so we also consider moving it from the current development to another using a specific framework at the developer's suggestion / experience / timeline convenience.