TheDocs
TheDocs is a html online documentation template which can help you rapidly develop your next software's documentation. It can be used for documenting API, frameworks, plugins, templates, etc. It's based on Bootstrap and contains a lot of components to easily make your interactive documentation.
TheDocs comes with a simple design and puts its focus on readability and functionality. It has a lot of useful components to reduce the burden of writing a documentation for your next product. With the help of TheDocs just focus on the quality of writing; don't worry about the quality of design and ease of writing. We guarantee them!
Features
This template has everything that you need to develop your next documentation. Check out some of features that we have in this template. To know more about features of TheDocs, continue reading our documentation and check our available components.
- HTML5 & CSS3
- Built with Bootstrap 3.3
- SASS files included
- Grunt Tasks
- Responsive design
- Well documented
- Developer friendly code
- 44 HTML page
- 30+ component variation
- 13 skin color
- Easy to customize: sidebar, header, color scheme, content
- FontAwesome 400+ icons
- Glyphicons 250+ icons
- Wide & Boxed Layouts
- Single page Layouts
- Left/Right/No sidebar
- Different navbar sizes & variation
- Different banner sizes & variation
- Different sidebar variation
- 3 Type of views
- Sticky sidebar
- Syntax highlighter
- Button variations
- Tabs
- Alerts
- Callouts
- Color palette
- Lightbox
- Carousel
- Promo boxes
- Script requirements
- Directory explanation
- File tree
- Table of content
- Changelog table
- Property table
- Instance searchable FAQ
- Responsive video (YouTube, Vimeo, Self-hosted)
- Extended Jumbotron
What's included
Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.
-
assets
-
css
- skinAll skin styles
- custom.cssWrite your custom styles in this file
- theDocs.all.min.cssMinified version of all required CSS files
- fontsFontAwesome and Glyphicons
- imgHere is a place to put your media files like logo, images, videoes, etc.
-
js
- theDocs.all.min.jsMinified version of all required Javascript files
- custom.jsWrite your custom scripts in this file
- vendorsBootstrap, jQuery, FontAwesome, etc.
-
css
- layout_boxed_no-sidebar.html
- layout_boxed_left-sidebar.html
- layout_boxed_right-sidebar.html
- layout_full_no-sidebar.html
- layout_full_left-sidebar.html
- layout_full_right-sidebar.html
- layout_single-page-1.html
- layout_single-page-2.html
- layout_single-page-3.html
- layout_sidebar_boxed.html
We just included layouts files for your start point. You should choose one of those and start customizing components such as navbar, banner, sidebar and footer to make a starter file for your documentation. You can access to all of the available files in "Documentation" or "src" folder.
Getting started
Start your documentation template by editing one of the starter files. It won't take more than 15 minutes to start. Read the step-by-step guide:
-
Prepare your directory
Start your documentation project by makeing a copy of start-kit folder to your desired directory. This folder contains essential files to develop your documentation based on TheDocs.
-
Choose a layout
Decide about your documentation layout. Boxed, full-width, or single page? Do you need a sidebar on the left of page, on the right of page, or a page without sidebar? Choose your desired layout from one of the starter files and start by editing it. Even it's better to decide about skin right now.
-
Design your header
The header of the page is inside
header
tag. Customize it by editing logo and navigation links. If you need, you can include a banner as well. -
Design your footer
The footer of the page is inside
footer
tag. Customize it by editing copyright text and navigation links. -
Design your sidebar
If you've already planned your documentation pages, you can categorize them and design your sidebar.
-
Start writing
Make a copy of your starter page and start writing your documentation with the help of our wonderful elements.
Continue reading
It's time to see and read other pages of this documentation to learn how you can use different elements for you own documentation. Don't worry about reading time, you can check each element in a couple of minutes and come back to the documentation page once you want to use them. You can use them by just make a copy and paste.
-
Components
Navbar Banner Banner - Sample 1 Banner - Sample 2 Banner - Sample 3 Sidebar - default Sidebar - line Sidebar - icon Footer -
Basic Styling
Typography Buttons Labels Tables Alerts Icons -
Elements
Table of contents Code view Views Promo Included files Requirements Tabs Steps Media Color palette Jumbotron Carousel FAQ Mix