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
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 anderson
      Hi all,
      I'm a new to website building. Learned some CRASH course of js,jquery,php. Then I found CMS. Still learning around forum, youtube....
      Anyway, please help me with some beginer questions:
      1, About template - please correct me if I understand wrong : every page should be (or recommended) built on a template. So if in total I'll have 10 pages, 2 of them have same layout, I'll need 9 templates.  And, what fields a page includes, is not defined in page, but defined in the template that page uses. 
      2,  Where to see what modules I've installed? is it in "Modules - Site"? 
      3, I installed "PageTable Extended", then what?  As in a youtube tutorial, it should appear in Setup tab, but it doesn't.  What's in there: templates,fields,logs,comments. (I installed "Uikit 3 site_blog profile".)
      4, I did a search in Processwire website for the famous "repeater matrix" module, and can not find it, there's a Repeater, as well as a Matrix. Is it not a module?
      5, I watched this youtube tuts: https://www.youtube.com/watch?v=IHqnLQy9R1A
      Anybody familiar with this tuts please help: 
      After he analysed a target webpage layout he wanted to mimic, he created some fields, some template, then based on those he created a page and input some "content" in there, then clicked "view", it's just some text. So, here comes my question, he copied a folder "assets" (subfolders are: css,fonts,js,img) over, then the page have the appearance/layout he wanted to mimic. Where does that assets folder come from?
      Appreciate any help.
    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
    • By louisstephens
      I have done a bit of searching, but I can not seem to find an actual answer. I have a list of services as child pages under "Services". I can output the services just fine, but I cant wrap my head around how to group them "alphabetically" like:
      Services A - Service "A" 1 - Service "A" 2 - Service "A" 3 B - Service "B" 1 - Service "B" 2 - Service "B" 3 C - Service "C" 1 - Service "C" 2 - Service "C" 3 Has anyone achieved this type of functionality before?
    • By Falk
      Hi!
      I have lots of blogposts in my pagetree and I want the pagelabel to include the value of the post’s datefield (only the year).
      Adding date | title in the template settings results in something like…
      1536012000 | my blogpost title
      Is it possible to convert the timestamp to a readable date?
       
    • By mjut
      Hello!
      I am trying to get some extra css-file into my admin templates. I managed to modify my admin.php to this:
      <?php namespace ProcessWire; require($config->paths->adminTemplates . 'controller.php'); echo "<link rel='stylesheet' type='text/css' href='" . $config->urls->templates . "css/admin.css'>"; By doing so, the css <link> is added to the very end of each parsed admin-html. (right AFTER the closing </body> tag.)
      That causes some trouble. e.g. the page tree is not displaying any more. Although, other pages are working - like the edit form of a page.
      My question: is there a correct way of adding my extra css to the admin area?
      Thanks for you help!
      Stephan