For developers
Get up and running with generated components
Last updated
Was this helpful?
Get up and running with generated components
Last updated
Was this helpful?
Overlay can generate Vue.js / React / Vanilla HTML components.
In web design integration, there are several tools :
UI Frameworks: Styled Components, Material Design, Bootstrap, Tailwind CSS, etc ...
Languages: CSS, SCSS, Less, Stylus, etc ...
We choose to focus on SCSS, because it's a very powerful and flexible language.
Of course, it's still possible to use Overlay with other setups, this adds a little work overhead after getting components code. In the future we will add more and more setups.
Here are the available setups:
React / SCSS Module.
React / Styled components
Vue.js / SCSS.
Vanilla HTML / Vanilla CSS.
To avoid big and painful CSS files, Overlay only adds required CSS properties to your component, for example Overlay doesn't add margin: 0
to every p
tag. Browsers have , to avoid conflict with your design, add a file to your project's root.
You can test by changing with the lang
attribute for <style>
tag.
assets
folder.A stylesheet example :
Import the stylesheet inside a component and use one variable :
Here an example of styleResources config :
You are now ready to import Overlay components in your project 🚀
You can test by changing with the lang
attribute for <style>
tag.
src
folder.A stylesheet example :
Import the stylesheet inside a component and use one variable :
You are now ready to import Overlay components in your project 🚀
You can test by changing with a CSS file to SCSS by changing his extension to .scss
then change his import.
*.module.scss
(don't forget to also change the import), to enable SCSS module.A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
Test your implementation by injecting styles from your SCSS module into a component
src
folder.A stylesheet example:
Import the stylesheet inside a SCSS module file and use one variable :
You are now ready to import Overlay components in your project 🚀
You can test by creating a first styled component
Create a stylesheet.js
file in your project
Then import the stylesheet in your main React App file
Now we can test it in a styled component.
You are now ready to import Overlay components in your project 🚀
Overlay is a design to code tool. It is a new way of working for developers who have to get familiar with generated code. Your challenge is to understand how Overlay builds components.
Before you start, the most important thing is to coordinate with your designer. Design-to-code is not only a matter of tools, processes and workflow are key ! Make sure you agree on :
Style variable names (ex : we decided to name all variables like this >> blue-primary
).
CSS class names (ex : everything in english, business related names).
Component granularity: How to split your mockup into components.
The first step is to copy/paste the new component in a new file's project, then import this component into your app, and display it.
Overlay only generates <div>, <p>, <input> or <img>
tag. You can change these tags with <h1>, <section, <header> etc..
to improve your app semantic. These changes won't affect the current style. Be careful, Overlay doesn't generate <table> or <form>
tags. In these cases, the layout/style must be changed.
becomes ...
Overlay uploads all your component's assets on a secured server and injects them into <img>
tags. Then you can download all your component's assets from the component's page, tab "assets".
Here is a raw img
tag coming from Overlay..
.. that becomes
Overlay compiler uses padding and margin to position elements in the DOM. Sometimes, to add some dynamic behaviors, we need to use flex-grow, space-around and other dynamic properties. Don't hesitate to change the generated style according to your needs.
In some cases, we, developers, want to use relative units measure instead of pixel (%, rem, vh, etc...). Feel free to change it to adapts the measure unit to your context.
becomes ...
Overlay uses static data for components. Don't forget to add your data if needed, using props.
becomes ...
That's it ! you know how to read an Overlay component, keep in mind that the more you read generated code, the more you will be comfortable doing so.
If you need to import the stylesheet path in all your components, you can fill the stylesheet path in your Overlay project settings with your own path.
The import will be present on top of all your component style part :
Overlay makes automatically two optimizations on the number of generated style lines :
@The duplicate styles merge : Overlay merges classes with the exact same style (except for containers)
The last-of-type styles merge : Overlay merges classes where the last layer doesn't have any margin and all the others have the same margin.
This one is frequently use with list item.
To start creating responsive components, make sure you know all the breakpoints and agreed on responsive behaviors with your team.
If you use SCSS, we recommend creating mixins to help you with media-query
Do as usual
Two possible cases for a designer :
The common case: the component is very similar on another device (elements disappear, layout goes from vertical to horizontal). In this case reuse as possible the same layout that you did for the first export. Same layout also means same layers names so developers doesn't get confused.
The component is very different on another device. In this case the developer will certainly create a new component, do as well.
For example, if we have this class :
You will merge like this your class :
We add flex-direction
property inside the mobile media query because this property is already defined in desktop and his value isn't the same for mobile.
We add border-radius
property inside the mobile media query because this property is not defined for desktop.
We add background-color
property inside the desktop media query because this property is not defined for mobile.
The previous class already works for both desktop and mobile but on mobile size the flex-direction
value is overridden by the media query, it's dead code. To avoid this disagreement, we clean the class by moving all the properties with overrides.
The ThemeProvider
component injects the theme into all styled components anywhere beneath it in the component tree, via the context API. More info on styled component theming .