Skip to content

Latest commit

 

History

History
93 lines (65 loc) · 4.13 KB

README.md

File metadata and controls

93 lines (65 loc) · 4.13 KB
Raw

Logo

  • 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

Setting the project

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)
Loading

Setup: detailed description

  1. Fork the repository firstly.
  2. Now clone the forked repository.
  3. Now get into the cloned directory, and execute npm i to install all the packages used in this application.
  4. Now execute Setup.js and select the first option First time setup.
  5. This will produce all important folders and files required to execute the application.
  6. Now create a new component by selecting the second option (Create component).
  7. After the component is created, you'll observe a folder inside Compiler with the same name as that of the newly generated component.
  8. Get into that folder, and write some HTML code inside <component>.html file.
  9. You can also add styles inside <component>.css file.
  10. Now add this component into Prototype.txt.
  11. Now start the Compiler/Compiler.js.
  12. Compiler will start to convert all css to inline css, and gather all components into the file.
  13. Final email compatible code will appear in Output.html.
  14. Copy paste this code, and replace the element of the mail with this code
  15. If you didn't get the above point, then kindly watch this video

Advantages

  • 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.

Contributing

  • 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 🙂🎉

Contributors

Sam Varghese

Sam Varghese's banner

  • For the creation of this project, and all its maintenance.