Why we built this​

Ouasl templates are made of independent sections that our backend merges into complete, production-ready pages. Each section has to follow a strict set of rules so it can be edited inside the builder, its styles don't leak into other sections, and its data is tracked correctly by the dashboard.

Until today, those rules lived scattered across internal notes, PDFs, and chat messages. That worked when two people were writing sections — it stopped working the moment the team grew. This documentation is our answer.

What's inside​

The docs are organized into seven topic categories, each covering a specific part of building a Ouasl section:

• 🏗️ HTML Structure — root tags, data-tag, the mandatory .container wrapper, the wrapper and content-box utility classes
• 🎬 Media — embedding YouTube / Vimeo / Dailymotion video, Google Maps, and Swiper sliders (with carousel and pagination patterns)
• 🧩 Components — the three mandatory patterns: responsive headers with the hamburger script, native <details> accordions, and countdown timers
• 📝 Forms — every input type, side-by-side half-span fields, the special first_name / last_name tracker attributes, and the newsletter / contact / leads form types
• ⚡ JavaScript — variable rules (var / let only), querySelectorAll, named-function scoping, and the header hamburger logic
• 🎨 CSS & Styling — the fixed color palette (main / secondary / shades-1..10 / tints-1..10), mandatory RTL direction, and the three responsive breakpoints
• 🛠️ Tools — an interactive Unique ID Generator you can use to generate data-form-id values without leaving the docs

Bilingual from day one​

The whole site ships in English and Arabic (العربية) — switch with the locale picker in the navbar. Every page, sidebar label, and category description is translated, and the Arabic build uses the Cairo font (the same family our templates use), with automatic RTL layout across the site.

Code blocks stay left-to-right in both locales, so the HTML / CSS / JavaScript examples read naturally no matter which language you're browsing in.

Search that works​

We've added a local search engine indexed over every docs page and every blog post. Press the search box in the navbar (or Ctrl+K) and start typing — results appear as you type, in both languages.

What to do next​

• New to Ouasl? Start with Getting Started and then copy-paste the Quick Start example to see a working section on screen in under two minutes.
• Already building sections? Skim the updated rules in HTML Structure and CSS Rules — the class names are now ouasl_* and oa-*, and the color palette has new shades/tints variables.
• Need to generate form IDs? The ID Generator is now an interactive React component right inside the docs.

We'll keep this site updated as the builder evolves. If you find something missing or unclear, open an issue on the GitHub repo — we read every one.

Happy building. 🚀