Q: How to speed up converting designs to html pages process (manual)?

79 Views Asked by At

As a front-end designer converting designs (PSD, Sketch, AdobeXD, ..etc) to dynamic HTML pages manual. I'm using bootstrap framework with jQuery library. When I started this job it took long time to convert the designs to html, after that the time decreased because the work becomes classic and it is routine. But every design is different and I start from the scratch using bootstrap component then adding my override CSS and JS.

I wondering if there is tools or ideas to improve my work and do things faster??

What I know is that I can create my own JS or CSS codes that I use usually (common things). Then, I can include these files all projects that I'm working on.

I need other tools and ideas to use.

1

There are 1 best solutions below

0
On

There are different front end starter tools (boilerplate) which you may use as a basis and write you code on top of them each time.

Also consider remove bootstrap if you need everytime to override it, as you said.

It is better to have less dependencies for sure.

Also try to write your html/css as like you create page full of components, which are independent. Use CSS BEM methodology and try to make components as reausable as you can. In that into mind you may create something like your own library / framework of most used common components between projects and just to include them everytime. You may provide simple customization via CSS native variables or LESS/SASS ones with help of mixins.