🇺🇸 English
Introduction
This documentation will give you an understanding of how the files are structured and guide you in performing common functions.
Sham has been crafted on top of Bootstrap 4.x. The included docs don't replace the official ones, but provide a clear view of all extended styles and new components that this template provides on top of Bootstrap 4.x.
If you have any questions that are beyond the scope of this documentation, please feel free contact me via e-mail: hussam3bd@gmail.com. Enjoy!
Quick start
The theme includes a custom Webpack file, which can be used to quickly recompile and minify theme assets while developing or for deployment. You'll need to install Node.js before using Webpack.
Once Node.js is installed, run npm install to install the rest of Sham's dependencies.
All dependencies will be downloaded to the node_modules directory.
Now you're ready to modify the source files and generate new dist/ files, Sham is using webpack and laravel-mix to automatically detect file changes.
if you have the NPM script within your package.json, you may do:
To watch your JavaScript for changes, run:
You may also use mix.browserSync('localhost') to automatically reload the browser when any relevant file in your Laravel app is changed.
If you are ready and you wnat to build for production, run:
File Structure
The template contains 26 HTML files. You will find them in the root directory of the download package.
In the assets folder your find all the style and script for this theme.
~/root📂 assetsimgsasscomponentslibssections_helpers.scss
_mixins.scss
_variables.scss
app.scss / The main style file
jslibsbootstrap.js
app.js / The main script file
📂 distpackage.json
webpack.mix.js
*.html / the rest of the theme pages.
📂 sassThe template comes with a number of SASS files, many of which you will likely never touch.
There is 1 file that you will most likely edit since you are going to apply some degree of customization to your site.
app.scssThis is the main stylesheet for the template and includes all styles relating to the appearance of the elements you see inside each page. This stylesheets has been commented for ease of use and all style rules are grouped under particular headings such as
📂 jsSham, comes with a number of JS files, many of which you will never edit. If you don't know your way around javascript please don't edit them, these files will break parts of your site.
app.jsThis is the main scripts file for the template, that includes all functions specific to the theme such as control of the slider and initialize map and Carousel among other things.
Grid System
The template is based on Bootstrap v4.x, 12 column grid system. Is flexible and easy to understand. For more info here.
How it works
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.One of three columnsOne of three columnsOne of three columnsCopy
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.
Breaking it down, here’s how it works:
Containers provide a means to center and horizontally pad your site’s contents. Use
.containerfor a responsive pixel width or.container-fluidforwidth: 100%across all viewport and device sizes.Rows are wrappers for columns. Each column has horizontal
padding(called a gutter) for controlling the space between them. Thispaddingis then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
Thanks to flexbox, grid columns without a specified
widthwill automatically layout as equal width columns. For example, four instances of.col-smwill each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use
.col-4.Column
widths are set in percentages, so they’re always fluid and sized relative to their parent element.Columns have horizontal
paddingto create the gutters between individual columns, however, you can remove themarginfrom rows andpaddingfrom columns with.no-gutterson the.row.To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g.,
.col-sm-4applies to small, medium, large, and extra large devices, but not the firstxsbreakpoint).You can use predefined grid classes (like
.col-4) or Sass mixins for more semantic markup.
Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.
Map
Sham uses Google maps plugin. If you want to add a map to any page you have to first call the Google maps API after the footer and before the ending body tag like this:
Do not forget to add your api_key in the url, otherwise the map would not work.
Then add a div with the id #map, with attributes data-lat="" for latitude and data-long="" for longitude and data-title="" for title and data-subtitle="" for subtitle. Like this:
Icons
Sham using Boxicons iconset.
Using (Boxicons) pack is a very easy and simple, Let's take an example:
<i class="bx bx-ICON_NAME"></i> Example: <i class="bx bx-search"></i>
Slider
Sham uses Bootstrap Carousel Plugin as its primary slider manager. You can view all available options for the carousel at their website
The basic structure implemented in Sham template is as follows:
Flying to cart
If you are need add the product to your Application by AJAX just follows simple steps.
Open
app.jsfile - Located injsfolder.You will find
addToCartfunction.Inside this function you will find comment
1- [Add product to 'Application' by AJAX]Add your AJAX code here :)
For get product ID, add the product-id="ID" attribute in div tag have an class product. For Example:
Now you can use productId variable in addToCart function. (this variable will get product-id from attribute). productId variable defined in app.js
Slide Toggle
Slide Toggle effect very easy and flexible with sham theme, Let's go to understanding how it works.
If are you need see example go to checkout.html file and click on "Click here to login" link, or try change (Payment Method).
How it works:
Create an element and add
data-slide-toggle="#YOUR_SELECTOR"attribute.Create
divtag have that selector<div id="YOUR_SELECTOR"></div>
For Example:
Helpers Classes
Sham comes with a number of helpers classes along with the Bootstrap utilities classes.
Class
Description
mask-left
Add nice mask as background.
browser-default
You can add this class to get the browser default checkbox or radio.
typed-cursor
typing animation cursor
align-vertical
You can easily vertically center things by adding this class to the container holding the items you want to vertically align.
fullscreen
To set window height.
Plugins
Slim Scroll
Small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar. Demo and more: Click Here.
For use slimScroll with Sham theme option, just add slim-scroll attribute for user div, For Example:
Owl Carousel
Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slide. Demo and more: Click Here.
Sham theme comes with a number of ready carousel, Like (Brands and Related Products).
Brands carousel structure:
Add div with id="logos" attribute, example:
Related Products carousel structure:
Add div with id="related-products" attribute, example:
fancyBox
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. Demo and more: Click Here.
For use fancyBox: Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox, then add data-fancybox="images". Like this:
If you have a set of related items that you would like to group, additionally include a group name in the rel (or data-fancybox-group) attribute.
If you need a caption, you may use:
Last updated
Was this helpful?