kikobeats / uno-zen

Minimalist and Elegant theme for Ghost. Demo @ https://kikobeats.com

Uno Zen for Ghost

Minimalist and Elegant theme for Ghost.

NOTE: Commercial version is available as Uno Urban.

• Uno Zen for Ghost
  • Introduction
    • Whats is new in 2.x
  • Installation
  • Update
    • Update your current version
    • Receive a mail notification when a new version is available
  • Development and Customization
  • Showcase
  • Related
  • License

---

Introduction

Uno Zen is a theme for Ghost inspired in Uno but providing a set of missing features in the original theme that are aligned with minimalist design style.

Whats is new in 2.x

• Totally rewritten using HTML5 and CSS3.
• Improved development workflow with gulp + browersync.
• Improved responsive and mobile experience.
• Improved SEO Content with meta tags.

Things that already existed:

• A good 404 page error.
• Search support.
• Multiaccount support.
• Loading progress state for each page.
• Estimation about the time of reading.

You can see a demo in my own blog. Also you can check the styleguide to view how it looks.

Installation

Please ensure that git and curl is installed on your machine.

Enter the theme folder (content/themes) of your Ghost installation and paste the following command:

$ curl -sSL http://git.io/vcIHr | sh

Alternative installation (to enable deployment to remote server):

Run the above command inside a temporary folder.

Delete the .git folder inside the uno-zen folder.

Copy and paste the uno-zen folder into the theme folder (content/themes).

This will add a static copy of the theme to your blog's git repository and allow changes to be tracked by git.

Setup

This theme needs a DOM selector library. The library is not provided by the theme. Instead, you need to paste one into the Blog Footer in the Code injection of your Ghost installation:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

You can use jQuery, but we recommend use Zepto, a lightweight jQuery alternative compatible with jQuery Plugins:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script>jQuery = Zepto</script>

It should look like this:

Update

One objective of this project is to adopt an effective policy to have the latest version of the theme all the time. We have divided this process into two steps:

Update your current version

Make sure you're in the uno-zen directory. Then run:

$ sh scripts/update.sh

That's all!

Receive a mail notification when a new version is available

Stay tuned for new releases with this IFTTT recipe:

Development and Customization

See in Documentation.

Showcase

.. and many, many more. See all!.

Related

• Uno Urban – Commercial version of Uno Zen.
• Bloggy – Brand theme for Ghost.

License

MIT © Kiko Beats

uno-zen's Issues

Add Previous/Next post links

It'd be great if there was Next/Previous post links as outlined here (http://themes.ghost.org/v0.6.0/docs/prev_next_post)

I'm happy to have a crack but my CSS skills are non-existent

Link/photo header in aside.hbs doesn't display

Not sure why this is happening, but the <a> link and <h1> header aren't displaying with Ghost 0.6.4.

Demo link is dead

http://blog.kikobeats.com/ shows Heroku error page

Add my blog into showcase

The URL of my blog is: http://www.evilsocket.net/

{{ghost_head}} not working on error page in Ghost 0.6.0

It seems Ghost 0.6.0 changed changed something that caused {{ghost_head}} to break in Ghost 0.6.0. I don't know yet if this a Ghost bug or a theme bug, but you are probably more into Ghost development than I am :)

Add my blog into showcase

The URL of my blog is: http://eduardohurtado.info

:)

integrates with zoom

https://github.com/fat/zoom.js

Add my blog into showcase

The URL of my blog is:

Add my blog into showcase

The URL of my blog is: http://www.iayon.com

Add my blog into showcase

The URL of my blog is: https://www.mooash.me/

Problem with aside and blog-button

In mobile version, when blog-button is pressed since blog page the aside style breaks.

Feature Request ?

Where do I put feature request ?

Text cut off in search panel

See the following screenshot of a new blog I just created.

The text in the search input is cut off on the top and bottom.

history.back() on title ?

Why would you have history.back() link on Title ?

disable animation when isn't landing page

• Disable animation in desktop mode.
• Disable transformation in mobile/tablet.
• Try to avoid using expand instead of collapse.

Social.hbs Question

I want to add a new social icon just like Sina Weibo, how can i add a new icon?

Theme installation issue

Hello, it's my first time installing a theme for Ghost and I have some trouble doing it. I am stuck with my page showing up like this and I am unable to fix it, so here I am asking for your help. Thanks!

Redesign phone/tablet version

• Refactor index view
• Refactor menu and button

__

As I promised in #26, these are the screenshots taken from my iPhone that shows the difference between the uno-zen and the default casper theme for mobile devices.

I really don't know if this is a matter of design or it is made on purpose, but I personally think that the default theme looks cleanner and more elegant on the phone. This is a shame cause I love the uno-zen theme and I want to help improving it, let me know what you think on this matter @Kikobeats ;-)

Navigation URLs being resolved only for root

Hi !

First of all, thanks a lot for the lovely template and the excellent work you've done with it.

Coming to the gist, I'm very noobish when it comes to JS, so please correct me if I'm doing something wrong. The issue is as follows:

Whatever URLs I add to the Navigation list, they're resolving to root URL

Ex:

(Assume root is example.com)

Say I'm adding,

About: example.com/about
Google: google.com

Now, on the home page, two buttons, About, Google are created. But both of them point only to example.com, not to their respective URLs.

I tried using {{log url}} within the {{for each}} blog in links.hbs. The logged output looks good. (/about, google.com).

So I'm wondering where it goes wrong.

Live site: gln.me

Broken link in readme.md

Broken link in the next phrase of readme.md:

Also you can check the _styleguide_ to view how it looks.

Two suggestions

First, while I was in blog, no matter I click the post or the navigation button, the navigation bar on left always do animate.

And the code in post is a little unpretty, would you like to use highlight.js

SFO

The URL of my blog is: http://my-sixfourone.rhcloud.com/

Add my blog into showcase

The URL of my blog is: http://pupboss.com

:)

Add my website into showcase

Hi,

Please add my website into showcase. URL: http://gln.me

Add my blog into showcase

The URL of my blog is: http://fei007.daoapp.io/

I try to use Grunt production but it tell me error

Fatal error: Unable to find local grunt.

I install grunt from npm package

(npm grunt-cli)

The purpose of google-analytics.hbs ?

Can you please explain google-analytics.hbs and its function and how to use it ?

All the links on blog are opening in new tab for blog hosted in subdirectory

I am hosting my blog in a subdirectory and all the links in sidebar are opening in new tab because of below code

if Uno.is 'device', 'desktop'
    $(document.links).filter ->
      @hostname != window.location.hostname
    .attr 'target', '_blank'

For now I have commented above code to get it work.

See the blog

Please, add my blog into showcase

Awesome work on the theme! :-)

The URL of my blog is: http://www.dinchamion.com

Add my blog into showcase

This theme is really awesome. I was ready to pay for a theme but this looks gorgeous and provides everything I need. I can help with improving the mobile layout if you need a hand, since I don't see myself switching away from it anytime soon.

My blog is at http://adrianperez.org, and I've done a poor job of showcasing this theme there, but I'm hoping you can mention it anyways ;) LOL

About SSL

Hi, there

My site have a SSL certificate, and normally there is a small lock in address field, like this

but now I use uno-zen, it only appear in 404 page, you can see it here

It can't appear in index and post page, and the theme I used before don't have this issue, I guess it may caused by the top progress bar.

What's more, when I reload the page, the lock will flash across and then disappear.

Would you like to tell me how to reappear the lock or how to cancel the top progress bar :)

How can I change the animation ?

Hello,
I want to change the animation You have used (you click on Blog and it slide back).
How do I change it?
Thanks,

Not able to make it work on heroku

I can see everything working perfect on local env. But when i push to heroku, its not working. Heroku removes everything in the uno-zen directory but casper is fine.

Any idea?

open outside website in new tab

add the follow code into uno.js

$(document.links).filter(function() {
    return this.hostname != window.location.hostname;
}).attr('target', '_blank');

and the links in post outside site would be opened in a new tab

How to change the social media links, name ?

Hi,
I have installed the Theme, the linkedin, twitter and all the links are yours, How do I change those ?

Thanks

Please add in wiki that how to change the name ?

Getting errors with fastclick & other plugins

I think those plugins are not correctly compiled into uno.js

Please check https://github.com/Kikobeats/uno-zen/blob/master/gulpfile.coffee#L37

I got it working when i changed that 'assets/vendors' to 'bower_components'.

Add my blog into showcase

The URL of my blog is: blog.h4t0n.com

Blog button doesn't work in phone/tablet version

Hosting on openshift

Hi

I've hosted Ghost on openshift and I've gotten my personal domain abc.com to point to openshift hostname abc-domain.rhcloud.com using a cname record as per openshift guidelines.

The problem is that when I go to abc.com/ghost or any other URL within the ghost admin app, my url stays as abc.com .. but when I use your theme and except from the homepage, I navigate to any other URL other than the homepage, such as abc.com/myBlog , the url changes to abc-domain.rhcloud.com/myBlog

Any idea why this could be happening?

Add my blog into showcase

The URL of my blog is: www.guovz.com

thanks! :)

emoji support

[Feature] RTL Support

Hi there.

RTL support is essential for bloggers how writes in Arabic, Farsi and Hebrew since these languages are written from Right to Left.

I can add a task to support RTL. The task could go in two directions:

1. Add an additional CSS file to do the RTL stuff. And anyone how wants RTL blog he can add this additional file to the head tag.
2. Add a task to flip the generated CSS file and generate a RTL CSS file. And anyone who wants RTL blog should edit the USS file URL in the head tag to call the RTL version.

I think the second options is better and easier to maintain. Twitter team have released a library to flip the CSS and it does support ignore \ replace declarations:

https://github.com/twitter/css-flip

The blog title did not load dynamicly

FYI

Add my blog into showcase

The URL of my blog is: http://jahlom.com/

Add my blog into showcase

The URL of my blog is: www.bradenericson.com

P.S. Love the theme :)

Add my blog into showcase

The URL of my blog is: www.flaviocorpa.com

Love Ghost, love the theme, any advise improving the mobile version?

I've seen that the default casper theme looked awesome in mobile devices, but not yet this theme :(

I may improve it in my fork, but have little time to spend.

Thanks in advance!

Typo titlename...

Hey was just letting you know in your social.hbs file from master:

<a target="blank" href="https://github.com/Kikobeats" title="Kikobeats on Twitter">

shouldn't the title be "Kikobeats on Github?

I replaced the cover.jpeg but still its not changing ?

Hi
I have replaced the cover.jpeg with another .jpeg which is of the same resolution 1920x1080 but it doesn't take effect even after restarting the ghost?

Thanks,

Twitter and linkedIn Icon doesn't show properly in Firefox ?

It works fine in Chrome but when you try it in Mozilla Firefox those two like