Has anyone attempted to use a CSS Preprocessing when doing Front End Development in Orchard (particularly with Bootstrap)?
I currently use Web Matrix for all my Orchard dev work, but looking to expand beyond the available Bootstrap themes and incorporate LESS. I'm unsure of the best route to go.
Any tips appreciated.
If you must use WebMatrix, then install this extension, which will compile your LESS files from the IDE when you save them. http://extensions.webmatrix.com/packages/OrangeBits
Have you tried instructions that reverand put on this site:
http://orchard.codeplex.com/discussions/291401
Still new to Orchard myself, and this post is pretty old. Basically he says that you need to install a DotLess module that will translate your less file into css.
Related
Apologies for my daftness here, but trying to start a new design workflow and having a hard time wrapping my head around a few basic concepts.
I know that I want to join the party late and begin utilizing preprocessing in my development. After a lot of deliberation, I've also decided that I want to use Bourbon/Neat as the basic framework (as opposed to Bootstrap, etc.). Lastly, I've also decided to move over to Adobe Brackets after years of using Komodo Edit as my basic editor.
That said, I'm struggling to figure out how to get the damn thing to work. I've installed the SASS plugin for Brackets, but how exactly do I get Bourbon installed, get to work and start compiling. I've been reading articles, but feel like there's something about the process that I'm just not comprehending. If anyone can lend some thoughtful advice, it would be MUCH appreciated!
Do not bother with plugin, just follow framework guide (1. install it using ruby/node/whatever 2. run framework file watcher, it will compile sass css on save).
If you want to stick with plugin, then explore author's repo, it contains an example.
I've been tasked with modifying the frond end of a Wordpress site, which is something I have not done before. I was first thinking of using Handlebars an Bootstrap, but I'm not even sure that will even work with the Wordpress framework.
If those don't work, what would be a good way to create a nice UI for the Wordpress site? Is creating my own theme a viable option? What tools am I even available to use?
Thank you.
Some of my favorite starter themes are:
http://themble.com/bones/ and http://underscores.me/
You can also look at frameworks like:
http://themeshaper.com/thematic/ or http://my.studiopress.com/themes/genesis/
I've used AngularJS with WordPress in the past, so I don't see why you wouldn't be able to use Handlebars (I haven't done it myself, but if you search, I'm sure you'll find some help there).
If you still want to use Bootstrap, there some tutorials on how to integrate it: http://digitalfellows.commons.gc.cuny.edu/2013/11/18/learn-bootstrap-part-2-adding-bootstrap-to-wordpress/
I'm developing a web app using python and twitter-bootstrap, and my CSS would really benefit from using LESS in order to generate my styles and themes. I want to inherit from classes provided by bootstrap, which means I've got to get the bootstrap source, and compile my LESS stylesheets against the boostrap .less files.
My question is two-fold:
1) The simplest way it seems to use LESS is not to actually compile stylesheets "on-the-fly" but to have a build step that I run each time I make changes to the styles. Is this typical? It seems like a lot of people run LESS dynamically in their server process, but it's an extra headache that I probably don't need, and I don't want to run less on the client side.
2) Thanks to LESS, my project now depends not just on bootstrap, but the bootstrap "source" - What's the best way to handle this in terms of my project management? I don't want to just absorb the whole of whatever the current version of bootstrap is into my git repos, because it seems like it would be a hassle to update it as newer versions of bootstrap come out (also feels icky!) Still though, I need to have at least the minified js/css in my project tree in order to deploy my app. How do people typically handle dependencies like this when developing web apps?
There are a couple of shoices:
You could use less.js in development, so you don't have to
compile each time you change your less code. You just use *.less files instead of *.css
You could use any of the GUI tools that will automatically recompile less code. I prefer LESS.app.
I use git submodule
I would have linked you to the same post as Pavlo above. Maybe there is no best CLEAN practice for this? Neither there is any magic "package manager" i think.
I went updates BS once and it was a bit of a hassle to find out all the variable names that have been changed in the LESS files.
I have lots of fantastic PSD, CSS and HTML design resources from places like CodeCanyon, CoDrops, multiple designer bundles, etc. I'd like to incorporate some of them into a WordPress site, but for the life of me, I can't figure out how to do it and I've looked everywhere I can think of, from CSS-Tricks.com and the Codex to For-Dummies books :)
I'm familiar with HTML, basic CSS and WordPress, but I'm (obviously) not a designer. I do know how to call an external stylesheet using #import or within tags, but how do I pull in the rest of the files?
For instance, I have an item called CSS3Accordion and it contains several index.html files as well as folders containing css, images and javascript. How should I reference them in my theme and where should I put them?
I'm assuming this is a very elementary question (so much so that these awesome design resources don't typically come with a how-to file), so in advance, let me say I sincerely appreciate any help I might get.
Applying a WP template to a WP site and coding one are two very different things. Those resources you are using, are they WP themes? If so, you should be able to install them quite easily using the control panel. If not, it's a completely new horizon. Templates don't function like "normal" html + css, they need much more things (specially, they need to be read by WP and its modules, widgets, etcetera).
I would suggest you start by downloading and installing themes (plenty of tutorials around), and then modifying some of those themes. They usually come with a custom css sheet to add/change styles (use firebug to find them, use !important to overwrite).
I hope this answers your question. If it's only a matter of loading new css, you can still add all of it to the custom sheet. There are also a lot of free plugins (like the accordion) that you can install in WP. Good luck!
I would recommend starting with a basic wordPress theme and incorporate your ideas as you go with some trial and error. WordPress themes are actually pretty straight forward once you spend some time dissecting a basic one. Most of the time I start with a complete design in Photoshop and use that image as a background to layout the sliced graphics over with CSS.
You can place your files anywhere you want, but I normally put them inside the themes folder and reference them with relative file paths, remember though to take the path into account when linking to the files.
I'd also suggest setting up a locally hosted WordPress install to play around with using something like WAMP, MAMP or LAMP. That way you have instant review without having to expose it to the public or uploading files every time you make a change.
Here are a couple of good starting template themes to explore with.
http://digwp.com/2010/02/blank-wordpress-theme/
http://code.google.com/p/wordpress-naked/
Regards and good luck.
I have just started using LESS CSS and it is great so far.
I do have a question or I am looking for a recommendation on the best way to use it.
I have been testing with the Mac Compiler and the client-side JS version.
I am sure there is some overhead to running it client-side and the Mac compiler works but its a bit slow because I keep having to run it.
Can anyone give me the pros and cons of each and if you have had more success doing it a certain way.
Thanks!
I'm on a mac and have been using StaticMatic.
If you're not afraid of the Terminal, you can quickly start new projects which generates some source files in HAML and SASS. Then you can run WebBrick (localhost:3000) to see you generated code on the fly.
When you're all done StaticMatic has a built in feature to "build" your site --> will generate HTML and CSS.
Hope this helps.