Ideally CDN’s like this should be served from multiple locations so that whenever a visitor visits a site, he will be served from the location nearest to his.
…rather than main.min.css since I have noticed that the Roots team has done same with jquery.min.js from Google’s CDN.
My question is therefore to the developers of Roots (1) does the Bootstrap CDN serve from multiple locations based on the visitors location and (2) would it be good practice to implement it on the latest Roots with Grunt?
I am pretty sure there must be a valid reason why the Roots Team is not using the Bootstrap CDN.
Probably best to wait until one of the main Roots guys come back to you on this one. I assume it has been done this way because bootstrap.min.css and app.css are combined and minified to form main.min.css. This means one CSS file and so less HTTP connections from the browser. The only downside of this is, as you say, that it doesn’t use the Bootstrap CDN. In fact, because bootstrap,min.css and app.css are combined you won’t be able to do this.
I don’t have an issue with this approach since I use my own CDN. Technically using the Bootstrap CDN should be quicker since more people are likely to have it already cached, but I still prefer this approach.
The jQuery CDN works because jQuery itself is not designed to be edited to your needs; there are plugins for that.
Bootstrap is not only designed to be edited, it is also strongly encouraged to do so to avoid the common complaint of all Bootstrap sites looking the same. Chris has an article on the topic on the new Roots site.
Ian is correct about the performance aspects, but the main reason is you should only be loading the Bootstrap components you need and should be customising what you do include using variables.less. If you’re using all the components, with the default styling, then you’re probably doing things wrong from a design point of view.
I’m not sure I’d go as far as to say “you’re doing things wrong”, although perhaps from a best practice point of view…!
I’ve been using the full Bootstrap code and then overriding certain styles. Yes, that is probably “wrong” and it results in duplicate or unneeded code, but it’s where I am currently. The next stage is of course to embrace the wonders of less and grunt. But for now, I’ll have to resign myself to doing it this way.
I did put a probably in there! I would also say that overriding the styles is fine from a design point of view and certainly a lot better than just using the default Bootstrap design, but you’ll occasionally run into specificity issues.
You’re right in saying overriding styles is unlikely to be a best practice performance wise, luckily using Grunt (at least during development) should only take an afternoon to get the hang of; it’s only a handful of commands.
No worries, it’s just me being impatient about wanting to move forwards and embrace all the best practices. Before I even start with Grunt, I assume I need to move over to testing locally. I develop using Dreamweaver/NotePad++ and then FTP to my dev site each time I make a change. It would be great if there was a tutorial to get me from where I am to being in a place where I can start using Grunt.
@iagdotme I only got started with Roots last week and first started on the version without Grunt. Then all of a sudden the Grunt version became available after I got used to the “Gruntless” version and I’m telling you the latest version with Grunt is the way to go since it builds all the necessary dependencies correctly in all the right places within Roots.
See who all uses Grunt here and you’ll also be convinced that you are playing with the Big Boys;-) and surely they will following preferred standards.
Download and setup WordPress under /htdocs in XAMPP ie: /htdocs/wordpress1/ or /htdocs/wordpress2/ etc.
Get the latest Grunt version of Roots here and transfer it into you WordPress themes folder under /htdocs/wordpress1/wp-content/themes/ or /htdocs/wordpress2/wp-content/themes/ etc.
Setup Grunt first globally (important) first for you PC/Mac using these instructions.
Then setup the Grunt dependencies per individual installation of your local development site’s roots in XAMPP under /htdocs/wordpress1/ or /htdocs/wordpress2/ etc. by using your terminal navigating to the mentioned directories and executing the command “npm install”. Then whenever you make a change in Dreamweaver or Notepad++ you have to execute the change with the command “grunt”, refresh you browser and voila.
You will notice that Dreamweaver/Notepad++ will ask you to reload the open files after you executed the “grunt” command above so you choose yes.
I did the above very fast but hope it will help to get you going with local development & Grunt.
@howdous - thanks so much for taking the time to write out all of that. Really helpful. I think it will be better for me to set aside an afternoon to try this out properly as I encountered a few issues earlier which I haven’t been able to sort out. First of all installing nodejs on Windows didn’t seem to work (typing npm didn’t do anything), then I tried the alternative installation with cygwin but that was a bit of a nightmare. I will try again. I wonder whether it’s because I am running Windows 8? I am so close to going back to Win7!
Having said that, although I work on Windows, all my sites are on a Linux virtual server, so ideally I would run all of this in a Virtual Machine using VirtualBox. That is probably complicating matters. Putting aside Vagrant which promises to make my life easier, I installed Grunt on Ubuntu and set up shared folders with a folder on my Windows machine. All seemed to work well, but I don’t think Grunt is working - I get quite a few errors. I’ll try it again soon and let you know how I get on.
After installing node on Windows did you open up a new cmd prompt before trying to run npm? The cygwin stuff shouldn’t be necessary. I just installed it on a Windows 8 VM, ran npm and had no issues.
Also, what errors are you getting on your Ubuntu setup?
@iagdotme - My setup is also on Windows 8 64-bit and I had no hassles.
Next maybe try running cmd as Admin and it could also be that you have tried various experiments on your machine and therefore have some unnecessary stuff installed at the moment. I try and keep my machine as clean as possible and for dev purposes only.
As an example XAMPP and Skype has a tendency to conflict since they both use the same port so one has to change the port for Apache on XAMPP or start XAMPP first and then Skype or just leave Skype off and use Google Hangouts;-)
But as you have suggested, set aside some dedicated time specifically for this and you should be able to work it out. There is a learning curve to all of this and once you have conquered it it’s actually very logical, you will see, so just hang in there.
The Roots developers really did a good job in developing Roots according to best practice and it honestly didn’t take me long to get the hang of it and with grunt it really took me an hour at most to get it up and running and figure out the logic of it.
Thanks, Ben. I am so glad you said cygwin wasn’t necessary. Nothing worked for me until I launched cmd as administrator and then it recognised the npm command. I’ve been able to install Grunt and get it working on Windows. It really is awesome, but I only had 5 mins with it. Need an afternoon to get my head round it all.
Next step is getting in working on Ubuntu. I can’t remember what the errors were, but I’ll let you know if I have any issues.
Thanks so much @howdous - running cmd as admin fixed the issue. For some reason it didn’t recognise npm when I didn’t run as admin. Now I have installed Grunt and spent 5 mins with it. I have to say I wasn’t sure it was going to be easy despite what you said, but it looks like I might just be able to get my head round it!
Since my web server runs Linux, I think if I do get round to local testing (for which there are loads of unanswered questions with) I’ll want to do that on Linux. That’s probably best done via a Virtual Machine using the likes of VirtualBox. I did manage to get shared folders working which is cool, but there were still issues. Shared folders allow me to access a folder on my Windows Machine from the Virtual Machine. The two are completely in sync.
I think I’ll start playing with Grunt first, and still FTP up changes. Then I’ll look at installing a web server on VirtualBox- although it might be worth the wait for the tutorial on Vagrant. Probably best to start a new thread on all of this, but I do have many concerns about working locally- plugins working, SSL, database out of sync etc…
If running a web server in a virtual machine, you could set it up by hand, but i would suggest using Vagrant. Keep it relatively simple, and not take hours to get it set up. Unless you are setting up a VPS/Dedicated server by hand, Vagrant will help a bunch in headaches.
Of course, if you want to learn what goes into setting up a web server, definitely take the time to install everything by hand.