Skinning any kind of project can be fairly complex and time-consuming if done from scratch, this is why CSS frameworks such as Bootstrap, Foundation, Semantic UI exist. They have reusable CSS classes that make styling your project easier, resulting in fewer bugs and often add functionality like responsive styles for use with mobile devices.

We at i7MEDIA have taken advantage of that by developing Framework.

What is Framework?

Framework is a mojoPortal skin using Bootstrap as it's base, with basic styles and functionality for every feature and page in mojoPortal. It is built using Less, which is a CSS pre-processor that makes templating styles much easier by using special syntax and software to compile the Less into CSS.

Less 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, themeable and extendable.

You can read more about Less here if you're interested in customizing Framework by hand.

Did you say something about Bootswatch?

One of the many ways to easily customize Bootstrap is to use Bootswatch. Bootswatch is a free Bootstrap theme library, it has many themes that change Bootstrap's look and feel. You can download Bootswatch compiled themes that have both Bootstrap CSS and Bootswatch's custom styles, but that won't plug-n-play with mojoPortal or Framework, this is where Less comes in handy.

Because Bootstrap has both Less and Sass (Sass is like Less but requires different software and syntax, Bootstrap v4 will be built using Sass) we can use the Less files that Bootswatch provides, add them to the Framework project, and then compile the Less to CSS in the skin.

So what does all this involve?

Remember how I said that Less compiles to CSS by using special software? There are many ways to set up Less, from command-line to third party tools to client side compilation, but our suggested solution for you is to use Prepros.

Prepros is a very handy tool for those of you who don't want to have to spend time getting your hands dirty with setting up third party tools and script to do many things such as pre-processor compilation, auto-prefixing of CSS properties, minification, etc.

Since we've developed Framework using Prepros, getting started customizing Framework is done in three steps:

1. Download our mojoskins project from here and extract the files (mojoskins has Framework and a few Bootswatch skins).
2. Download Prepros and double-click the executable to install. A little animation will show up and will disappear after some time, there is no indication that the installation is done. Prepros will now be in your Start Menu.
3. Open Prepros and drag the Framework skin folder on top of it, this will load the project with our default settings. I would then suggest right-clicking the project name and hit "Refresh Project", sometimes it just needs a refresh to properly register to compile correctly.

You're now ready to make changes in the Less files, Prepros will watch the files for changes and will compile with your new changes.

How do I Add Bootswatch to Framework?

Adding Bootswatch to Framework is real easy. Go to bootswatch.com and click on the theme you want to use. Now click on the theme's name in the menu, right-click on bootswatch.less select "Save link as…" and save the file in the /less folder of the project. Do the same with variables.less but save it as bootswatch-variables.less.

Now open main.less in the /less folder and add these two lines to the file right above @import "skin.less"; like this:

@import "bootswatch-variables.less";
@import "bootswatch.less";
@import "skin.less";

Once you save the main.less file Prepros should run and compile everything for you and will display a success popup. If you get and error, or if Prepros seems to not have made the proper changes, right-click on the project's name in Prepros and select "Refresh Project". Try saving the main.less file again and it should compile with no errors. If you still have errors click the Log tab in Prepros and read find out what your error is.

Framework should now be Bootswatch styled site-wide!

That's it! Just rename your skin to something like "bootswatch-theme" and upload it to your site.

If you have any questions or comments please do not hesitate to bring them up in the forums.