Less Theme for Sitefinity

Hi all,

We’ve been working on a new front-end theme and LESS module. The theme is written in LESS and uses Bootstrap 2.3 as a pattern.  

To try it on Sitefinity 6.2, download this package and follow the instructions from the zip file to install the LESS module and play with the theme.

The idea is to keep the Basic theme for a while and provide the new theme for download. Also, we are working on the option that .less files can be used in Sitefinity theme directly. These files will be automatically registered if placed in Global folder of a Sitefinity theme. This will ease the theme development process. However, we recommend that you use .css files on live sites.

Any feedback and comments are welcome!

Regards,
Sitefinity Team

Great news!

I'm so glad this is coming :)

1) Do you mind prefixing the content (imported...) less files with an underscore so that VS Webessentials won't compile those on save?

2) Should output sitefinity.min.css instead of sitefinity.css, no? ...or at least give us the backend option to set which it generates?  Clearly wouldn't want BOTH as global would serve up both.

3) Wishlist for this compiler is to be able to edit the LESS files directly from Sitefinitys backend (Codemirror supports it) :)  Would be great if the less compiler you use also synced with the one from webessentials so there's never any differences.  Clearly also thunder editing would be great, but I don't always have thunder handy to make quick changes.

Thanks guys, the old "Basic" theme is useless :)

Thank you for doing this, but why 2.3 instead of 3.0? Especially with the mobile emphasis put into 3.0.

Horizontal (one level) navigation displays but the drop down horizontal navigation only displays a toggle button and a UL list. Please do not remove the responsive elements from bootstrap, it's one of the best features.

Also, every time I hit a page with this template, a console app would flash on my screen. I assume that has something to do with the less module. 

@Mark,
Kali meant the same approach/pattern as how bootstrap's doing it with the @imports etc and not a Twitter Bootstrap theme/template.

Thanks @Jochem, I let my hopes get the best of me! The full bootstrap compatible theme built in would be very handy Sitefinity team! Anyways, the less functionality will be helpful anyways.

@Kali,

Awesome that you guys our now supporting/focussing/using .less but why this way?

Why waste precious development time to build a compiler if there's already the official less.js we've got dotless which is a dotnet port and instantly available NuGet package and VisualStudio now officially supporting .less files ?

As of VisualStudio 2013, .less is an equal senior citizen to .css and for those developers still on VisualStudio 2012 or VisualStudio 2010 there's the WebEssentials extension.

Why have me worried about compiler compatibility and less features working? 
No offense but keeping jQuery smooth is already providing troublesome enough, it's not your core business and it shouldn't be.

---
LESS is prodominantly a development 'language', and for those who don't mind there are easy ways to compile .less on a production server in runtime. 

Most of us, don't want that. Don't want the server overhead, not the chance of things breaking nor the chance of a compiler running out of memory and breaking an entire site. 

Perhaps I'm overly worried but I'm sure 2-3 versions down we're going to see you guys dynamically adding in .less files in our theme-loading when you're going to need additional styles for say inline-editing etc and stuff like that is bound to screw up because of re-used variables or double named mixins etc.

I know someone must have said internally, lets become be more flexible and better manage our stylesheets and someone suggested .less for it but please, cancel the custom compiler part.  

There are better and more useful ways of getting your dll based styles loaded optimally - adding a layer of potential failure to the production environment isn't the best way to do this.

I'm sure the first response is going to be "hey you don't have to use it if you don't want to, .css is still going to be supported" but knowing Telerik, if you continue to develop the compiler, you guys are going to use it.

Scenario's like Steve's wishlisht can already be done using existing components/tools and there's no real client nor a development benefit from compiling .less on the server nor having to test a production environment for dynamically generated css.

If you guys want to score points with devs and client by getting the number of requests down, why not look into bundling and minification?  Build a better CSS and JS widget that grabs and combines all of them on a page.

Or enhance the page editor with RequireJS, so that for each widget we could say require this-and-that file and the system would async load this for us once page rendering is complete. RequireJS already has a plugin system for css files so with a single require statement like this:

@Mark,

If you tell me how I can make twbs more friendly/easier to be drag-dropped into, I'd be happy to adapt the current project.

The current project on Github is 'full-featured' or perhaps better said kept wide to be flexible, but all you'd have to do for it to work is just copy/paste the App_Themes into your project and delete the less folder and file if you don't want them.

You'd end up with a single sfproject.min.css file containing Bootstrap 3.0.1 with the Sitefinity and Kendo bits included.

Take a chill pill...it IS using less.js to compile to css...go check JustDecompile.  Just because they wrap it in Telerik.Less doesn't mean it's "custom".

"Scenario's like Steve's wishlisht can already be done using existing
components/tools and there's no real client nor a development benefit
from compiling .less on the server"

Go speak for yourself...I don't want to bloody open visual studio make a quick less change save, upload to the bloated deep app_themes folder every time if it's something small.  What am I supposed to tell a client....go buy visual studio and download thunder?  Clearly there is a benefit to editing it on the server and compiling it dynamically.  Or my personal site, I want to just go in and throw up some less changes instead of bringing it all local, changing things then re-uploading.

I will agree in that I don't like the implementation of including less files as resource links to by dynamically converted.  I have less in VS that takes 3-5 seconds to compile, I don't want that hit on my server if you guys start using it as a core way to style things.  I think this is a seriously bad idea that isn't well thought out when you're already nickel and dimeing performance tweaks.

I would be fine with it if instead if compiled and cached the min.css result to a temp directory to serve until the less changed though maybe.  At least the result then would be the SF css comes always minified.

@Steve,

I am chill - just because it's a long post - I haven't used caps or anything.  Just wanted to give a few arguments upfront and save ourselves some back-n-forths.

---
I checked with JustCompile - hence the jQuery reference.

You don't have to open VisualStudio and make that quick .less change and then upload it back up to the server again - that was my main point.

Use less.js and a tool like Falafel's Code Explorer if you want backend integration and you're done.  Keeps it clean and tight if you insist on using .less files with runtime compilation. 

If you want server compilation pre-runtime and just the generated .min.css, there's solutions already there as well like a commandline compiler or better yet use dotless which can run from the commandline as a compiler, it can run as a watcher, a handler or from code.

The point being, a backend css/less editing widget with a compile button linked to a compiler and usage-method of choice is something completely else than a Telerik.less.compiler.

So yes, I've been lengthly and vocal but it's the preview forum and to me this sounds like a wrong direction and waste of dev time.

Clearly you didn't check with JustDecompile because it is using lessc as the compiler.  Enhancing resourcelinks to use it was likely also trivial.  Big whoop.  Regardless...dynamic less compilation = bad idea Kali.

So lets go over everything slowly...
1) " if you insist on using .less files with runtime compilation." 
Who's insisting...I do NOT want this, clearly it's a bad idea.  This method also both exposes me to external controls (at a cost, and no way to validate quick reliable updates), and client compilation.  Also why would you advocate for something non-native not supported.

2) "Better yet"?  Yeah so I have to what go use the falafel editor then, then go run a command-line tool...with no access to the server...great...I'll just go right ahead and magically RDP in and kick-off lessc WHICH IS WHAT TELERIK.LESS IS CALLING ANYWAY!  And you yourself have knocked dotless as crap...and I do agree with that, it's flakey.

A SUPPORTED backend file editor which detects saves\changes to the .less, kicks off the compile using the latest official LESS compiler, and overwrites the .min.css is a great tool to have.

You're like arguing more work on our end to do something simple like compile less...if it's on their end they can at least implement caching or hell, anything else in a consistent manner.

@Steve,

You win ok? 
Your absolutely right, that client, who is clearly savy enough to write .less code in Notepad, or you yourself, would have a hard time running a commandline tool locally and simply upload the untested output .min.css file through the backend file manager.  

And it totally makes sense to start doing development changes on our production servers and hey, if 3-4 months down the line the compiler's embedded version is a mismatch to the styles and suddenly strictmath is a requirement or my 3rd party foundation/bootstrap is using a min/max.less feature yet still unknown to the compiler, causing our production sites to break, we'll just jump through the same hoops as we're doing now with JS, no sweat.

@Jochem
  You're clearly not reading anything here...it's a WEBPAGE not a custom control.  Why bother making a new PAGE on dev then uploading the changes to live...this is why we have this magical thing called "DRAFTS"...and *GASP* Approvals.

Nobody is wanting to write less in notepad, read closer...I want a codemirror window formatted to the less extension to open and save a file (thus triggering it to compile).  So AGAIN because you're not capable of reading...I could make this change from anywhere instead of my dev machine or a machine with firewall RDP access.  I'm not sure if you're aware, so I'll just tell you...you don't NEED to use less syntax in a .less file, it accepts pure css syntax too...just FYI

So this is why the wishlist is to keep it in sync with the official less compiler...

Steve

@Steve,

Thanks for putting me in my place.

Now if you'll excuse me I'll go back to school and learn to read and write again so next time I can be sure the url reads sitefinity.com and not sitefinitysteve.com

@Telerik

I would rather have a little less LESS and a bit more ...  (well Steve you know what I want) 

That's the beauty of working in IT - its never boring.

You all have yourself a good one and don't forget what counts at the end of a post, day, week, live. So enjoy your day.

Markus

PS: Somewhere on the internet I read a post were some wrote 
QUOTE
maybe stop adding new features. 
UNQUOTE

Thanks very much for taking the time to review the theme and module and give us your feedback.

@Mark
We started working on the theme when Bootstrap 3.0 was not yet released. It was aside task so we were working on it when we had time. As Jochem explained, we used Bootstrap as a showcase how to structure the files and we didn’t use it as a base framework. We tried to make our own framework suitable for our front-end widgets, consistent with their logic and structure. We have not covered the responsive part yet. We have to consider how to link Responsive Design module of Sitefinity to themes. For sure we will work on this in the future.
You are right, the console is part of the module.

@Steve
Thanks for the wish list. We will take it into consideration  We have plans to improve theme management in Sitefinity administration. Part of this improvement will be to edit files from the administration directly. This feature might be included in the roadmap for next year, however, this is not 100% sure.

@Jochem
The initial  idea of Less module was to showcase the new theme and make it possible to use it (the theme) in the context of Sitefinity themes. First we were thinking to use dotless but then it turned out it has not been updated since 2010 so we came up with our own module.