Overlay can generate Vue.js / React / Vanilla HTML components.
In web design integration, there are several tools :
UI Frameworks: Element, Material Design, Bootstrap, Bulma, 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.
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 default CSS properties, to avoid conflict with your design, add a reset.css file to your project's root.
yarn add --dev node-sass sass-loadernpm install --save-dev node-sass sass-loader
You can test by changing with the lang
attribute for <style>
tag.
<style lang="scss" scoped>...</style>
Pro Tip: We recommend to also use scoped
attribute, to avoid style conflicts between your components.
A stylesheet example :
// stylesheet.scss$test: red;
Import the stylesheet inside a component and use one variable :
<style lang="scss" scoped>@import "assets/stylesheet.scss";...</style>
Here an example of styleResources config :
styleResources: {scss: ['assets/stylesheet.scss','assets/reset.scss', // We add the reset.scss here]}
You are now ready to import Overlay components in your project 🚀
yarn add --dev node-sass sass-loadernpm install --save-dev node-sass sass-loader
You can test by changing with the lang
attribute for <style>
tag.
<style lang="scss" scoped>...</style>
Pro Tip: We recommend to also use scoped
attribute, to avoid style conflicts between your components
A stylesheet example :
// stylesheet.scss$test: red;
Import the stylesheet inside a component and use one variable :
<style lang="scss" scoped>@import "stylesheet";...</style>
You are now ready to import Overlay components in your project 🚀
yarn add --dev node-sass sass-loadernpm install --save-dev node-sass sass-loader
You can test by changing with a CSS file to SCSS by changing his extension to .scss
then change his import.
// app.jsximport './App.scss';
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
// app.jsximport styles from './app.module.scss';const App = () => {return (<div className={styles.container}>Hello</div>);};
A stylesheet example:
// stylesheet.scss$test: red;
Import the stylesheet inside a SCSS module file and use one variable :
// app.module.scss@import "stylesheet";
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.
Pro Tip: For your first components take some time to inspect the whole component with your dev-tools to understand how Overlay compiler develop 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.
Pro Tip: When you start with Overlay, at the beginning of your first sprints, sit 10 minutes with your designer and export components together.
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.
import styles from './button.module.scss';const Button = () => {return (<div className={styles.button}>Hello World</div>);};
import styles from './button.module.scss';const Button = () => {return (<button className={styles.button}>Hello World</button>);};
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..
<imgalt="image"className={styles.image}src="https://static.overlay-tech.com/assets/test-image.png"/>
.. that becomes
<imgalt="image"className={styles.image}src="https://my-site.com/assets/test-image.png"/>
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.
.button {display: flex;align-items: flex-start;background-color: $green-hover;border-radius: 3px;padding: 10px 20px;}
.button {display: flex;align-items: flex-start;background-color: $green-hover;border-radius: 3px;padding: 1rem 2rem;}
Overlay uses static data for components. Don't forget to add your data if needed, using props.
import styles from './button.module.scss';const Button = () => {return (<div className={styles.button}>Hello World</div>);};
import styles from './button.module.scss';const Button = ({label}) => {return (<div className={styles.button}>{label}</div>);};
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 :
@import "src/stylesheet.scss";​.tabVue {background-color: $vue-green-light;border-radius: 3px;padding: 4px 8px;border: 1px solid $vue-green;}
Overlay makes automatically two optimisations 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.
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
// mixins.scss@mixin isMobile() {@media only screen and (max-width: 1023px) {@content;}}​@mixin isDesktop() {@media only screen and (min-width: 1024px) {@content;}}
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 :
// Desktop style (in your component).container {display: flex;flex-direction: row;background-color: blue;}​// Mobile style (in Overlay).container {display: flex;flex-direction: column;border-radius: 6px;}
You will merge like this your class :
// Merged style (in your project).container {display: flex;flex-direction: row;@include isDesktop {background-color: blue;}@include isMobile {flex-direction: column;border-radius: 6px;}}
We don't move display
property because it's already defined in desktop, and his value is the same in both size.
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.
// Cleaned and merged style (in your project).container {display: flex;@include isDesktop {background-color: blue;flex-direction: row; // this property is not overridden anymore}@include isMobile {flex-direction: column;border-radius: 6px;}}
Congratulation ! you are done 🎉. You are now a master for creating responsive component.