A better design workflow using sass-rails and a separate design folder?

Workflow
1

Hi,

So currently we have a Rails 4.1 application using sass-rails, call it ProjectX. Within ProjectX there is a “design” folder where we keep the html/css for the frontend design. We also have the ProjectX/app/assets/ with subdirectories fonts/, javascripts/, images/, and stylesheets/ . In our design folder, we have scss files like this:

@font-face {
font-family: ‘HDVPeace’;
src: font-url(‘HDV_Peace.eot’);
src: font-url(‘HDV_Peace.eot?iefix’) format(‘eot’),
font-url(‘HDV_Peace.woff’) format(‘woff’),
font-url(‘HDV_Peace.ttf’) format(‘truetype’),
font-url(‘HDV_Peace.svg#webfont’) format(‘svg’);
}

But when I compile the sass to css for use with Rails, I have to change the newly generated scss file (by hand) to use the assets directory:

@font-face {
font-family: ‘HDVPeace’;
src: url(‘/assets/HDV_Peace.eot’);
src: url(‘/assets/HDV_Peace.eot?iefix’) format(‘eot’),
url(‘/assets/HDV_Peace.woff’) format(‘woff’),
url(‘/assets/HDV_Peace.ttf’) format(‘truetype’),
url(‘/assets/HDV_Peace.svg#webfont’) format(‘svg’);
}

Is there a way to avoid this manual step? If I didn’t do it, then the designer would have to remember to change it themselvers. It seems like wasted effort if I have to keep “separate” font paths. I would think there would be a way to automate this…

2

I honestly have no idea how this works, you store all your css / html view files in a design folder?

I’m curious to know what problem this solves and why you don’t keep everything in app/assets/stylesheets, app/views directories. Am I missing something?

3

@mrlee, no what is stored in the design folder are basically html/css mockups - the actual rails views and css assets are stored in their usual places. The developer I work with tries to mimic the way they think a “designer” would do it. So they make static html/css mockups and keep it separately in a design folder. Then the design is copied over to the main rails application. I hope that clears it up.

4

Take a look at this blog post. I believe it solves your problem.

Thank you for clarifying, I tend to keep mock ups in a different project folder.

1 Like