-
Notifications
You must be signed in to change notification settings - Fork 9
Tips and recommendations
Below we've gathered some tips and recommendations that will help you make your custom themes even better and ensure that they play nicely with Sprites.
Both basic CSS as well as all the built-in Sprites themes leverage vw/vh responsive units wherever possible (with a very few exceptions, like border widths). This way all the content within the given infographic is automatically scalable, making it look good on devices with different screen sizes (laptops, phones, tablets, projectors, etc.). Because of this, we strongly advise you to also use vw/vh units throughout your styles. Otherwise, we may leave a right to reject your pull request and ask for a corresponding improvement.
For the same reason as mentioned above (accessibility), whenever you're using images in your themes, you should only use SVG and never refer to raster images (jpg, png, etc.).
Because we believe that great stories deserve to be told louder and have a broader audience, all Sprites infographics are implicitly licensed under Creative Commons Attribution-ShareAlike which, in turn, can make it quite difficult to use any commercially-licensed content, such as fonts when creating custom themes. We recommend you to choose only free fonts and we, personally, take all our fonts from Google Fonts which we think offers a great selection.
Although it's possible to apply styles directly to the <div class="element"> (the main container for particular element), we don't recommend doing so because Sprites relies on some of the styles to provide consistent user experience. Please apply your styles to the <div class="element-outer"> and the <div class="element-inner"> containers instead (you can read more about slide layout here and about element styles here).