Docs by 
Ja is a HTML/CSS template based on Bootstrap 4 framework. It allows to built modern, fast and mobile friendly personal webistes. It is perfect as a virtual busiess card or online resume / CV.
This is the base of each HTML file:
Template supports all features of Bootstrap 4 Grid System - go to Bootrstrap's page and check how does it work.
Neat & Useful elements to create content.
All HTML Tags made to create nice texts.
Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo.
Maecenas a risus quis ipsum convallis fringilla in ut magna. Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo.
Curabitur sit amet turpis eu diam luctus viverra. Sed viverra ornare ex, quis lobortis diam vehicula a. In imperdiet est tristique, malesuada odio quis, volutpat ante. Nulla ullamcorper, nisl sed faucibus posuere, dui turpis mattis turpis, in porttitor massa odio nec sapien.
It was the best coach I’ve ever had!
Create nice donut charts - set your components look by data-bar-color, data-track-color and data-percent attributes.
Easy & effectife way pricing tables. Add featured class to highlight the table.
There are few types of media items.
It is also required to put video modal html code somewhere before the </body> tag.
Really solid & creatve front-end developer and great teammate!
Easy & effectife way to present code. More at Bootstrap's 4 page.
For example, <span></span> should be wrapped as inline.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
Thanks to the prepared components you will be able to create really useful and easy to use websites. Let's start exploring them!
Carousel is a component perfect to preset any kind of content like photos, icons, texts, etc. Go to the Slick's page to see full documentation of this component.
To validate the form please add data-validate attribute and required atribute to input / textarea.
Modal may be open by a button or any link element.
It is also required to put modal html code somewhere before the </body> tag.
Below are listed important configuration options for whole template.
Primary and secondary color depends on picked color scheme.
It is possible to add any color form Available Colors section by .text-[color-name] class
Similar to text colors it is possible to add backgorund color from Available Colors section by .bg-[color-name] class.
For dark background colors it is necessary to add dark class to adjust font colors and other styles. Sometimes, if inside dark element is placed element with light background you should add light class to such element.
More useful helper classes are listed on Bootstrap's 4 website!
The template includes some configurable elements - here you will find informations how to use them!
The template allows to add really cool animations for each of html elements. Let's check how to use it!
This animation fires when element appears in the browser viewport. To add such animation you need to place .animated class in the animted element and preciese which animation do you want to use by data-animationattribute. It is also possible to add some delay to the animation (in ms) by data-animation-delay attribute.
To configure Google Map it is necessary to set latitude and longitude parameters by data-latitude and data-longitude attributes of #google-map element. To get it please visit site like this.
To configure booing form please open offer-form.php file from /assets/php/ directory and go the line with an e-mail address to change it to your own - like this.
After that you will recieve the messages from your websites to this e-mail address.
If you want to use local scroll somewhere in the content please add data-local-scroll attribute in the parent tag of a link to local element.
The template was made with NPM package manager and Grunt.js task manager.
The template includes two package.json files:
package.jsonThis file includes necessary grunt tasks to make developemnt process nice and easy. Run npm install task to install them.
assets/plugins/package.jsonThis file includes all plugins used in this theme. To install those plugins you need to run npm install as previously but after that you have to run grunt copy and grunt removetasks to move them into right directory
The package includes some grunt tasks to make development process easier:
grunt - runs grunt sass tasks after each .scss file changegrunt sass - compiles all .scss filesgrunt validation - makes HTML5 validation of each .html fileCheck all template's assets which was usead while development proccess.
The template uses couple of CSS files:
CSS Theme has - was divided into some important sections:
CSS Theme is also available in couple of different color versions:
CSS files are generated thanks to well organized SCSS files.
theme-[color-scheme].scss is a main SCSS file where main colors have been set._base.css file is a base for each theme which imports other partials._config.css file with SASS variables which configure colors, fonts and more.On the end of the body of each html file there are placed JavaScrpt files:
Third-part plugins - third-part plugins sourcescore.js / core.min.js - main JavaScript filehttps://maps.googleapis.com/maps/api/js Google Map APIThe template includes few PHP scripts:
/php/contact-form.php - configuration file for contact formThe template is so awesome because of some third-part plugins and external assets!
npm install; grunt copy; grunt remove tasks in /assets/plugins/.
Some images used in the template was free and have been included in a package. Rest of them was blurred becouse of licensing reasons.
Let's check what has changed since the first version...