Sketch CSS to RapidWeaver/Foundation integration?


(Juan Fernando Maguid) #1

Hey guys,
what I want to do is this:

  1. Design stuff inside Sketch (as I always do)
  2. Export CSS from each individual design element inside of Sketch using the CSS export thingie that appears when you right click
  3. Somehow implement this inside of RW using Foundation and some CSS Stacks?

I’m totally out in the blue on how to do this but would LOVE because I create a lot of custom made designs and need to create clickable prototypes.

All the best
Juan Fernando Maguid
Senior UI & Interaction Designer


(Juan Fernando Maguid) #2

I’m planning to share this knowledge and write some kind of tutorial, so all contributors will of course get credited and a lot of love from me :smiley:


(Andrew Tavernor) #3

We would need to see the markup and CSS that it creates but in principle it is pretty simple.

The main thing will be to scope the CSS properly - in this case a stack like CSSBox is your friend as you can give it a class to scope all the Sketch classes within and avoid potential conflicts with the theme.

I’m not sure what you are exporting in terms of the element itself - is it an SVG (i.e. XML markup)? or something else. This will influence how you actually get it into your page.

If you want, you can email me (support [at] bigwhiteduck [dot] com ) the output of a simple test case and I’ll have a go at it for you. It may even be possible to make it into a little utility stack to ease the process of doing it multiple times.


(Juan Fernando Maguid) #4

Thank you for all your incredibly valuable input! I will def cook something up and send it to you. Just dl CSS Box I’ll give it a try. Would be totally amazing to create something that others also could use. Thanks again, this made my day!