Visual Language

In this article, we help you to start and configure your project by creating a copy of thedocs. Make sure you've read the contents article before continuing.


Copy

Our template comes with two powerful starter templates that you should use one of them as a boilerplate for your project. You should simply copy one of the starter directory to your desire destination and start developing.

Choose a starter template

As you might see in the /starter directory, we have two starters; basic and expert:

  • Basic starter: This starter suites for simple websites which doesn't require any customization to TheDocs code and writing few additional CSS and JS codes would be enough. It doesn't require npm and doesn't have gulp tasks.
  • Expert starter: The expert starter has several features which is not included in the basic starter. Those features give you more freedom in customizing your template and writing extra codes. It includes a gulpfile with necessary tasks to start a web server, watch files for changes and compile SCSS and JS files. Finally, you can run a command to have all the required files for production copied to a directory.

We strongly recommend using the expert starter, but the basic starter template is advised to people who are not familiar with npm, task runners and scss; and developing small-scaled websites with less customization.


Configure

Open /assets/js/script.js file and set the configuration options if you'd like. There's possibility to set your Google API Key, Google Analytics Tracking, and choose to have smooth scroll or not, etc. The script.js file has a complete documentation to help you configuring your template.

If you're going to have a contact form in your website, you should make some more configurations. Please open /assets/php/sendmail.php files and configure your contact form with specifying your email address and default subject.

Based on the starter template you chose, you should also read the "How to get started?" article of basic starter or expert starter.


Develop

Now you're ready to start creating your pages. We've already implemented several common pages such as about, contact, privacy policy, faq, etc. and several sample homepages for your next website such as Gmail, Trello, Bootstrap, GitHub, etc. You can keep the pages you need and modify their content, or copy one of the html files and use ready blocks to create your own pages.

You can find a lot of ready blocks in the /block directory. Finally, for more advanced users, you can read the documentation in /uikit directory to learn about the elements, components and fundamentals of thedocs and create your own customized blocks.