> For the complete documentation index, see [llms.txt](https://openup.gitbook.io/handbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openup.gitbook.io/handbook/tech/webflow-best-practice.md).

# Webflow project guide

OpenUp relies on Webflow to build out front-end elements. These front-ends are worked on by various dev teams. This document provides guidelines for implementation best practices.

## Goals

1. **Simplified approach** to designing, building and outsourcing development on various tools.
2. **Limit confusion** when working on various projects and/or with different developers.
3. **Streamline onboarding**.
4. **Spend less time documenting** the thinking and approaches taken on different projects.
5. **Lower design and dev budget** for projects.
6. **Lower reliance on specific individuals** within the organisation for knowledge and expertise. 
7. **Improved open-sourcing credentials**.

## What is Webflow

* Webflow is an online visual editor for HTML, CSS and JavaScript.
* Webflow has a [built in CMS](https://webflow.com/cms?utm_campaign=desktop\&utm_medium=GoogleSearch\&utm_source=sitelinks-webflow-cms\&gclid=Cj0KCQiAlsv_BRDtARIsAHMGVSZllFWTmuXb4LpYtabYP9iOLtA98bCTdZh1CGeL_ZUKjZRsCzaQyxwaAiFoEALw_wcB) with limited functionality sites with basic requirements like a blog.
* Webflow has [symbols](https://webflow.com/blog/nested-symbols-in-webflow) which can be created, nested and re-used within a project.
* Webflow can [export sites](https://university.webflow.com/lesson/code-export) as a packaged file for use in various applications.
* Webflow can integrate with various third party tools either natively, or through [Zapier](https://zapier.com/apps/webflow/integrations?utm_source=google\&utm_medium=cpc\&utm_campaign=gaw-gbl-nua-search-all-dsa\&utm_adgroup=partners_one_service\&utm_term=\&utm_content=_pcrid_423115314434_pkw__pmt_b_pdv_c_slid__pgrid_99117355838_ptaid_dsa-1077446211792_\&gclid=Cj0KCQiAlsv_BRDtARIsAHMGVSawPiOaykzeaydcuUAjRW_5I6KXUHCRReUrQqqJlJD-GiRBsWBCnDkaArwyEALw_wcB).

## How we use Webflow

1. **Fully self-contained Webflow reliant websites**. eg. [www.openup.org.za](https://openup.gitbook.io/handbook/tech/www.openup.org.za)
   1. These projects leverage standard webflow features and functionality and are hosted through the Webflow platform at a fixed monthly or annual cost.
   2. These projects are simple to implement and maintain.
2. **Exported front-end design with custom integration**. eg. [www.municipalmoney.gov.za](https://openup.gitbook.io/handbook/tech/www.municipalmoney.gov.za)
   1. These projects