๐บ๐ธ English
Last updated
Was this helpful?
Last updated
Was this helpful?
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!
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 before using Webpack.
Once Node.js is installed, run npm install to install the rest of Sham's dependencies.
Now you're ready to modify the source files and generate new dist/ files, Sham is using webpack and 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:
If you are ready and you wnat to build for production, run:
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
๐ assets
img
sass
components
libs
sections
_helpers.scss
_mixins.scss
_variables.scss
app.scss / The main style file
js
libs
bootstrap.js
app.js / The main script file
๐ dist
package.json
webpack.mix.js
*.html / the rest of the theme pages.
๐ sass
The 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.scss
This 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
๐ js
Sham, 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.js
This 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.
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 .container for a responsive pixel width or .container-fluid for width: 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. This padding is 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.
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 padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
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-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
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:
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:
<i class="bx bx-ICON_NAME"></i> Example: <i class="bx bx-search"></i>
The basic structure implemented in Sham template is as follows:
If you are need add the product to your Application by AJAX just follows simple steps.
Open app.js file - Located in js folder.
You will find addToCart function.
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 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).
Create an element and add data-slide-toggle="#YOUR_SELECTOR" attribute.
Create div tag have that selector <div id="YOUR_SELECTOR"></div>
For Example:
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.
For use slimScroll with Sham theme option, just add slim-scroll attribute for user div, For Example:
Sham theme comes with a number of ready carousel, Like (Brands and Related Products).
Add div with id="logos" attribute, example:
Add div with id="related-products" attribute, example:
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:
The template is based on , 12 column grid system. Is flexible and easy to understand. For more info .
Bootstrapโs grid system uses a series of containers, rows, and columns to layout and align content. Itโs built with 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? for background, terminology, guidelines, and code snippets.One of three columnsOne of three columnsOne of three columnsCopy
Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the section for more examples.
To make the grid responsive, there are five grid breakpoints, one for each : all breakpoints (extra small), small, medium, large, and extra large.
You can use predefined grid classes (like .col-4) or for more semantic markup.
Be aware of the limitations and , like the .
Sham using iconset.
Using () pack is a very easy and simple, Let's take an example:
Sham uses Bootstrap Carousel Plugin as its primary slider manager. You can view all available options for the carousel at their
Sham comes with a number of helpers classes along with the classes.
Small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar. Demo and more: .
Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slide. Demo and more: .
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: .