Adding a new .less file to be compiled independent of app.less

1

This is not an obvious question. I don’t want to add style to my app.css or change bootstrap variables.

I want a new generated CSS file. I’m going to use it with the SVG files that are my header graphics and logo. I’m going to build some responsive images and I want to use the sizes defined in bootstrap/variables.less for my media queries. Since i don’t need a whole lot more than the variables and some specific styles, i don’t want to use app.less (even if it is cached) unless I have to.

In Gruntfile.js I made the following chagnes

  • added 'assets/css/svg.min.css': ['assets/less/svg.less'] to recess.dist.files
  • added assets/css/svg.min.css' towatch.livereload.files,clean.dist`

I expected to see svg.min.css in my css folder but grunt doesn’t seem to want to create the files even thought it says the config has changed.

I know that there has to be something I’m missing but I’m stuck.

Thanks!
Adam

2

Oh never mind. I’m an idiot. apparently creating an empty .less file doesn’t give you a generated file. So even if you’re trying to get it all setup before you start coding, throw in a comment.

But hey, at least you are all thinking about using svg and media queries for your designs (because unless you have to support IE8, you have no reason not to, and its a LOT of fun)

3

Adam, I like your idea of using a separate file for SVG support. I intend on using SVG in my future designs and would also like to create a solid methodology for this.

Are you intending on making the inclusion with a modernizr query and document.write?

Are you willing to document your process for people seeking to do this in the future?

4

Actually, its stand alone svg in object tags. I’m not overly concerned, about IE8 support. When the time comes, I’ll put a static png up there for them and avoid the nicer features.

There isn’t much of a process, to be honest. The most nifty bit is a script that applies all the relevant transforms to the paths so I can simplify code (i hate 3 and 4 levels of <g> with just transform attributes) that I may convert into a webservice; right now, its a jsfiddle that I just paste my SVG into, wrap the original bits in a <g id='orig'>, add a <g id='final'> and then copy the transformed <path> elements in final to my original file. Clumsy but effective.

Beyond that, its a lot of hand coding to get things where I want. When I have something mostly not ugly to show people, I’ll post something here.

One day, I’ll try using SVG to layout my themes (with <foreignObject> to contain all the HTML content).