We use our own version of Atomic CSS to tell Sketch what it needs to tell the React app of how things are positioned. Here’s a few guidelines on how to write code inside of our .sketch file. And a few nifty shortcuts!
Pages & Artboards
The page (in Sketch) where you have your designs that you want to render in our app must be named Start here. The first artboard you want to render needs to be named Start or else it will not work. Please study our demo files when in confusion, they will teach you a lot.
Images
Important: We currently don’t support rendering SVGs directly/natively. That means that you will have to export all of your graphical assets (photos, icons, drawings, dotted lines etc) as either .png or .jpg and re-import them into your artboards. Also you need to rename them correctly so that our renderer 👁 ”sees” them.
- {image} = responsive 100%
- {image-fixed} = fixed size according to what you have set up in Sketch
🎓⭐️ProTip: Use icon fonts for your icons, that way you can embedd the icon library as a {externalasset.css} so no need to export them one by one, and re-import them.
Example
{image-fixed} [mb10] - beard dude icon@2x
This means that the beard dude has a fixed image size and a margin bottom of 10 pixels. Also as you see in the given example you can add whatever text you want after the [...] - sweeeeet 🍩🍦
Fonts & Icons
We support linking web fonts directly from inside of Sketch! In our demos we use Google fonts but it should work exactly like this for other type platforms that uses similar methods.
We also support popular icon fonts such as Ion Icons, Material Icons, Fontawesome. You can even create your own icon set with services like Fontastic.
🎓⭐️ProTip: Use this awesome Sketch plugin called Icon Font for installing icon bundles.
Example
In Sketch use the Text tool (⌘+T) and write this in the layers panel:
{externalasset.css} Name of font/icon font
Inside the text node copy/paste the correct url that you’re given by your font provider for the font you use in your document. In this case we use both Varela Round and Lora in our mobile demo so it becomes https://fonts.googleapis.com/css?family=Lora|Varela+Round.
Copy this exact text layer to each artboard that you generate where you want the fonts to render correctly when exporting to .html files. You can turn down the opacity of the text layer to 0% it will still work. 😋 👍
The whole purpose of doing this inside of Sketch is that you will be able to share your design prototypes with other people by uploading them to your own servers.
Margins
- m1 - m150 = margin 1px-150px
- mt = margin top
- ml = margin left
- mb = margin bottom
- mr = margin right
Example
mr78 = margin right 78px
mr78percent = margin right 78%
Paddings
- p1 - p150 = padding 1px - 150px
- pt = padding top
- pl = padding left
- pb = padding bottom
- pr = padding right
Example
pr78 = padding right 78px
pr78percent = padding right 78%
Alignment
- hcenter = center content
Columns
Every Row contains Columns based on a 12 column grid.
{col}
Rows
Every Container contains rows
{row}
Breakpoints
In order to tell the Bootstrap-grid how to behave at different screen sizes (width in px) you have breakpoints. You specify how the columns should group at different breakpoints by using the prefixes: xs, sm, md, lg, xl.
From Bootstrap documentation:
sm: Small devices (landscape phones, 576px and up)
md: Medium devices (tablets, 768px and up)
lg: Large devices (desktops, 992px and up)
xl: Extra large devices (large desktops, 1200px and up)
Extra small devices (portrait phones, less than 576px) No need for a media query since this is the default in Bootstrap.
Non the less we do support xs-break point:
xs: Extra small devices (portrait phones, less than 576px)
Example
{col} sm:12 lg:6 - A Column covers 12 columns at the sm-breakpoint (576px+) and 6 columns at the lg-breakpoint (992px+)
Classes
css-classes on elements are written within [ ]. See chapter ”Paddings”, ”Margins” and ”Alignment”.
Example
{col} [m20]
or with multiple css-classes
{col} [m20 pt10 hcenter]
Responsive Classes
Our Atomic CSS also includes responsive margin- and padding classes. This mean that you can have different margins and paddings for different screen sizes.
You can utilize these by using the prefix ”mq” like this:
mq-[breakpoint size]-[padding or margin]
Example
mq-lg-mb25
This will give you a margin-bottom of 25px at large screen size width and above (see section about Bootstrap’s breakpoints).
Another example
mb10 mq-md-mb40 mq-lg-mb60
This will give you a a margin-bottom of 10px up until medium size screens and then switch to 40px up until large screen size where padding-bottom once again changes. This time to 60px. (see section about Bootstrap’s break-points).
Shortcuts
- {curly brackets} = alt + shift + ( )
- [brackets] = alt + ( )
- Command + S = Save your changes before dropping the .sketch file in the preview app. Also you will need to reload the preview app (command+R) before you drop a new version of the demo .sketch file. Working on a fix for this.
Designed and developed by ⚒ Fredrik Ward and 🎨 Juan Fernando Maguid © 2018