Sparky is a Joomla template framework created for the development of websites without programming skills through an easy-to-use drag and drop interface. This is the only template framework in the market which you can use to create websites without any constraints.

Sparky will help you to work faster, but it won't take your FREEDOM to create any site you like! Check documentation and demos of the templates based on the Sparky Framework.

building your site
flexible
styling
responsive
menus
features
optimized
export

Layout Builder

Use drag-and-drop technology to make your new layout in less than a minute!

Layout BuilderSparky's Layout Builder is where you create layout for your new website in few simple steps.

  1. Click the "Add Row" button to make some rows.
  2. All module positions, menus and features are represented as cells. Drag and drop them into the rows.
  3. To resize the cells horizontally, drag their edges left and right. To move them within the row, use the arrows.
  4. Change rows ordering by dragging the entire row up or down.
  5. Row Settings for each row allows you to select background color and image, enable parallax scrolling, etc. Also, you can use a specific row name and/or class and style it through CSS.
  6. Delete cells from the rows by dragging them back to the container or clicking the "X" button.
  7. Delete rows by clicking the "Delete" buttons.

In the background, Sparky creates your static CSS and JS files fully automatically according to the settings.

back to top

Flexible System

Your site can have a traditional or modern layout. You can set a custom fixed width or use fluid width! You can set grid, system, gutter value, etc. Absolutely no restrictions!

Width SettingsSparky is different from other template frameworks because it doesn't limit you in any way. It's originally based on 12 columns grid, but you can select width of your website according to your needs. You can also select gutter size (margins between cells) as well as padding of the cells. This grid can also be flexible, if you are working on a website that has a fluid width (100% width).

Sparky also doesn't have a predefined layout like many other frameworks. Using the Layout Builder, you can create your own layout according to your design in less than a minute. This brings you the freedom, but doesn't make things too complicated at the same time. If you use Sparky, your website won't look similar to all other Sparky users' websites. You can use Sparky and follow your design guidelines carefully.

Sparky is not based on any CSS framework and uses its own internal system. Therefore, you don't need to worry about incompatibility issues when, for example, Bootstrap is updated. However, feel free to use Sparky with any version of Bootstrap. Or if you prefer, you can use it with Tailwind, SemanticUI or any other CSS framework.

back to top

Style Designer

Control of the most important visual and textual elements is integrated in Sparky.

Style Designer

CSS has hundreds of commands, so don't expect that you can control everything without writing the CSS stylesheets manually. However, if you need to edit the most common properties (such as color, font-size...) of the most common tags (such as H1, H2, H3, H4, P...), you can do it entirely through the Sparky's Style Designer.

Website's background is something that you'd probably need to define. Sparky allows you to pick a solid background color as well as background image. If you are about to use an image, several parameters such as repeating and centering can be controlled through the Style Designer.

System fonts or Google fonts can be selected with one click. You will see a preview text for the selected font family, weight, and style. Browse 800+ free Google fonts and include them in your site easily! Google fonts are using API v2 for faster loading and modern features.

 

Colors are color palettes are controlled easily

Template colors

Template Colors sub-tab under the Style tab allows you to set up to 6 template colors that you often use in your website. These colors will be easily accessible in every color setting through the color picker.

When you change a template color, the same color will be auto-updated throughout template settings. It will save a lot of your time.

You can also create multiple color palettes and activate any of them to test your website with different color combinations.

back to top

Responsive and Mobile Friendly

Sparky create responsive websites optimized for all mobile devices.

ResponsiveAs the percent of the mobile Internet users grows, you should consider making your website mobile friendly. This is also a big advantage for SEO. Sparky is a responsive template framework. However, if you for any reason want the same layout on mobile and desktop screens, this feature can be disabled. In this case, your visitors will see an identical version of your website on all devices. The layout script loads mobile layout first and therefore improve website performances on mobile devices.

The menu can be converted to a button image of your choice if the screen width is less than the parameter given here. This feature improves user experience when visitors navigate your menus on mobile devices.

back to top

Menu Control

Sparky will recognize all Joomla menus that you create. You can drag and drop them into the layout. For each of them, you can assign various menu systems and then control the menu system's parameters for this menu.

Menu SettingsMenus are collections of links used as a navigation throughout the website. Sparky helps you to make your navigation. It lists all the menus available in Joomla allowing you to drag and drop them into the layout. For each menu, you can select whether to control its appearance through Sparky or not.

It's possible to select several menu types, such as drop-down, mega menu, classic menu, accordion and horizontal menu. Each of those menu types has its own settings, so you can control everything under the Menus tab. You can also copy the settings from one menu to another.

You can also control your menus yourself by writing custom CSS code. In this case, simply select None for the menu type. This option is selected by default after installation of Sparky.

If you have a drop-down menu on your site, Sparky can convert it into a button for mobile users (if it can't fit the screen size).

back to top

Cool Features

A handful of some interesting and useful features that you might need even without any additional extensions. Install the template package and you have all the features of the Sparky Framework ready!

Cool FeaturesThis is a collection of "toys" for your site that you might (or might not) find useful. On some occasions, they can save a lot of time or add some interesting features to your website.

  • Branding: Type your textual logo and slogan and control font's appearance or select a logo image. Change copyright text.
  • Top panel converts the first row from Layout Builder into a button. Click on that button will show the content of the first row.
  • Font resize allows users to change font size on website. To enable this feature, drag "fontresize" box into any row in Layout Builder.
  • Google Analytics can be activated just by entering your account's id.
  • Google Web Fonts: You can pick Google fonts directly from Style Designer if you load them from this tab with a live preview of all fonts. Sparky uses the Google Fonts API v2 with features for faster loading.
  • Scroll To Top button appears when user is in the lower part of your website.
  • Equal Heights equalize heights of all modules within selected rows using JavaScript.
  • Image Animation can be added to some of the images. The animation starts when the image first appears on the screen.
  • Page Transitions display an animation while a page of your website is loading. You can select one of the spinner icons and set the overlay screen background color.
  • Additional scripts is a collection of useful scripts, CSS frameworks and icon sets that you can load. You can enable Bootstrap, jQueryUI, Fonts Awesome icons, and Lazy Loading of images. You can enable or disable these features from here.
back to top

Valid, Optimized, Fast

Websites based on Sparky would have a valid code and would load fast.

The parts of the code that Sparky produces is valid, according to the W3C. Keeping your code valid is recommended for better indexing by search engines and consistent look of your website in all browsers.

Sparky loads only the features that you really use, not everything. CSS code that's dynamically generated has not been written on the page (inline). It's loaded from the dynamically generated CSS file. This file doesn't contain everything, but only the pieces of code that your site really uses.

back to top

Export Your Work as a Branded Template

Another unique feature! Just think out the name of your new template... Sparky does the rest and creates the template for you! You can name this template however you like (per company or website name).

Export

This is the unique feature that only Sparky has! The Export tab has only one parameter. But, you'll love it because it allows you to export your work into the new installable Joomla template powered by Sparky, with all parameters and options kept.

You're just one click away from the new template for your website or your client's website.

back to top

Download Sparky Framework

This framework will change the way you create Joomla websites! You can download it with any club membership or purchase the framework separately.

Professional support is included. With club membership, you will also get access to 100+ templates for Joomla.

back to top

Documentation & Tutorials

Learn how to create websites using the Sparky Framework

We prepared some online documentation and video tutorials that will guide you through the development of your website with Sparky. Everything is covered, from the installation of Sparky to the export of your new site.

The main aim of this documentation series is to show off the most functions of Sparky to you. After you accomplish this fast course, you would be able to create your own websites. Please keep in mind, it's assumed that you already understand Joomla and how it works, and that you have at least beginner knowledge of CSS.

 

Documentation
Read online

back to top

Sample Websites

Sample Joomla templates powered by Sparky Framework.

Quattro
Coworking
Business
Nail Salon
Veterinarian
Psychologist
Learning
Model
Homes
Leaves
Island
Architecture

Testimonials

Sparky in literature

Joomla 3 template essentials book coverThe Sparky Framework is included in book Joomla 3 Template Essentials as one of the most useful Joomla template frameworks available. The book is written by Pawel Frankowski and published by Packt Publishing.

 

What users of Sparky say about it

A wonderful tool! I haven't found such clarity and straightforwardness in the other frameworks, not even close (!) - your product keeps saving me a lot of time and nerves (I need for other unpleasant stuff in life)! How many people out there are torturing themselves with Gantry, TA 3, JV, etc. before they find your product or even worse: never find it? Maybe they need such torturing (as unconscious compensation or even punishment) because so many things in their lives have become too comfortable and uncomplicated ... ;-) ?

Robin

back to top