https://github.com/olomadev/olodoc-bootstrap
Bootstrap + Vite template launcher to create custom css templates.
https://github.com/olomadev/olodoc-bootstrap
boostrap5 documentation-generator documentation-tool template
Last synced: 9 months ago
JSON representation
Bootstrap + Vite template launcher to create custom css templates.
- Host: GitHub
- URL: https://github.com/olomadev/olodoc-bootstrap
- Owner: olomadev
- Created: 2024-11-10T15:48:17.000Z (over 1 year ago)
- Default Branch: 1.x
- Last Pushed: 2024-12-31T18:46:28.000Z (over 1 year ago)
- Last Synced: 2025-08-12T16:43:05.879Z (10 months ago)
- Topics: boostrap5, documentation-generator, documentation-tool, template
- Language: JavaScript
- Homepage: https://olodoc.oloma.dev
- Size: 252 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Olodoc Bootstrap Template Generator
Olodoc is written with Boostrap 5 css framework and supports extensive customizations. Before creating a new documentation project, you may want to customize the colors or components of your project. Customization operations can be easily done with the Olodoc Boostrap + Vite Skelethon template generation tool, follow the steps below.
Enter your project root.
```sh
cd /var/www/olodoc-bootstrap
```
Install node modules.
```sh
npm i
```
Run the application
```sh
npm run dev
```
Visit your local address from your browser.
## Customize Your Template
The template generator allows you to create your documentation using the colors and fonts you want by changing the values of the .scss variables.
```sh
- olodoc-bootstrap
+ node_modules
- src
- css
_variables.scss
fonts.scss
olodoc.css
prism.css
styles.scss
+ dist
+ images
+ js
+ views
.gitignore
package.json
server.js
vite.config.js
```
Open your \_variables.scss file and change the $primary: #0a7248; variable's value as #f75b00.
```scss [line-numbers] data-line="5"
//
// All Boostrap Variables:
// Here --> https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
//
$primary: #f75b00; // #0a7248;
$secondary: #636363;
$success: #42ba96;
$info: #7c69ef;
$warning: #fad776;
$danger: #df4759;
// ...
```
Run the application again
```sh
npm run dev
```
Visit your local address from your browser, if everything went well you will see that the template main colors have changed as below.
## Exporting Production Ready Css Files
1. Go to your command line type build command.
```sh
npm run build
```
if everything went well you will see the built message like below.
```sh
✓ 92 modules transformed.
dist/index.html 14.69 kB │ gzip: 4.21 kB
dist/assets/index-BJBYL9CF.css 313.94 kB │ gzip: 41.29 kB
dist/assets/index-C1TT0zOb.js 121.41 kB │ gzip: 25.79 kB
✓ built in 4.17s
root@localhost:/var/www/olodoc-bootstrap#
```
2. Copy your generated index-\**.css and index-\**.js files.
```sh
- olodoc-bootstrap
- dist
- assets
index-BJBYL9CF.css
index-C1TT0zOb.js
index.html
+ node_modules
+ views
.gitignore
package.json
server.js
vite.config.js
```
3. Then paste them into your php project /public/assets/ directory.
```sh
- olodoc-skeleton
+ bin
+ config
+ data
- public
- assets
+ css
+ img
+ js
index-BJBYL9CF.css
index-C1TT0zOb.js
+ images
.htaccess
index.php
robots.txt
sitemap.xml
+ src
+ templates
+ vendor
.gitignore
composer.json
```
4. Finally you need update new filenames which they located in /templates/layouts/default.phtml file.
```html [line-numbers] data-line="11,12"
headTitle().PHP_EOL; ?>
headMeta().PHP_EOL; ?>
headLink().PHP_EOL; ?>
```
Visit your php application from your browser.
