I'm currently working on new projects and I'll be using the Foundation 4 Framework (foundation.zurb.com). I checked the web up and down but couldn't find a project (GitHub or otherwise) that ported the SASS logic of Foundation 4 to LESS.
I really like Foundation 4 and I would love to work with SASS but as reality forces me to not use ruby for development, I'm down to using the pure CSS version of Foundation 4. I would prefer to use it with less, which I can easily include in my PHP workflow and porting all the SASS goodness to LESS is quite a bit of work. I am fully aware that some parts of the Foundation SASS logic won't work with LESS, but that is a price I'm willing to pay.
I found a grunt project (github.com/jonschlinkert/grunt-refactor) that offers/promises some degree of porting logic but as I never worked with grunt/node.js before, I couldn't get that working until now.
Do you know of a Foundation 4 LESS port?
Someone tried to create a fork in Foundation3 that was done in LESS but they eventually dropped it. You can find full discussion about this here: https://github.com/zurb/foundation/issues/370. I don't know about any other porting to LESS attemps.
Related
Is there a way to download the complete foundation frameworks package on macOS?
I'm taking a course on webdev and the instructor using windows has a few package options when they choose to download it ( Essential, Custom, Complete, Sass, etc.)
but when I click on it, Im only able to download the sites package, which doesnt seem to include all the necessary files for the course.
I'm new to all this, sorry if its a pretty lame questions, if its a operating system issue, ill live, but thought id throw it out here before I gave up completely.
Zurb Foundation has gone through a number of changes over the last few years, the main one being that it is no longer maintained by Zurb themselves. More on that can be found here:
https://github.com/foundation/foundation-sites/issues/11767
and here:
https://github.com/foundation/foundation-sites/issues/12191
My assumption is that the group of maintainers now running the project have reduced the number of download options with the main one being the main compiled css package that contains all the Foundation elements.
I'm a graphic designer who just started learning Laravel this week, recently I've been searching how to install the latest bootstrap version in my project correctly, which is all I need to be honest and I'm not too comfortable with other options like Tailwind.
As some tutorials and answers have suggested I ended up compiling and using a famous project named laravel/ui, sadly the resulting version comes with a few changes, that just doesn't look as good in my opinion (different fonts like Nonito, colors and margins)
So now I'm wondering...
Why is it not recommended to just add the CDN links in my master template?
Is it possible to update this compiled CSS somehow to make it look as the CDN?
Sorry if this questions might be opinion based, but I'm really out of places to ask, seems like the documentation for Laravel 8.x has removed everything related to Frontend, which are making thing even more confusing for me with all these options Laravel offers.
I'm not a developer myself, but my company develops and supports a large web application for insurance brokers.
Since way back we've been using ExtJS 3.x and as we went further the harder it got to migrate from 3.x to 4 and now to ExtJS 5. Due to the structure of the application and demands from out customers we cannot afford to freeze development and focus on refactoring our interfaces.
But we still want to use the benefits and functionality of the ExtJS 5.
My question is - is it possible to use both versions of the framework in the same application? For example, developing new grids and modules with ExtJS 5 and gradually migrating existing forms.
Did anybody have this sort of experience? Or is it plain nonsense and will never work?
Thanks to everyone in advance.
I find this question very interesting. I had a similar challenge, when I had to migrate our in house app from legacy Jxlib to ExtJs4. Putting my experience together with #Lolo's answer here is what I can advice:
Build on a new solid foundation. You could be tempted to keep your app in ExtJs 3.0 and start grafting new ExtJs 5.0 components on it. If you really want to take advantage of all the new features of ExtJs 5.0, you should start off with a clean, simple MVC app in ExtJs 5.0, that could be as little as the main window and the main menu. You could then bind all existing menu entries to the existing ExtJs 3.0 code. This will allow you to start with a really clean thing, keeping all the old functionality, without rewriting the code, and allow you to develop all new features with clean ExtJs 5.0 code that follows current best practice recommendations.
You will face two stumbling blocks:
You have to separate the namespaces in Javascript and CSS. Here also, I would advice to change the prefixes for ExtJs 3.0, and not for Ext 5.0 (I ignore if ExtJs 5.0 includes a sandbox file). The reason behind is that all your new ExtJs 5.0 code will be standard compatible, while only the old legacy code becomes incompatible (what it is anyway already). This will represent some code refactoring though, because you would need to replace all Ext. occurrencies in all your code with Ext3. or similar (the same applies to CSS, but will be much less work). I hope for you, that ExtJs 3.0 has a sandbox version, because I think refactoring their code would be a lot of work (but not impossible).
A major feature of ExtJs 5.0 (as already for version 4.x) is the automatic building and compiling of an MVC application using Sencha Cmd. This didn't exist yet for ExtJs 3.0. I think it is crucial that you start straight away using this tool. I will allow you to really take advantage of all the enhancements (declarative programming instead of imperative, advanced MVC and MVVM features). It will radically change your coding style.
To get this work, you compile in a first step you old code in one Javascript file. Sencha Cmd must not recognize this as an Ext app. Then you simply add requires: 'Oldapp' in Application.js and ExtJs will include a file called Oldapp.js. That file should define a class Oldapp and include all the rest of your application code:
Ext.define('Oldapp', {
// Just what ever you need
})
// All the rest of the code of you old app
Then layout all the folders and files of your new code according to the MVC or MVVM specification (whatever you prefer) in the Ext doc, and Sencha Cmd will build you the whole app correctly.
I think this all allows you to take advantage of all the new features immediately, building on a clean, standard foundation with only minor code refactoring. It sounds like eat the cake and have it too, but it is possible.
But this will take a huge mental step: You must learn ExtJs 5.0 like something new and try to forget all you know already about ExtJs. You won't use Ext.ready anymore, Ext.Loader will handle this under the hood. Nor will you instantiate Ext objects from declarations (ban panel = Ext.create({xtype: 'panel', ... stuff), stick to Ext.define('Myapp.view.Mypanel' .... There are many other points where everything changed since Ext 3.0 ...
This last point is in my opinion the biggest stumbling block, much more important than the two technical points explained before: It is difficult, but crucial to reeducate yourself.
You can use sandbox version of Ext Js 5.0 and "normal" 3.0 (I don't remember if 3.0 is also available as sandbox).
Then you can change prefix for all 5.0 classes and css rules. By default it is Ext4 (not Ext5) for JS, and x4- for CSS.
To use sandbox include ext-all-sandbox.js file from build directory.
It won't work. The javascript files will clash with each other.
So I am very interested in using LESS with Bootstrap and Visual Studio. THe problem I'm having is that Web Essentials doesn't seem to be able to compile css from the Bootstrap LESS files. I've done some poking around and it seems that Web Essentials doesn't understand semicolons or something to that effect, which is causing it to choke on bootstrap's less files.
So, are people using LESS with bootstrap in a VS environment, or have I wandered onto the fringe?
Some tools you could use:
Web Essentials - I can tell you it does work with Bootstrap as I've used it before
Web Workbench - A paid alternative, I prefer web essentials
GruntJS - A JavaScript task runner that you can configure to build various resources and hook it up to your post-compile step so it happens automatically
Personally I'd go with grunt, while it's not very commonly used tool in '.NET', once you've used it you can see the awesome power it gives you. It's open source, and has a tonne of open source plugins that lets you do heaps of stuff, plus you can write your own.
Some examples of plugins: minify JavaScript; compile SASS, LESS, TypeScript, CoffeeScript, Markdown, etc.; copy files; delete files; optimize images and so on.
Check out WebEssentials (as you've already found, if it doesn't work, try filing a request or an issue) or the Mindscape Web Workbench and finally the BundleTransformer. Your request isn't a fringe, the web is embracing these technologies, so is Visual Studio.
If you'd share the exact messages you're seeing, or the steps you've taken so that we can reproduce, we can help you better. As far as I can tell WebEssentials should work with Bootstrap's less files just fine.
I am using Zurb Foundation V3 currently. Does anybody know if I upgrade Foundation V3 to V4 will V3 projects still compile using V3 gems/sass? Can the two versions of Foundation be used on the same computer for different projects or will I have to migrate all my existing projects to V4 if I upgrade?
Many thanks.
There is a migration guideline documented in Zurb's website. Your design will not change, at least it should not be, as things still work pretty much the same. But you will certainly have to change some markups. Take for example the classes for the grid which is, arguably, Foundation's heart.
About using different versions, yes I think it should work as long as you only use a specific version for one project, it doesn't matter if they are on a single computer.