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.
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. |
In this section you will learn how to setup SASS environment, editing and compiling .scss files, complete template SASS structure.
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.
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 |
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:
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
Applying scroll animations is easy. Follow steps below:
<script src="js/vendor/scrollreveal.min.js"></script>
animations plugin before </body>
tag. Make sure it's above your main scripts.js
file.scrollReveal
to target element first.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>
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.
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.
While making this theme we used third party plugins, images, icons, fonts, etc... and want to thank their creators: