Skelepico Theme - Fast & Responsive Pico CMS Theme using Skeleton CSS Framework

paulcarl

paulcarl

Joined
Mar 16, 2017
Messages
40
Likes
102
Degree
0
@CCarter got me on the Pico bandwagon a while ago and I've loved it but there isn't a lot of choice for themes yet. There's a bootstrap theme but I wanted something simpler to understand as someone (like myself) who isn't a developer. So I decided to take the easiest CSS framework, Skeleton, and combine it with Pico to form the creatively named theme: Skelepico. This post is coincidentally well timed with WordPress giving us more reasons to abandon ship.

If you have any suggestions/criticisms/corrections, no matter how minor, please tell me and I'll fix it asap.

Features include:
  • Easily enabled Disqus comments for blog posts (adds tons of requests/redirects, I get 88 instead of 100 on pingdom for those pages)
  • Google Analytics code already on (just put your ID in the config or delete it, I'm still on GA for now...)
  • Responsive sticky nav bar created purely with HTML/CSS. Hamburger mobile icon color would need to be changed with Photoshop or whatever you use (run it through TinyPNG before re-uploading).
  • Side Bar page and Blog Post page share the same side bar to include recent blog posts. Blog feed has unique bar.
  • Combined the Skeleton CSS files into 1 minimized file. Make your edits in the custom.css file (this file does include some necessary CSS for the navbar stuff).
Other than that it's pretty much just your standard Skeleton framework ready to be customized.

Here's the demo: https://skelepico.com/
Here's the download: https://github.com/paulcarl/skelepico-theme

Disclaimer: I do have a labeled referral link to Digital Ocean in the live demo. That's what I've been moving my sites to for VPS hosting.

Speed/Validation Screencaps
GzXWaE9.png

DtzEd1W.png

RyzzBk2.png

TPBkFLv.png
Edited because I just made the demo HTTPS​
 
Great!.. Looks really nice and clean, will use this for something.
 
Dude, this is great work, especially if it's your first one (please correct me if I'm off base, that was just what I gathered from your post). Clean, minimalist, has the basic functionality. Can't ask for more than that!

When creating the theme, did you run into any issues? If so, how did you deal with them? If not, did you find it pretty straight forward converting a static template into Twig code? Have you worked with quite a few projects in Pico, or only a small handful?
 
Great idea using skeleton CSS, your theme looks great. Will definitely give it a go.
 
turbin3 said:
Dude, this is great work, especially if it's your first one (please correct me if I'm off base, that was just what I gathered from your post). Clean, minimalist, has the basic functionality. Can't ask for more than that!

When creating the theme, did you run into any issues? If so, how did you deal with them? If not, did you find it pretty straight forward converting a static template into Twig code? Have you worked with quite a few projects in Pico, or only a small handful?
Click to expand...

Thank you! I've coded some shitty websites from scratch on WAMP just trying to learn different frameworks and trying to develop my own (this is when I figured out how to make a purely HTML/CSS responsive nav bar). I've made 4 sites using Pico so far, 3 of them using the Identity theme that I improved the load speed/schema for... still not sure how to share my improvements to it on GitHub yet... lol.

My biggest issues with making the theme was getting the HTML/CSS to work properly, specifically by putting the right divs in the right spots for all of the twig files. The Twig syntax is really simple to use. I don't fully understand it yet but it's easy to get answers in their documentation.

Jord said:
Great idea using skeleton CSS, your theme looks great. Will definitely give it a go.
Click to expand...

Thank you!
 
paulcarl said:
(this is when I figured out how to make a purely HTML/CSS responsive nav bar).
Click to expand...

Does this support nested submenus, either as dropdowns for desktop or accordions for mobile? I'm a big fan of the hidden checkbox method you use here, and I've used it in the past to create accordion-style mobile menus with pure CSS.

The one thing I haven't ever been able to figure out (without JS) is getting a mobile accordion menu to work where the accordion toggle menu item is also a link (ie the first touch on the menu item opens the accordion, and a subsequent touch opens the link). I'm not sure it's even possible with pure CSS right now. I haven't found a way to do it without `preventDefault()`.

Anyway, food for thought. And nice work on the theme!
 
Thank you, @mmm91492! The nav bar doesn't support any nested submenus. Haven't figured out a solution to that problem yet. I like that accordion idea for submenus, I'll have to play with that sometime.
 
Thanks for creating and sharing this theme @paulcarl I was looking for something like this to do some advertorial/aff type landers.
 
Aside from ignoring whitespace / tabs (legitimate savage), this is solid stuff man. Thanks for throwing it out there.
 
I like this.

Not sure how I missed it before.

I've been using Pico for YEARS. Grav and October are 2 others high on my list, but I still LOVE Pico as it was one of the first I used.
 
You must log in or register to reply here.
Back