I'm very new to frontend development and mostly into backend nodejs. Can someone explain the workflow(technical) on how to use a Theme forest theme and adapt to a SaaS web app frontend?
Hi ayyappa99 -
Browse until you find a template that has content that talks about a similar topic as what yours will talk about (i.e. business themed might be good). If the frontend is actually an internal tool, theme sellers will call these "dashboards".
Watch for patterns that these templates will basically come in. Sometimes the theme makers call them "blocks" or "sections" and identify the pattern with similar naming (i.e. testimonials, or cards, or feature section, etc.), so find one that most looks like it will serve the purpose (and size) of the data you are going to display. Copy/paste the entire code so you have all dependencies for responsive, icons, etc. Try to delete all the HTML sections or blocks without breaking any functionality. Then comment out the remaining except the one you are using.
If you are doing this server side, delete the text, image src=, etc., and put in the syntax for Jinja, ejs, handlebars, whatever and place in data, or client side put in a placeholder div that gets filled in once the async call to the data comes back. Be careful when using a template for unknown data - what happens when the text that comes back runs out of the box it is in? Those kind of scenarios...
Uncomment out another section from the template, or copy the same one if it was working, rinse and repeat.
The purpose of a theme is to save time. I have found however that instead of it being a time reducer you spend your time taking out sections and placeholder images, text, header and footer links (a tear down vs a build up approach). But its a great place to start. UI8.net is a great resource (+creative tim).
My preferred approach is to just find a high quality theme and get inspired by it. I can just use the CSS framework I choose, and then I build out the "block" to match what they did but with my content. Of course when your content goes into a template or style not designed for you, you have to tweak details to make it look right. TMI, I know, but if you made it this far thanks for making it through!
Really appreciate for the detailed answer. Its quite helpful. Please do share if you see any tutorials online where they get from bare theme to functional web app page.
Overall, loved the way you explained each and every part which is required :)
As far as any online tutorials, I have really never seen this. Sorry!
Thank you. I will look more on that part. Didn't find the template authors have notes on integration as it could be very basic but helps beginners like me.
I've used them quite a bit for Ruby on Rails sites. Generally I have to do a lot of mucking around with the files before they're ready to go. I usually look for HTML-only, responsive, Bootstrap-based. In Rails I use HAML quite a bit which cleans up the HTML formatting so the first step is to convert all of the HTML pages into HAML. I also need to get the various CSS and JS files into some sort of shape. Once or twice I've come across JS errors which are hard to fix when you've been given a large minimised source file.
I do find that no matter how many times I try to be selective, I invariably end up with the issue that I need to hand-create additional pages. Maybe just simple things like "we have sent you an email confirmation (yada yada yada)" but sometimes even a login page.
As an aside, in my ideal world, I'd be given a mock-up of every single page on the system before I wrote a line of code. I can't count the number of times I've been told that "it's just one page" but they forget to mention the signup, the "forgot password", "email confirmation", "login", "my profile" pages, not to mention the 404 page, the "about" page, the T's & C's page, etc, etc. Themeforest are pretty good because they give you a lot of those pages already. But again, there's always that one missing page which requires me to dig into the CSS and HTML to try and create a similar style.
Im very bad at css. Thanks for sharing the experience. Its quite informative.
That would depend on what kind of theme you bought. There are (mostly) Wordpress themes, Woocommerce themes, HTML only themes etc. As a Node developer, you're probably better off using an HTML only theme and customizing the code to suit your specific needs.
I’ve had better experience with Creative Tim more recently. Their templates come as React, Vue and Angular apps, so they’re already “cut up” into components. See notimeforbooks.com for an example. I used Argon Vue Design System as the template
Can you please share me the workflow for converting a template (React/vue) to a working one with data? Consider i'm new to frontend.
Btw, I saw your product on IH earlier. Very nice idea! Would be great to see your post on your tech stack mainly cloudflare workers - good, bad and ugly parts of it :)
Download a Vue template from CreativeTim. Take a component and try render some data in it, like a table. Something like:
<tr v-for="(item, index) in myData">
If you get that working, then you'll want to call and API. Install axios.
let res = await axios.get("https://my-site.com/api/myDataEndpoint");
this.myData = res.data
And now your displaying data from your API in your pretty template. Build from there...
Thanks Steven. I will give a try with the above workflow. Looks like I will be able to do it :)
Is this a wordpress theme? When I built https://www.modea.com/ (on WordPress) I remember I used a sass compiler used "wpsass" and I think this is the link:
Just install it, make sure you have the right settings so the css is in the right place, and then run npm run watch and it will compile for you. Super handy if you have to use wordpress.
If it's a HTML template then I can't help you with node.js, but I could tell you how to do it using Laravel.
Best of luck.
No, its not for wordpress theme. Mainly for React/Vue where i need to fill data with my rest api responses.
Also interested in this. There are React specific themes as well, but I've never used them. I bought an awesome GatsbyJS theme, worked super well will little work.
How much work or whats the workflow that needs to be followed to make a theme bought functional?
Depends on how much you want to customize after. The one I bought was built out of the box, so I spent some time changing color themes and logos. It takes about 5-10min to get the code build and deployed on Netlify, just need to follow the READ.ME instructions.