Nimrod Gavish
@nimrodgavish_ · Senior Product Designer at Wix.com
Super usefull! really like it, but - i need to use it with Helvetica Neue which you don't support... a small UX feedback -I wantted to see how it exports the CSS - I've seen the download fonts and download for sketch (and clicked them both) before i saw the "Send to your developer" button... Even tough you've tried to seperate and turn it to the main CTA, imo it made it feel like a regular button that apply settings or something..I've almost missed it.
Do the conditions of the spacing between different html elements are appearing as well in the CSS files?
thanks!
upvotesharetweet・
H
Martin Ollivere
@martinollivere · Product Designer
@nimrodgavish_ Hi Nimrod, thank you kindly for your great feedback. One of the features we are looking into doing next is adding the ability to use fonts that you currently have on your machine so hopefully this would be a valuable addition for you. Also I appreciate the UI feedback, we'll be tweaking bits and bobs over time and that's just the kind of input we need to improve things so thank you. I'll let @jamiegilman answer your CSS question as he is the front-end developer on this project and I am a mere designer
upvotesharetweet・
Jamie Gilman
@jamiegilman · Web Developer
@nimrodgavish_ Hi Nimrod, thanks for your input! The CSS does indeed provide the spacing between different HTML elements you may have set up. This is done using the adjacent sibling CSS selector and calculating the margin-top of the following element. For example, if you wanted to close the gap under an h1 where an h2 follows, the CSS output would be h1 + h2 { margin-top: -3rem } (or whatever the correct calculation is for your settings, which is dependent on the margin bottom of the h1).
The CSS output is fairly crude at the moment as a first version, but we will discuss improving the output to group common styles, and perhaps provide as Sass syntax also. Do let us know if you have any problems or would like to see further improvements. Thanks
upvotesharetweet・