SADAKA

Sadaka Documentation

Charity/non-profit HTML5 template built with Bootstrap, Sass & Compass .

Thank you for purchasing my template. If you have any questions, please feel free to email me at support@ouarmedia.com. Thanks so much!

Template Folder Structure

  • assets/ - includes the template assets .
    • css/ - includes the template css files.
    • fonts/ - includes the bootstrap fonts files.
    • images/ - all the images used in the template are found in this folder
    • js/ - includes the JS scripts used in the template.
    • sass/ - includes the template sass files.
  • php/ - includes mail.php which is the mailer of the contact form found in the template.

HTML Structure

The template is based on Bootstrap Framework - http://getbootstrap.com/ 


    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>

W3C Valid : HTML code is fully valid on validator.w3.org

Styles css & sass files

File Name Description
styles.css The main template css file.
bootstrap.css Bootstrap css file.
bootstrap.min.css Bootsrap minified css file.
font-awesome.min.css Font awesome minified css file.
owl.carousel.css OWL Carousel Plugin css file.
prettyPhoto.css PrettyPhoto lightbox plugin css file.

The tempalte is built with Sass & Compass you can edit the sass file on /sass/style.scss

Google Fonts :

Default Font is Open Sans.
Headings font: Dosis

JavaScript

File Name Description
main.js The main javascript file (your customizations go here).
bootstrap.js Bootstrap javascript file . (it's not recommended to use non-minified file in a production environment) .
bootstrap.min.js Bootstrap minified javascript file .
jquery-1.11.1.min.js The jQuery file.
jquery.prettyPhoto.js PrettyPhoto lightbox plugin javascript file.
modernizr-2.6.2.min.js Modernizr file (used for borwsers compatibility purposes) .
owl.carousel.js Owl carousel plugin javascript file (it's not recommended to use non-minified file in a production environment).
owl.carousel.min.js Owl carousel plugin minified javascript file .

Google Map

In js/main.js file edit : mapLatitude and mapLongitude variables

Icons

Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.

If you need more information, please visit http://fontawesome.io/.

Caroussels

Main slider

For the main slider the template uses bootstrap default caroussel , for more information & help , please visit http://getbootstrap.com/javascript/#carousel.


Sponsors caroussel

And for sponsor caroussels the template uses the Owl carousel for more information & help , please visit http://www.owlcarousel.owlgraphic.com.

Contact forms

When installing the template, it is important to change the email address at the top of the php/mail.php file to the email address that you want this form to send to.


Credits

Resources:

Fonts:

Images: