Minimum Theme for Textpattern

stephan · 2013-01-31 12:10:23

Sometimes all you want to do is write. No distractions, no overloaded sidebars. Minimum is a minimalist theme for your Textpattern site and it allows you to focus on what you want to tell the world. No comments, no need to worry about categories or sections. Just get in there and write. And make it look beautiful.

Minimum Theme

Also, you can fork it on Github if you plan on helping me fix bugs ;-)

Last edited by stephan (2013-01-31 12:36:02)

stephan · 2013-02-06 11:12:35

Thanks to a lot of contributions by Phil and a shiny new slider this theme is now at version 1.2. If anyone feels like it, maybe you have a nice idea on how to integrate a search box that would fit the theme.

jstubbs · 2013-02-06 13:01:14

Nice work Stephan! Thanks for sharing.

towndock · 2013-02-06 13:29:36

Sweet simplicity. It is great for Textpattern to have this theme available.

philwareham · 2013-02-06 14:26:01

@Stephan

I’ll do the search integration for you – probably next weekend sometime.

phiw13 · 2013-02-08 02:30:00

First a nitpick (or two…): the ‘More’ button / widget overlaps the text in header on the iPodTouch/iPhone. Also, after tapping that ‘More’ button, the contents of the pane is partly off-screen on narrow screen devices.

Then a question: what is the reason for preventing the user from scaling / zooming the page on handheld devices & tablets – specifically the maximum-scale=1, user-scalable=0 part below?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Not that there is much need to zoom the page to read, although I’ve seen users zooming in to make it easier to tap a link (e.g. in a list of links).

philwareham · 2013-02-08 08:16:36

Hi Philippe,

I fixed some issues with the slide out drawer yesterday but it still needs some work as you say. I’ll probably move the ‘more’ link to the top of page at a certain breakpoint. I’ll also sprinkle some aria attributes onto it.

Didn’t think it needed user zoom since the body text is already 18px. What do you think? Allow scaling?

phiw13 · 2013-02-08 08:49:42

philwareham wrote:

Didn’t think it needed user zoom since the body text is already 18px. What do you think? Allow scaling?

I don’t see any reason for preventing scaling…
I would have a hard time reading the text in the screenshot that the demo page includes, for example.
I actually see more and more sites preventing user scaling. I find that a worrying trend as I have never found a reason to prevent it. Some seem to use it to prevent iOS on iPhone to auto zoom in when filling in forms [1]. But most is just the designer exercising a wee bit too much control, in my book.

[1] Roger Johansson recently posted a nifty ‘workaround’ for that (I use it here).

philwareham · 2013-02-10 14:18:16

I’ve fixed the drawer so it’s responsive on smaller devices now. Also added WAI-ARIA support and some minor cosmetic tweaks. Should be in the GitHub repo soon.

stephan · 2013-02-10 19:40:22

1.3 officially released – with the drawer goodness available as of today :)
Thanks Phil!

phiw13 · 2013-02-12 13:38:20

The drawer is much better now :-).
There is still a smallish problem, namely that the drawer remains hidden for people with JS disabled (the coterie of Noscript extensions) – or if the js is blocked or fails to load for some reason, i.e corporate firewalls.

Perhaps adding a #drawer:target { display: block; } ? Oh, and then you have to change the href on the ‘more’ button (href="#drawer").

philwareham · 2013-02-12 14:12:11

Half the internet remains hidden for people with JavaScript turned off.

Seriously though, I’ll test out your example and see if it works.

PascalL · 2013-08-21 20:30:52

Hi Stephan, this is excellent.
I see a problem with headings: you use the Ovo font, which doesn’t have a bold variant, Firefox displays a faux bold because there’s a font-weight:bold in bootstrap stylesheet. Didn’t try other browsers, but I guess they do the same. You could easily set it back to “normal” in you stylesheet.

Pascal

P.S: well, you definitely have the same problem with italics, and also with the Average font which misses proper variants as well.

Last edited by PascalL (2013-08-21 20:42:37)

stephan · 2013-08-22 06:51:55

Thanks, I made an update to the github repo removing the bold, but no packaged zip file yet.
Feel free to send my pull requests for the other variants you mentioned – I currently have only limited time to work on txp themes :-(

Marcos · 2014-01-09 23:38:44

Hi.
I have installed the minimum theme, and all works well, but not google+ comments, that does not display.

This is the content of minimum_post block:

<article role="article" itemscope itemtype="http://schema.org/Article">
	<txp:if_individual_article>
		<h1 itemprop="name"><txp:title /></h1>
	<txp:else />
		<h1 itemprop="name"><txp:permlink><txp:title /></txp:permlink></h1>
	</txp:if_individual_article>
	<h4><time datetime="<txp:posted format="%d de %b, %Y" />" itemprop="datePublished"><txp:posted format="%d de %b, %Y" /></time></h4>
	<div class="body" itemprop="articleBody">
		<txp:body />
	</div>

</article>
<txp:if_individual_article>
<div class="g-comments"
data-href="<txp:permlink />"
data-width="1040"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>
</txp:if_individual_article>

And this is the content of minimum_javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>
<script>
	$(function () {
		// Google Code Prettify
		window.prettyPrint && prettyPrint();

		// initialise drawer
		var drawer = new hideShow('drawer-trigger');
	});

	// function hideShow() is the constructor for a hideShow widget
	function hideShow(id) {
		this.$id = $('#' + id);
		this.$region = $('#' + this.$id.attr('aria-controls'));
		this.toggleSpeed = 100;
		this.bindHandlers();
	}

	// function bindHandlers() is a member function to bind event handlers to the hideShow region
	hideShow.prototype.bindHandlers = function() {
		var thisObj = this;
		this.$id.click(function(e) {
			thisObj.toggleRegion();
			e.stopPropagation();
			return false;
		});
	}

	// function toggleRegion() is a member function to toggle the display of the hideShow region
	hideShow.prototype.toggleRegion = function() {
		var thisObj = this;

		// toggle the region
		this.$region.slideToggle(this.toggleSpeed, function() {
			// region is collapsed
			if ($(this).attr('aria-expanded') === 'false') { 
				// update the aria-expanded attribute of the region
				$(this).attr('aria-expanded', 'true');
				// update the button state
				thisObj.$id.attr('aria-pressed', 'true');
			}
			// region is expanded
			else {
				// update the aria-expanded attribute of the region
				$(this).attr('aria-expanded', 'false');
				// update the button state
				thisObj.$id.attr('aria-pressed', 'false');
			}
		});
	}
</script>
<script src="http://yauh.de/js/slimbox2.js"></script>
<script src="https://apis.google.com/js/plusone.js">

Can you see something that causes the malfunction?

{Edited to add syntax highlighting (the actually wrong but more eye-opening, JS). That way the faulty area (lacking closing tag) is exposed much better. – Uli}

Last edited by uli (2014-01-10 14:42:32)

Textpattern CMS

Textpattern CMS support forum

#1 2013-01-31 12:10:23

Minimum Theme for Textpattern

#2 2013-02-06 11:12:35

Re: Minimum Theme for Textpattern

#3 2013-02-06 13:01:14

Re: Minimum Theme for Textpattern

#4 2013-02-06 13:29:36

Re: Minimum Theme for Textpattern

#5 2013-02-06 14:26:01

Re: Minimum Theme for Textpattern

#6 2013-02-08 02:30:00

Re: Minimum Theme for Textpattern

#7 2013-02-08 08:16:36

Re: Minimum Theme for Textpattern

#8 2013-02-08 08:49:42

Re: Minimum Theme for Textpattern

#9 2013-02-10 14:18:16

Re: Minimum Theme for Textpattern

#10 2013-02-10 19:40:22

Re: Minimum Theme for Textpattern

#11 2013-02-12 13:38:20

Re: Minimum Theme for Textpattern

#12 2013-02-12 14:12:11

Re: Minimum Theme for Textpattern

#13 2013-08-21 20:30:52

Re: Minimum Theme for Textpattern

#14 2013-08-22 06:51:55

Re: Minimum Theme for Textpattern

#15 2014-01-09 23:38:44

Re: Minimum Theme for Textpattern

Board footer