Bootswatch with Framework

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

8/5/2024 10:19:42 AM
Gravatar
Total Posts 2

Bootswatch with Framework

I'm following the docs to add Bootswatch with Framework using Prepos.  https://www.mojoportal.com/customizing-framework-with-bootswatch  The article says to @import bootswatch.less file and bootswatch-variables file above @import 'skin.less' in the main. less file.  

The issue is that I don't see a skin.less file in main.less.  I tried importing bootswatch and bootswatch-variables files in various places but consistently get an error from Prepos.  

Is there an updated version of the article or can someone please provide guidance on how to enable bootswatch with framework?  Any help is appreciated.  

8/5/2024 1:16:24 PM
Gravatar
Total Posts 2

Re: Bootswatch with Framework

Sorry to reply to my own message but... I was able to get this working!  Just add @import bootswatch-variables.less and bootswatch.less under the bootstrap.less import.  It complied via Prepros and appears to be working on the site just fine. 

It would be good to fix the docs.  In addition to the mistake regarding the @import, it would be very helpful to explain and clarify how to get the .less versions of the bootstrap templates.  Are there any compatibility issues with them?  Framework uses bootstrap 3.3.7.  I downloaded bootswatch cosmo 3.4.1.  

8/8/2024 10:42:01 AM
Gravatar
Total Posts 92

mojoPortal Hosting & Design @ i7MEDIA!

Re: Bootswatch with Framework

Hi David,

Sorry for your trouble. The docs are actually correct, it was just that the Framework skin had been updated since the docs were written and the skin.less and it's import in the main.less were missing from the repository.

I've added the skin.less and the import for it to avoid further confusion in future.

LESS works very similarly to CSS in the way it cascades, so placing the Bootswatch files at the bottom of the main.less will achieve the same results, the reason the documentation states to place it above the skin.less is so that you can place any custom styles for your theme in the skin.less but it will still respect the Bootswatch variables and be the next cascade for any styles you wish to override.

There shouldn't be any issues with the Boostrap/Bootswatch versions as they are the same major version. If you do let us know.

HTH,
Elijah