FrancisChung

Website Template Site Recommendation

Recommended Posts

Hi,

I was wondering if people have any recommendation or share their experiences with websites that either provide free or commercial website templates?

Thanks in advance!

Share this post


Link to post
Share on other sites
8 hours ago, SamC said:

And the paid ones at: https://pixelarity.com/

Very nice designs but not used any myself though.

Great site! This one does stands apart from what you normally find on themeforest I feel.

  • Like 1

Share this post


Link to post
Share on other sites

@psy although I don't have a need to look out for a theme for a client project, I decided to buy the Canvas theme anyhow. Right now there's a sale going on, so it's only $10 :-)

Gonna use it to quickly build prototypes and whatnot... It will surely look better than "naked" Bootstrap/Foundation setups....

  • Like 2

Share this post


Link to post
Share on other sites

+1 for this canvas template tip. Reading the comment section it seems to have clean code.
For $11 you get all the bang you see on the live previews and demos. I just bought it.

  • Like 1

Share this post


Link to post
Share on other sites

For those interested in what's possible with the Canvas template suite & PW, below are a few examples.

PS: all recommendations in the Showcase posts actioned and I'm NOT a themeforest affiliate. These HTML templates simply make my front-end-dev work easier.

https://flywithmehorses.com.au/ - also in the PW Showcase forum at 

https://www.goldcoastholistichealth.com.au/

and another biz owned by the same client, https://www.goldcoastosteopathy.com.au/ - this one uses @kongondo 's blog module

https://beautifulhumanway.com/ - also in the PW Showcase forum at 

 

  • Like 5

Share this post


Link to post
Share on other sites

Canvas looks interesting. What's the license deal with it? Do you need to buy a license for each client project?

One thing that always concerns me about pre-made is that you might be jumping through a lot of hoops if you want to change something especially if no source files (sass/less) are included.

If I'm totally honest, sometimes I think why did I bother spending so much time learning stuff when I could just buy a template and be done with it. I wouldn't need to know hardly anything, only how to install PW, set up the fields etc. A portfolio full of bought themes isn't too impressive though when trying to convince the world you're a 'designer'.

Always puts me on the fence this subject, pre-made vs custom. There's a lot of pros/cons in my mind to both methods. Kinda like singers using autotune, are they really singers? :P

Share this post


Link to post
Share on other sites

Hi SamC,
First I want to thank psy for bringing this template to attention.
I am also no fan of pre-made templates due to their bloated code but this one is an exception
when it comes to quality code, customizability and flexibility. Since version 4.x.x it has
Speed Improvements, Javascript Optimizations & Less File Sizes.

Yes you have to buy a new license for each project which is now $11 (tax included)
and when the offer finishes it will be $16. Still I consider this little money for
what you get and the time it will save for standard projects.

https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123
Disclaimer: I am in no way affiliated with canvas, themeforest or envato.

 

  • Like 2

Share this post


Link to post
Share on other sites

@pwired think I'll buy it to give it a test, it's cheap enough for a punt, maybe I could actually use it on my own portfolio site to see what can be achieved.

At the moment, I spent so much time customising stuff that I'm starting to think this is a waste of time (spending hours upon hours working out how to build/compile with uikit 3 and actually building nothing) when I could churn out sites way quicker and cheaper. Cheaper is the key words here because round here, no-one wants to spend on (low functionality) websites, they go straight to wix and 'You want a website? Why not do it yourself?' *sigh*

There seems to be zero 'romance' in the custom design, bespoke, [insert nice sounding keywords here] websites, it's purely about price. This is a bitter pill for me personally as I always considered high quality workmanship more important than price.

Some crappy things have happened over Christmas though so maybe I'm just on a downer! Here's to a more positive 2018 :) 

  • Like 2

Share this post


Link to post
Share on other sites
1 hour ago, SamC said:

One thing that always concerns me about pre-made is that you might be jumping through a lot of hoops if you want to change something especially if no source files (sass/less) are included.

Canvas has both kinds: Country AND Western! ahem... LESS + SASS :-)

 

  • Like 5

Share this post


Link to post
Share on other sites

it also depends on the budget of the project;

for clients without a line item for frontend design, us developers have no choice but to use an HTML theme...

and why deny some clients without large budgets the benefits of having a PW site... Sometimes these Themeforest and Wrapbootstrap themes are good, and have good integrations with plugins like tabs, slideshows, masonry etc. Having said that, i do find that i have to fix a lot of problems with these templates, remove as much CSS code as i can that i'm not using, and also write a lot of my own custom stuff on top of them; here is a site using Canvas:

http://louiskarchin.com (recently relaunched/upgraded)..

  • Like 4

Share this post


Link to post
Share on other sites

@Macrura 

2 hours ago, Macrura said:

why deny some clients without large budgets the benefits of having a PW site

Agree 100%. I view Canvas as an extended Bootstrap toolkit - use the bits I want, disregard the rest and add my own custom code without having to reinvent the wheel when I need a particular feature. It in no way limits my options for original design while saving me time & money on FE development. 

Anyway, works for me and each to their own :) 

 

  • Like 1

Share this post


Link to post
Share on other sites
On 12/31/2017 at 2:16 PM, SamC said:

(spending hours upon hours working out how to build/compile with uikit 3 and actually building nothing)

I do not know what sort of wizardry you are practicing but I only spent half a day figuring out the setup I use all the time ever since. Note that I discard the UIkit theming feature (the so called included build process) as I find it useless. I prefer my simple method. In my site.less file I do:

@site-bower-path: "../../../../";
@site-font-path: "../../";
@import "@{site-bower-path}bower_components/uikit/src/less/uikit.less";
@import "@{site-bower-path}bower_components/uikit/src/less/components/_import.less";
@import "site_conf.less"; //my configs, site specific CSS and other LESS stuff
@import "uk_conf.less"; //changing UIKit variable values and adding UIkit hooks
@import "site_utils.less"; //utility classes

I'm not a CSS preprocessor expert so I'm sure there could be more useful setups but it already makes customizing UIkit 3 easy, like in the case of: https://www.szepelet.com

 

  • Like 3

Share this post


Link to post
Share on other sites
3 hours ago, szabesz said:

I do not know what sort of wizardry you are practicing

It's the slow kind :P

I use gulp to pull everything in usually which is relatively simple. I've found the included build tools with uikit super slow. I like with gulp that I can use autoprefixer etc. but I don't think uikit requires this actually, bs4 does.

Still not sure how to use only parts of the uikit JS rather than a large fie with the kitchen sink included. The webpack instructions I found to be lacking somewhat.

@szabesz how do you compile your less in your workflow?

  • Like 2

Share this post


Link to post
Share on other sites
15 hours ago, SamC said:

It's the slow kind

Probably it is not that slow after all, considering your nice UIkit admin theme tutorial you did not spend all that time on it in vain, I'm sure! Thanks for the tuto, btw. In order to gain a deep understanding of something complex, one has to spend a considerable amount of time dealing with it but if it is something useful I think it is worth it.

15 hours ago, SamC said:

@szabesz how do you compile your less in your workflow?

I have CodeKit 3 because I do not have the time to learn the command-line in this case. I compile site.less which is the source of the "main" css file, containing mostly all rules for the frontend.

Source files are stored like this:

uikit3-source.png.8c5a88d0103ccad32f4a0bce3187adb5.png

The images alias is needed and it points to .../bower_components/uikit/src/images so that site.less compiles with the hard coded icon paths in UIkit.

15 hours ago, SamC said:

Still not sure how to use only parts of the uikit JS rather than a large fie with the kitchen sink included.

I tested including separate components only, but it is a pita to do so and I did not gain too much regarding the file size of site.css so I simply include them all.

  • Like 1

Share this post


Link to post
Share on other sites
40 minutes ago, szabesz said:

I have CodeKit 3 because I do not have the time to learn the command-line in this case.

Aha, I think I still got a license for that. I'm the opposite, I found the command line easier, and it makes me feel awesome cos I'm a geek.

40 minutes ago, szabesz said:

I tested including separate components only, but it is a pita to do so and I did not gain too much regarding the file size of site.css so I simply include them all.

Sorry, I meant JS components here.

I was messing about with webpack simply so I could just include certain parts but getting the uikit less to compile and output in the right place was a pita (even though I can do it easily with gulp, but I'm always experimenting, maybe my downfall that one tbh).

Webpack is pretty simple if you're only using it for grabbing bits of JS and chucking it all together into a bundle.js file, probably why some people use gulp and webpack for their respective strengths. The 'uikit/build/' directory is difficult for me to understand what's going on. The web development landscape appears like this to me:

if (easierWay()) {
  extractFun();
  makeMoreComplex();
  makeNewFramework();
}

:P

  • Like 2

Share this post


Link to post
Share on other sites
1 minute ago, SamC said:

and it makes me feel awesome cos I'm a geek.

Yeah, it is a valid argument, I do understand :)

2 minutes ago, SamC said:

I kinda see 'modern' web development like this:


if (easierWay()) {
  extractFun();
  makeMoreComplex();
  makeNewFramework();
}

:D

Share this post


Link to post
Share on other sites

Posted twice by accident, can delete this...

Share this post


Link to post
Share on other sites
On 04/01/2018 at 11:10 AM, szabesz said:

The images alias is needed and it points to .../bower_components/uikit/src/images so that site.less compiles with the hard coded icon paths in UIkit.

This is something I'm having a problem with now, the images are all two levels up from the css file. However, if using their build tools, something funky happens to the svg.

Mine:

.uk-offcanvas-bar .uk-divider-icon {
  background-image: url("../../images/backgrounds/divider-icon.svg");
}

Theirs:

.uk-offcanvas-bar .uk-divider-icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.2%29%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A");
}

Seems if you use your own build tools and the images don't work unless you alias or copy the images folder somewhere. No mention of this here though:

https://getuikit.com/docs/less#use-your-own-build-process

  • Like 1

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Sephiroth
      Hi, So today I will writing a small tutorial on developing templates in Processwire using Twig Template, Processwire is a highly flexible CMS which gives developers/designers/users options and allows easy extension of the platform. So here goes the tutorial 
      What is Twig Template ?
      Simply put in my own words, Twig is a modern templating engine that compiles down to PHP code, unlike PHP, Twig is clean on the eyes , flexible and also quite *easy* to have dynamic layout site with ease ,without pulling your hair out. Twig is trusted by various platforms. It was created by the guys behind Symfony.
      Take this code as an example
      {% for user in users %} <h1>* {{ user }}</h1> {% endfor %} This will simply be the equivalent in PHP World
      <?php $userArray = ["Nigeria","Russia"]; foreach($userArray as $user): ?> <h1><?= $user ?></h1> <?php endforeach; The PHP code though looks simple enough however, you start to notice that you have to be concerned about the PHP tags by ensuring they are closed  properly , most times projects gets bigger and comes complex and harder to read/grasp, and also in PHP you can explicitly create variables in the template making it very hard to read as it grows and prone to getting messy WordPress is a major culprit when it comes to that regard.
      Have you ever wanted to created separate layouts for different pages and  break your sites into different parts e.g Sidebar, Comment Section, Header Section ? the regular approach would be to create individual pages for each section and simply add them as templates for the pages and with time, you can end up having tons of templates, however Twig allows you to easily inherit templates and also override the templates where you can inject content into the block easily. Don't worry if you don't understand the concept, the following parts will explain with an example of how to easily inherit layouts and templates.
      Layout
      <!DOCTYPE html> <html lang="en"> <head> {{include("layout/elements/header.twig")}} </head> <body> <div class="container-fluid" id="minimal"> <header id="pageIntro"> <div class="bio_panel"> <div class="bio_section col-md-6"> <h1>Okeowo Aderemi</h1> <h2>{{ page.body }}</h2> </div> </div> <div class="clearfix"></div> </header> <section id="page-body"> <div class="container"> <div id="intro" class="col-md-7 col-lg-7"> <h1>About me</h1> <h2> {{ page.summary }} </h2> </div> {block name="content"}{/block} <a style="font-size:1.799783em; font-style:italic;color:#d29c23" href="{{pages.get('/notes').url }}">Read more articles</a> </div> <div class="clearfix"></div> </div> </section> </div> <footer> <div class="header-container headroom headroom--not-top headroom--pinned" id="header-container"> {{include("layout/elements/footer.twig")}} </div> </footer> </body> </html> This is basically a layout where we specify blocks and include other templates for the page, don't panic if you don't understand what is going on, I will simply break down the weird part as follows:
      Include
      This basically is similar to native PHP 'include', as it's name suggests it simply includes the templates and injects the content into the layout , nothing out of the ordinary here if you are already familiar with php's include function.
      {{ output }}
      This simply evaluates the expression and prints the value, this  evaluate expressions, functions that return contents , in my own short words it's basically the same as <?= output ?> except for the fact that it's cleaner to read.
      {% expression %}
      unlike the previous this executes statements such as for loops and other Twig statements.
      {% for characters in attack_on_titans %} <h1> {{characters}} </h1> {% endfor %} This  executes a for loop and within the for loop, it creates a context to which variables in that context can be referenced and evaluated, unlike dealing with the opening and closing PHP tags, Twig simply blends in with markup and makes it really quick to read. 
      I will simply post the contents of both the header and footer so you can see the content of what is included in the layout
      header.php
      <meta charset="utf-8"/> <meta content="IE=edge" http-equiv="X-UA-Compatible"/> <meta content="width=device-width, initial-scale=1" name="viewport"/> <title> {{ page.title }} </title> <link href=" {{config.urls.templates }}assets/css/bootstrap.min.css" rel="stylesheet"/> <link href="{{config.urls.templates }}assets/css/main.min.css" rel="stylesheet"/> <link rel='stylesheet' type='text/css' href='{{config.urls.FieldtypeComments}}comments.css' /> <link rel="stylesheet" href="{{config.urls.siteModules}}InputfieldCKEditor/plugins/codesnippet/lib/highlight/styles/vs.css"> <script type="text/javascript" src="{{config.urls.siteModules}}InputfieldCKEditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script> <script src="{{config.urls.templates }}assets/js/vendors/jquery-1.11.3.min.js"> </script> <script src="{{config.urls.templates }}assets/js/vendors/bootstrap.min.js"> </script> <script src="{{config.urls.FieldtypeComments}}comments.js"></script> <link rel="stylesheet" type='text/css' href="{{config.urls.templates}}js/jquery.fancybox.min.css"> <script src="{{config.urls.templates}}js/jquery.fancybox.min.js"></script> {block name="javascriptcodes"}{/block} footer.php
      <nav class="site-nav pull-right"> <div class="trigger"> <a class="page-link" href="{{pages.get('/about').url}}"> <span>{</span> About <span>}</span> </a> <a class="page-link" href="{{pages.get('/notes').url}}"> <span>{</span> Journals <span>}</span> </a> <a class="page-link" target="_blank" href="https://ng.linkedin.com/in/okeowo-aderemi-82b75730"> <span>{</span> Linkedin <span>}</span> </a> <a class="twitter page-link" target="_blank" href="https://twitter.com/qtguru"> <span>{</span> Twitter <span>}</span> </a> </div> </nav> There's nothing special here, other than twig simply injecting these fragments into the main layout , the next part is the most interesting and important concept and benefit that Twig has to offer
      {% block content %}{% endblock %}
      This tag simply creates a placeholder in which the content would be provided by the template inheriting this layout, in lay terms it simply means child templates will provide content for that block, the 'content' simply uses the name 'content' to refer to that specific block, so assuming we were to inherit this template it would simply look like this.
      Inheriting Template Layout
      {% extends 'layout/blog.twig' %} {% block content %} <div class="container blog-container"> <section class="blog"> <header class="blog-header"> <h1> {{page.title}} </h1> <h5 class="blog_date"> {{page.published|date("F d, Y")}} </h5> <br> </br> </header> <div class="blog_content"> <hr class="small" /> {{page.body}} <hr class="small" /> </div> </section> </div> {% endblock %} {% block nav %} <div class="col-md-4 col-xs-4 col-sm-4 prev-nav"> <a href="{{page.prev.url}}"> ← Prev </a> </div> <div class="col-md-4 col-xs-4 col-sm-4 home-nav"> <a href="{{homepage.url}}"> Home </a> </div> <div class="col-md-4 col-xs-4 col-sm-4 next-nav"> <a href="{{page.next.url}}"> Next → </a> </div> {% endblock %} In this snippet you can easily notice how each blocks previously created in the header and layout are simply referenced by their names, by now you will notice that twig doesn't care how you arrange the order of each block, all Twig does is to get the contents for each blocks in the child templates and inject them in the layout theme, this allows flexible templating and also extending other layouts with ease.
      Twig in Processwire
      Thanks to @Wanze we have a Twig Module for Processwire and it's currently what i use to build PW solutions to clients
      https://modules.processwire.com/modules/template-engine-twig/
      The Modules makes it easy to not only use Twig in PW but also specify folders to which it reads the twig templates, and also injects Processwire objects into it, which is why i can easily make reference to the Pages object, another useful feature in this module is that you can use your existing template files to serve as the data provider which will supply the data to be used for twig template.
      take for example, assuming I wanted the homepage to display the top six blog posts on it, TemplateEngineTwig will simply load the home.php ( Depending on what you set as the template), it is also important that your twig file bears the same name as your template name e.g home.php will render into home.twig here is an example to further explain my point.
      home.php
      <?php //Get the Top 6 Blog Posts $found=$pages->find("limit=6,include=hidden,template=blog-post,sort=-blog_date"); $view->set("posts",$found);  
      The $view variable is the TemplateEngine which in this case would be Twig, the set method simply creates a variables posts which holds the data of the blog posts, the method allows our template 'blog.twig' to simply reference the 'posts' variable in Twig Context. Here is the content of the 'blog.twig' template
      blog.tpl
      {% extends 'layout/blog.twig' %} {% block content %} <div class="block_articles col-md-5 col-lg-5"> {% for post in posts %} <div class="article_listing"> <span class="article_date"> {{post.published}}</span> <h2 class="article_title"> <a href="{{post.url}}">{{post.title}}</a> </h2> </div> {% endfor %} {% endblock %} So home.php sets the data to be used in home.tpl once Twig processes the templates and generates the output, twig takes the output from the block and injects it in the appriopriate block in the layout, this makes Processwire templating more flexible and fun to work with. 
      The major advantage this has; is that you can easily inherit layouts and provide contents for them with ease, without the need of running into confusions when handling complex layout issues,an example could be providing an administrator dashboard for users on the template side without allowing users into the Processwire back-end. You can also come up with several layouts and reusable templates.
       
      Feel free to ask questions and any concerns  in this approach or any errors I might have made or overlooked.
      Thanks
       
       
       
    • By matsn0w
      Hey everyone, hope you're all doing well!
      I'm building my first ProcessWire website at the moment, which is of course a very good way to understand all of the possibilities ProcessWire has to offer. But that also means that I'm facing some troubles now and then, and so is the case right now.
      I made a template for a couple of pages, like the homepage, the contact page, etc. I am using Bootstrap 4.0 for the layout. 
      So here's the deal: I want to show an alert box on top of every page, warning the user that the website is still under construction. Of course, I can just include the code and add the fields I made for the alert into the template, but that means I have to do that for every page, which I obviously don't want. So I made a template with the code and fields for the alert. When I did this, I realised that I can create multiple alerts this way, so I made two pages, containing different alerts. (And converted the code into a foreach-loop in the template).
      But now my question; how can I include these pages in a different template? Can I make a field or something to insert a page or is this simply not possible? Or do I have to approach this in a different way?
      I hope I explained my problem clear!
      Thank you in advance,
      matsn0w
    • By pycode
      Hello PW, 
      discovered few days ago this awesome cms and now want to start a project on it, but need some help. I'm coming from the drupal side, which I kinda like, but it is not usable for smaller projects like I need now. I like it's way to build to content from the ground up, but it feels heavy, don't know why. PW feels really light and want to give it a try.
      Long story short, development it is a hobby for me, so everything I do is self-learned throw try & error, no programming skills yet. I want to learn JS now, and for that, want to translate a website to my native Romanian language so I can learn myself and others in the future. The site I'm talking about is www.learn.javascript.ru
      I want to build a similar structured site (please see the attached image):

      Home / Projects / About will be basic page template based, no problem with them.
      mysite.com/javascript/
      Starting Learn JavaScript will be a basic page template as well, I can make it statit, as it will contain some info and links to the Sections of the JS theory pages.
      mysite.com/javascript/section-name/
      By accessing a section page, I want to see again some description text and links of the attached unit pages to this section, so when I open any section it shows me all the attached unit pages to it. On the sidebar, I need to render links to all the sections, just that.
      Next is unit pages like mysite.com/javascript/section-name/unit-name/
      Here goes the units text, main content in other words, like a blog post. The key point is to have a dropdown and select the section page for it. For sidebar, I want to render the list with links for every headline from the unit page. Will do it by using Jumplinks Hanna Code, I believe it will do the job perfectly.
      Who can give me a hand with the templates?
      first /javascript/ page I can do as a basic page.
      next /javascript/section-name/ don't know. what fields should it contain for linking units?
      and last /javascript/section-name/unit-name/ again, what field needs to be used for linking? Page refference I believe?
      How I write it to templates?
      Would be gratefull for your help guys,
      Thank you
       
    • By rareyush
      I am trying too create a custom field where when user select to create a category 2 text area shows where one title of the category goes & another for some content.
      Like in a picture I want 2 text areas when I click on create new

    • By rareyush
      I created a template where I am rendering this php file where I am saving contact quires in a template and it is working fine in homepage.
      I used my same code in another page on a same project by creating another template and rendering another file but I am receiving this error again and again, I tried to figure out but it not working.
       
      <?php namespace ProcessWire; $form = $modules->get('FormTemplateProcessor');$form->template = $templates->get('contact'); // required $form->requiredFields = array('title', 'fullname','email_form', 'mobile', 'message'); //$form->email = 'your@email.com'; // optional, sends form as email $form->parent = $page('template=contact-form'); // optional, saves form as page $form->render(); // draw form or process submitted form ?> <?php echo $form->render(); ?>  
      error I am receiving 
       anyone can any solutions for it ?