Combine Grunt, Sass, and SVG to create a dynamic, efficient, and intuitive development environment. Here's one way to do it.
We are right in the middle of building a web app at Skosh Interactive. It was mere splash page and newsletter signup that needed to grow into Flask app with quite a few features –and ideally be mobile-friendly. Because our own front-end framework is not yet ready for the big leagues, we decided on Foundation –with Sass, of course. And SVG (I might be a little addicted, sue me).
I had just stumbled across a screencast by Chris Coyier, and I was fired up about implementing a modern workflow. So I branched off and dove in. I tried to plan out all of the packages I would need and which tools I wanted to incorporate. It was
npm install this and
npm install that. The project is private right now, but the
devDependencies section of my
package.json file looked like this.
Styles (Sass and Foundation)
With these tools installed, the next step was configuring Grunt to do my bidding. I ended up creating a task that handles all of the styles for the project. It compiles my sass files, autoprefixes them, and compiles my customized version of Foundation. Here are the various sections of the
Gruntfile that dealt with the styles.
foundation-custom.scss file is a sass file that I created that contains just a few lines. It sits next to the
_foundation-settings.scss file, which is simply a copy of the foundation settings file that I customize as I work. After importing
normalize.scss and the settings, it finds the rest of Foundation’s Sass files.
The other slick system I wanted to get working was the
svgstore system that creates and utilizes SVG sprites. I place all of my svg files in an
svg directory, and it grabs them all and embeds it into my html in a hidden location. From there, I can reference any SVG I would like, and it displays it where I need it. The setup is as follows.
The HTML looks a little bit like this.
This is just a little glimpse of what is starting to emerge out of the “modern” workflow that I desired to put in place. The rest of the tasks move files where they need to be, optimizes images, and generally keeps things tidy. It is tough to go into great detail without giving you an entire tour of the project, but perhaps there will be more to come.Previous Article Next Article