- This is an application I made in order to code beautiful mails using only HTML and CSS.
- This application can process all the HTML and CSS files in order to generate an email compatible code in Output.html.
- Google, linkedin, and all tech giants always code their mails in order to generate beautiful mails.
- This application is also inspired by React js framework, hence you can split the mails too in different components, and reuse them whenever needed.
- Click here to see a demo.
Kindly checkout this video for a detailed explanation of this application: https://drive.google.com/file/d/1ZIJ8dnI1pmhsMXD7k1_HeUV5dr0FnEEI/view?usp=sharing
flowchart TB;
fork(Fork the repository) --> clone(Clone the forked repo.)
clone --> setup(Execute <a href = 'https://github.com/Sam-Varghese/Node-beautify-emails/blob/e8bada47d0c82dd9ac7938c1f8f25506ed407f54/Setup.js'>Setup.js</a>)
setup --> firstSetup(Execute first time setup option. 1st option)
firstSetup --> createComp(Now create a new component. 2nd option)
createComp --> checkCompFolder(Go to <a href='https://github.com/Sam-Varghese/Node-beautify-emails/blob/e6cf49ce1d95fa82ec4e216ec5b165c2ba5641eb/Components'>Components folder</a>)
checkCompFolder --> comp("Go to the component folder (Inside ./Components) you generated recently")
comp --> startServer(Start <a href = 'https://github.com/Sam-Varghese/Node-beautify-emails/blob/e2c48cf440e1041c7e37080bc02e1ed2b212db78/Compiler/Compiler.js'>Compiler/Compiler.js</a>)
startServer --> editHtml(Edit <Component>.html file)
editHtml --> editCss(Edit <Component>.css file)
editCss --> checkWebpage(Check <a href = 'http://127.0.0.1:8080/'>http://127.0.0.1:8080/</a>)
checkWebpage --> editHtml
checkWebpage --> output(Output generated in Output.html)
- Fork the repository firstly.
- Now clone the forked repository.
- Now get into the cloned directory, and execute npm i to install all the packages used in this application.
- Now execute Setup.js and select the first option First time setup.
- This will produce all important folders and files required to execute the application.
- Now create a new component by selecting the second option (Create component).
- After the component is created, you'll observe a folder inside Compiler with the same name as that of the newly generated component.
- Get into that folder, and write some HTML code inside
<component>.htmlfile. - You can also add styles inside
<component>.cssfile. - Now add this component into Prototype.txt.
- Now start the Compiler/Compiler.js.
- Compiler will start to convert all css to inline css, and gather all components into the file.
- Final email compatible code will appear in Output.html.
- Copy paste this code, and replace the element of the mail with this code
- If you didn't get the above point, then kindly watch this video
- You can use External style sheets, hence have reusable classes, and styles.
- You can enjoy the react js coding style for emails too.
- Means you can split the email into components, and reuse them whenever needed.
- The awesome compiler will take care of converting all CSS inline, and combining all the components.
- I've made CONTRIBUTING.md explaining how you can contribute to this project.
- All the contributors can put their names in the readme of this project.
- Gratitude from my side 🙂🎉
- For the creation of this project, and all its maintenance.