Introduction

Introduction

Nucleus - Multipurpose Technology Template

Nucleus is ideal for: Hosting & Cloud Services, SEO Providers, Mobile and Desktop App Showcase, Startup Landing Page, Cenferences and Meetings Promotion, Product Presentation, Online Shop, Digital Agency / Blog and Portfolio etc.It is built with SASS which gives creative freedom to make your own unique styles and components with ease. That makes Nucleus very versatile. Besides gorgeous landing pages Nucleus features Blog, Portfolio, Gallery, Contacts (with working Ajax form), 404, Help Center, Shop templates and great number of various elements to compose new pages.

Layout is based on advanced responsive Bootstrap 3 grid which makes your website looking perfectly on any device and screen sizes.

Go ahead and build your unique and appealing app showcase / services presentation / hosting and cloud / SEO agency / Digital agency / conference promotion website.

Nucleus Features:

  • Unique and Creative Landing Pages: Hosting & Cloud Services, Mobile App Showcase, Startup, Conferences & Meetings, Product Presentation, SEO Services, Online Shop.
  • Creative App Tour Slider
  • Beatiful Scroll Hardware Accelerated CSS3 Animations
  • Includes Blog, Portfolio, Gallery, Contacts, 404, Help Center and Shop Templates
  • Premium Slider (Master Slider) included save $17
  • Premium PSD included. save $12
  • Header and Footer Options
  • Boxed / Full Width / Masonry Grid Layouts
  • Blog and Portfolio Layout Options
  • Built with SASS
  • Layout Based on Bootstrap 3 Grid
  • Lots of Elements
  • Clean and Heavily Commented Code
  • 100% Valid and SEO friendly Code
  • Retina Ready
  • Optimized Graphics
  • Detailed Documentation

List of Pages:

Home Pages
  • Hosting & Cloud Services
  • App Showcase Landing
  • Conference & Meetings
  • Startup Landing Page
  • Shop Homepage
  • Product Promo Page
  • SEO Services Landing
Features
  • Features Page
  • App Tour Slider Scale
  • App Tour Slider Rotate
  • App Tour Slider Gallery
  • App Tour Slider Opacity
  • App Tour Slider Parallax
Help Center
  • Help Center General
  • Help Center Topic
Portfolio Pages
  • Standard Grid
  • Grid With Gap
  • Grid No Gap
  • Single Project
Blog Pages
  • Blog No Sidebar
  • Blog Right Sidebar
  • Blog Left Sidebar
  • Single Post No Sidebar
  • Single Post Right Sidebar
  • Single Post Left Sidebar
Shop Pages
  • Shop Catalog
  • Single Product
  • Shopping Cart
  • Checkout
Secondary Pages
  • About Us
  • Contacts
  • Pricing
  • Press Kit
  • 404
  • Elements

Folders and Files

File Path Description
main Root folder
main/Nucleus This folder includes all HTML, CSS, Javascript, Fonts and Image files of the template.
main/Nucleus/css Includes style.min.css file that is compiled from styles.scss. This is all theme styles including Bootstrap and some modifications to 3rd party plugins. There is also styles.css uncompressed styles with table of contents for those who prefer vanilla css over SASS.
main/Nucleus/css/vendor Includes all css documents of 3rd party plugins.
main/Nucleus/fonts Iconic fonts, that gives you customizable vector icons (more than 500 icons in total). For more information on how it works, please see Changing Icons Section
main/Nucleus/img This folder includes all graphic assets of the template. When you need to change images, slides, backgrounds, etc..this is the place to go.
main/Nucleus/js/vendor This folder includes all 3rd party jQuery Plugins used in this template.
main/Nucleus/js/scripts.js All template custom scripts and plugins initialization.
main/Nucleus/mailer This folder includes php and js files for Ajax contact form. See Configure Contact Form section.
main/Nucleus/masterslider This folder includes all working files of Premium Master Slider.
main/Nucleus/sass This folder includes all source .scss (including Bootstrap sass) files from which compiled styles.css.
main/PSD PSD Folder includes all .psd files.
Please see the complete list of files here
main/Help Folder includes documentation you are reading.

Setting Up SASS Environment

In this section you will learn how to setup SASS environment, editing and compiling .scss files, complete template SASS structure.

Compiling SASS

SASS is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

For more information visit SASS official website.

For compiling SASS files into CSS we used software called "Prepros". Visit it's website at https://prepros.io/. Basic version is completely free and available for Mac and Windows.

Prepros

SASS Files Structure

SASS File Name Elements Inside
bootstrap folder Bootstrap framework .scss files.
bourbon folder A simple and lightweight mixin library for Sass.
font-awesome folder Font Awesome icons pack .scss files.
feather-icons folder Feather icons pack .scss files.
flaticon folder Flaticon icons pack .scss files.
_bootstrap.scss File with all @imports from bootstrap folder.
_buttons.scss Styles for all possible buttons variations.
_carousel.scss Modification of Owl Carousel styles.
_comments.scss Comments component styles.
_components.scss Includes custom modification of 3rd party plugins: Google Maps, Magnific Popup, Master Slider.
_footer.scss Footer styles.
_forms.scss Form elements styles including: inputs, textarea, checkboxes, radios, custom selectboxes, validation styles.
_grids.scss All Isotope grid types supported by this template. Please note: template based on Bootstrap 3 Grid system which can be found sass/bootstrap/grid.scss
_mixins.scss Custom mixins that mix properties from existing styles.
_navbar.scss Navbar styles including different navbar (header) types: Sticky, Full Width. It also includes main navigation (menu) styles including collapsed state.
_navs.scss Customization of default Bootstrap Tabs component and Portfolio Filters component.
_page-title.scss Page titles styles.
_panels.scss Customization of default Bootstrap Panels/Accordion component.
_post.scss Styles of elements associated with Blog posts including single post, like: Post Meta, Tags, Pagination, etc.
_preloader.scss Page preloader component styles.
_scaffolding.scss Body styles, utility classes, page container.
_scroll-slideshow.scss Scroll Slideshow component styles.
_shop.scss Shop module styles: shop tiles, cart, etc.
_shortcodes.scss Theme Shortcodes - Page Building Blocks including: Block Title, Plan Switch, Pricing Table / Schedule Table, Box With Icon, Image Box, Testimonials, Full Width Section, Pricing Plans, Video Popup Button, Downloads Counter, Team, Progress Bars, Feature Tabs, Logo Carousel, Counters (Animated Digits), Tile Tabs, Countdown, Gallery Grid, Split Contacts, Portfolio.
_social-buttons.scss Includes 38 social buttons styles with brand colors.
_tables.scss Tables styles.
_tooltips.scss Customization of default Bootstrap Tooltips component.
_typography.scss Headings, paragraphs, lists, links, blockquotes styles, etc...
_variables.scss File that holds all variables. There you can globally change colors, font-sizes, margins, paddings, etc...
_widgets.scss Styles of all widgets of the template found inside sidebar and footer.
styles.scss File aggregates all other .scss files via @import. This one is compiled to styles.css

Configure Contact Form

We created special .php and .js file for processing Ajax contact form which can be found inside Nucleus/mailer folder.

There is also configuration file config.ini where you can set Email addres to receive massages and Subject. You can open it with any text editor. See screenshot below:

Configuration File

Changing Icons

We used different packs of font icons in this template.

Adding Font Awesome icons:

<i class="fa fa-iconName"></i>

Adding Brand icons:

<a href="#" class="sb-brandName"><i class="fa fa-brandName"></i></a>

<!-- For example -->
<a href="#" class="sb-facebook"><i class="fa fa-facebook"></i></a>

Adding Feather icons:

<i class="icon-iconName"></i>

Adding Flaticon icons:

<i class="flaticon-iconName"></i>

Complete list of Font Awesome icons

Complete list of Feather icons

Complete list of Flaticon icons

Scroll Animations

Applying scroll animations is easy. Follow steps below:

  1. Link <script src="js/vendor/scrollreveal.min.js"></script> animations plugin before </body> tag. Make sure it's above your main scripts.js file.
  2. Add main class scrollReveal to target element first.
  3. Than add chain of necessary modifier classes. See complete list below:
Scroll Animations

Here is an example of animated element from bottom, with bounce easing and one step delay:

<div class="scrollReveal sr-bottom sr-delay-1 sr-ease-in-out-back"></div>

Plugins Used

While creating this template we used some Javascript (jQuery) plugins to extend its functionality:*

jQuery v2.1.4 - most popular feature-rich JavaScript library.

Modernizr - JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Detectizr - A Modernizr extension to detect device, device model, screen size, operating system, and browser details.

Bootstrap - Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Velocity.js - Accelerated JavaScript animation.

Smooth Scroll - An extension for smooth scrolling in Google Chrome.

Isotope - jQuery plugin for categorizing, sorting, and filtering a responsive grid of items.

Magnific Popup - Responsive lightbox & dialog script with focus on performance.

Owl Carousel 2 - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Gmap 3 - A JQuery plugin to create google maps with advanced features.

Stellar.js - jQuery plugin that provides parallax scrolling effects to any scrolling element.

Fakeloader.js - lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

iCheck - Super customized checkboxes and radio buttons for jQuery.

ScrollReveal - Easy scroll animations for web and mobile browsers.

Page Scroll Effects - a mini-library of experimental page scroll effects.

downCount - jQuery countdown plugin that accounts for timezone.

Spincrement - A jQuery plugin for incrementing up to a certain number, for effect.

*To get more detailed information about how to use / customize these plugins please visit their official websites.

Please be informed that we DO NOT provide support to any third party plugin's. We can only answer simple usage questions or issues related to incompatibility with the template.

Photoshop Files

All Photoshop files related to this template you will find in the PSD folder. Please note, these files are used as mockups and can be slightly different from the final template. But you can still find necessary graphic assets.

List of Files:

  • 01_index_hosting.psd
  • 02_index_app_presentation.psd
  • 03_index_conference.psd
  • 04_index_start_up.psd
  • 05_index_shop.psd
  • 06_index_product.psd
  • 07_index_SEO.psd
  • 08_help.psd
  • 09_help.psd
  • 10_blog.psd
  • 11_blog_post.psd
  • 12_about_us.psd
  • 13_contacts.psd
  • 14_shop.psd
  • 15_shop_single.psd
  • 16_shop_cart.psd
  • 17_shop_checkout.psd
  • 18_portfolio_nogap.psd
  • 19_portfolio_gap.psd
  • 20_portfolio_standart.psd
  • 21_pricing.psd
  • 22_press_kit.psd
  • 23_features.psd
  • 24_404.psd
  • 25_login.psd
  • 26_states.psd
  • 27_mobile_menu.psd
  • 28_elements.psd