textpattern/textpattern-default-theme

Textpattern CMS default theme.

Textpattern CMS default theme

This project is the source for the default theme that ships as standard with Textpattern CMS. It is intended as a starting point for new users learning the Textpattern CMS for the first time or existing users that want to adapt their current code for modern standards, and is not intended as a finished production theme (though you could use it as such if you want to).

Features

1. The code is commented throughout with helpful information to help you learn some of the techniques and tags available within Textpattern.
2. Current best practices gathered from all over the web - in particular the HTML5 Boilerplate.
3. Mobile first structure.
4. Responsive CSS layout adapts to various device screen sizes, from 320px to over 1280px.
5. Adheres to the Schema.org microdata format.
6. Includes Sass version of CSS for rapid development.
7. No external images used at all.
8. Tested on a wide range of devices, browsers and operating systems.

Supported web browsers

• Chrome, Edge, Firefox, Safari and Opera the last two recent stable releases.
• Internet Explorer 11.
• Firefox ESR latest major point release.

Requirements

Building this repository requires:

• Node.js

Build setup

Installing required tools

The project uses Webpack to run tasks and Sass for CSS pre-processing. First make sure you have a recent version of Node.js installed. You can install Node.js using the installer or package manager.

Installing dependencies

After you have Node.js taken care of, you can install the project's dependencies. Navigate to the project's directory, and run the dependency manager:

$ cd textpattern-default-theme
$ npm install

npm installs Webpack and any necessary JavaScript packages.

Building

This repository hosts sources and needs to be built before it can be used. After you have installed all dependencies, you will be able to run the build:

$ npm run build

Pre-built version

We provide a pre-built version of the theme files within the dist directory in case you don't want to build it yourself.

Design patterns Textile/HTML reference page

The file src/dev-docs/design-patterns-page.textile is a reference you can use when authoring themes, it contains many of the HTML tags (and their equivalent Textile format where available) that should be accounted for in your designs. Paste this code directly into a Textpattern article.

License

Licensed under the GPLv2 license.

Some demo site content is licensed under Creative Commons BY-NC 3.0 (audio: "Moonlight Reprise" from "Irsen's Tale" by Kai Engel) and BY 3.0 (video: "Big Buck Bunny").

textpattern-default-theme's Issues

Add property clear:both to p tag or something else.

If useing big images(with different aligns) in paragraph, with little text. Text mixed together. For example:

!>images/1.jpg! Little text about 1

!<images/2.jpg! Little text about 2

!>images/3.jpg! Little text about 3

Checkboxes glitch on iOS

Recent code revisions have caused checkboxes to display incorrectly in iOS - investigate

Sass references unknown mixins, unable to build

Compass fails at:

Sass::SyntaxError on line 75 of sass/modules/_layout.scss: Undefined mixin 'gradient-linear'.

'nav ul' too wide on wide screens

Most of the elements are restricted to a maximum width while nav ul is not:

header,
.container,
footer {
....
    max-width: 1280px;
...
}

I think nav ul lacks a max-width attribute since one of the latest commits. On wide screens above 1422px (1280 / 90%) width nav ul extends too far.

Tranform popup_comments form for a new theme

Transform with new doctype, and css style.

archive and defaul page changes.

Changes for recent articles in <txp:article_custom section="articles" limit="12"> replace section="articles" for section="<txp:section />". And replace "articles/?month" with "<txp:section />/?month"
For showing Recent Articles from current section, not only from article section.

Media queries (via respond.js) not working in IE7/IE8

Although respond.js is included in the Modernizr build, it is not firing in old versions of Internet Explorer. Issue confirmed in both IE7 and IE8.

Investigating.

Non-core: Google Code Prettify background unscrollable

The CSS used to make the line numbering bar background (uses CSS border-shadow) is fixed and does not scroll with rest of blockcode when content is wider than container.

Images with centre align if firefox print preview.

Images with href not show, example !=images/1t.jpg(Description)!:images/1.jpg
If this image use in paragraph - paragraph not shown, with this image.

Include a compiled CSS file

From a user experience point of view, it'd be great to have a styles directory with a compiled default.txp (or similar) inside it, especially for people without the build tools installed locally.

See this thread: http://forum.textpattern.com/viewtopic.php?pid=280881#p280881

Split default.css.

TXP styles store not optimal and best practice link css from filesystem not useing txp css tags. CSS tags in txp usefull only for themes developer.
I think need split default.css to some parts. One media type - one part, or two parts default and print.
If you need test you own theme for some media type - you change in section page style css for need section or comment includes in default.css which contained only includes.

Add textile examples in repository.

On you site exist article "Text and HTML styling examples". Can you add this atricle in textile format as example in theme directory? IMHO, this is helpfull for new users.

Switch naming scheme to *.html instead of *.txp

Pages and forms have filenames ending .txp and I propose they should be renamed .html, per @gocom's advice here: http://forum.textpattern.com/viewtopic.php?pid=276862#p276862

I raised this because I'm making a public theme and I wish to follow policy where possible, and it follows that the default theme should follow the preferred naming convention.

Use article_image and excerpt.

In form article_listion or archive page use tags article_image anf excerpt.
Show article with image and excerpt with "read more" link.

Files without title.

Form files.file.txp don't check for file title. Shows only file description, without link to download.

Textile alignment classes

Textile supports block modifiers for horizontal alignment: !<foo.jpg!, !=foo.jpg!, !<>foo.jpg!, !>foo.jpg!. From version 2.3 on it uses four classes to indicate image alignment when it renders a HTML5 document:

• align-left
• align-center
• align-justify
• align-right

I think the theme should include style rules for those.

Localization and date formats

Because of localization setting specific date formats in Textpattern's date tags isn't advised. Not all date formats all valid in all languages. The only date format that provides somewhat consistently valid date is since, other formatting rules should come from Textpattern's preferences, and shouldn't be set in the tags.

For example following:

<txp:file_download_created format="%d %B %Y" />

Could be changed to:

<txp:file_download_created />

Which would provide dates formatted according user-configurable preferences, potentially producing valid date for any language which the hard-coded date might not.

Left-over comma when category1 isn't set

The default form outputs a unneeded extra comma when category2 is set, but category1 isn't.

This could potentially be fixed by surround the existing conditional with a condition that also checks category1 existence. I.e.

<txp:if_article_category number="1">
    <txp:if_article_category number="2">,</txp:if_article_category>
</txp:if_article_category>

Recent articles 'calendar chits' out of alignment (IE7)

Erroneous padding in calendar chit row, affects IE7 (possibly IE6/IE8 as well, but not IE9). Investigate fix.

Highlight active item in section list nav

I think it would be educative to highlight the "active" section in nav .section_list. You could either use the core active_class attribute, or, for the sake of accessibility, wrap the active menu item with a strong element,.

Use core tag for search input form

I'd like to eliminate all reasons for not using <txp:search_input /> in forms/search_input.misc.txp and go for a hand-rolled approach instead.

I see the missing role attribute to the form element. What else has to be addressed in core?

Need new video example URL

The video from my old company site in the design-patterns doc is no longer available - switch URL to another generic video.

Print style problem in ie.

Show navigation menu with caption(in firefox and chromium this menu not display).

default style used for a:visited{color: ...}

Text color for a:visited is rendered in the browser's default style. In my case this is a rather distracting violet hue.

I think we'd need something more fitting for both [role="main"]and role="complementary"].

Monthly archives in the sidebar don't work

The "calendar" in the default page template that groups recent articles by month doesn't actually work that well. It will list the publishing months of the latest 12 articles, visible months ranging from 12 to 1. The snippet I'm referring is this:

<!-- using if_different tag to populate list only with months that actually contain articles -->
         <txp:article_custom section="articles" limit="12">
            <txp:if_different>
              <li><a href="<txp:site_url />articles/?month=<txp:posted format="%Y-%m"/>"><span class="archive-year"><txp:posted format="%Y" /></span> <span class="archive-month"><txp:posted format="%b"/></span></a></li>
            </txp:if_different>
          </txp:article_custom>

If a site has 136 articles, posted across 32 month time spawn, and the current month has 12 articles, the sidebar will only list a single month. This is due to the limitactually applying to the query, instead of filtering visible items (which won't be realistically possible). Since the limit is 12 and the month has 12 articles, only one month will be visible (as all the 12 articles have the same month).

Now the obvious would be to increase the limit, but please do not do that - I would avoid that at all costs. Increasing the limit will eat a lot of more resources. The whole if_different listing uses quite a bit of resources, both memory and CPU cycles. For example if the limit is raised to "unlimited" (9999) and the site has 300 articles, Textpattern will first of all fetch 300 rows from the database. This alone takes a while and eats a lot memory. Then if_different will generate 300 MD5 hashes on each page request to filter results (yes, it uses hash comparisons). And that will cost a lot too, way too much actually.

Only feasible solution is to remove the thing completely, I suppose. You can't really increase the limit w/o crashing users' website and with a low limit it shows just a month or two unfortunately. Unless the whole idea is to show just month or two instead of last twelve or so.

Add favicon, apple-touch-icon.

Add textpattern logo as favicon.ico(with link rel in html) and apple-touch-icon in the root.

Develop install and compile strategy

• Modules need to be able to be compiled to main JavaScript + CSS. Sass is already taken care of.
• Download dependencies using Bower and Composer.
• Make possible to create a Textpattern installation from the theme, or to install the theme a Textpattern installation.
• Add task/step for compiling SQL insert statement array for Textpattern's setup tool. We want the process be as simple as possible. Altho, we could also update the setup tool to read templates from filesystem, of course.

Pubdate has been dropped from the HTML5 spec

The time tag pub date attributes has been remove from the HTML5 draft spec. Investigating alternatives, primarily those documented on schema.org.

4.6.0.alpha3

A few things:

a) There is no default.css nor ie8.css in the release for copy/pasting purposes.

b) The forms, as per our Themes discussions on the forum, should be type.form_name.txp
ie. default.article.txp -> article.default.txp

c) Would be nice to have your textiled demo article included in the download for testing purposes.
http://www.philwareham.co.uk/articles/text-and-html-styling-examples

d) hcg_themes is ready to go for easy importing of this theme.
http://txptag.com/plugins/hcg_themes

e) Would it be ok at this stage to create a downloadable theme to spread around?

f) What would it take to create a one column theme from this?

I enjoy your theme very much.

print stylesheet

Probably me, but I can't print out when print css is at end of default css. Cut and paste into new print style and it's OK.

I also have to change [role="main"] etc to id="main" for printing to work in IE7. Please check if it works OK with you.

Fixed lang="en" for IE6

Implying that IE6 knew no other languages besides English is a bit harsh (https://github.com/philwareham/txp-h5bp-theme/blob/2ad9ff4d784a28f2d0349be760787c597b525bae/pages/default.txp#L2)

<h1><txp:text item="navigation" /></h1>

This text(in navigation menu) always not display.

position:relative on anchor

a link has position:relative and this causes links to disappear in IE7 (don't know about other IE) Resizing the window brings them back. Why has anchor got position:relative anyway?

Search results body tag

Phil,

Default page, line 60, missing ">" at the end:

The demo site you have has issues when you do a search also.

Textpattern cannot use txp:authors tag in article list context

Issue outlined here: http://forum.textpattern.com/viewtopic.php?pid=258863

Awaiting core fix from Textpattern devs.

Drop Compass in favour of Bourbon

Compass is EOL, need to move the project to Bourbon instead.

Missing slash

In files.file.txp, the closing if_variable tag lacks a slash:

<!-- ...now use that description, otherwise omit that line -->
<txp:if_variable name="file_download_description" value="">

<txp:else />

<txp:file_download_description /><br>

</txp:if_variable>

Fetching resources from repositories considered harmful

Hi,

this theme fetches two JS resources from their respective repositories: html5.js and css3-mediaqueries.js.

This imposes a few performance penalties. Read on here: http://zoompf.com/blog/2012/05/html5shiv-and-serving-content-from-code-repositories

Both resources from googlecode.com are delivered with this HTTP reply header:

Cache-Control: public, max-age=180, i.e. 180 seconds cache life time.

I think you should reconsider the distribution method.

Cheers,

Robert

Files form never shows description

Files form uses double quotes when it should be using single quotes. Following should be changed;

<txp:variable name="file_download_description" value="<txp:file_download_description />" />

To:

<txp:variable name="file_download_description" value='<txp:file_download_description />' />

Disabled pagination button legibility

Great looking theme.

I am, however, having a little trouble making out the text on the disabled pagination buttons. Probably a combination of my monitor and tired, older eyes but those two buttons appear as a grey blobs to me.

Could the contrast be enhanced there perhaps?

Files form should use double quotes

Following conditional tag;

<txp:if_variable name="file_download_description" value=''>

Should be changed to;

<txp:if_variable name="file_download_description" value="">

Single quotes are only needed when the value contains Textpattern tags and needs to be parsed. Otherwise always use double quotes. Otherwise the parser is invoked.

XSS and search term

While there is no XSS vulnerability in the sense that one could inject code to the page, the <txp:search_term /> tags on the search_results form can still be used inject offensive content to the page. This content can be, for example, used to blacklist targeted website from search engine's index.

To prevent content injection and it's bad effects, one could either;

• Remove <txp:search_term />.
• Add noindex, nofollow robots directive to the search results page.

And to even take it further;

• Only display it when there are results found with the searched term.
• And (additionally) make the searched term (<txp:search_term />) only appear in the search form's input.

Need to create a standalone demo of the theme

I currently have a demo of this theme running on http://www.philwareham.co.uk along with its various extra options.

We really need to create a demo of it on the Textpattern official server, on a domain or subdomain relevant to the project, not my name. I'll contact Robert and see how he wants to handle that.

Comments list, erroneous padding in list items

Affects at least Firefox 4, 5 and 6 - possibly other browsers (but not webkit). Investigate.

Investigate canonical URLs for author and category lists

Background: http://forum.textpattern.com/viewtopic.php?pid=287448#p287448

As it stands right now, the canonical URL for author and category lists defaults to the same as <txp:site_url />, which is incorrect. I think this is a tag error rather than a theme-specific thing, but would be helpful to figure out an appropriate way to achieve canonicals on those two types of URL.

Addendum: this could turn into a bit of a worm can with the various URL schemas, so if it was to be quietly swept under the carpet I'd be happily complicit in its disappearance.

missing colon

Line 19 of _mixins.scss is missing a colon after image

image -o-linear-gradient($color-gradient-from, $color-gradient-to);

Protocol-less external scripts

Currently, external components like Google Fonts, HTML5Shiv are loaded with http. If Textpattern runs on https, this will cause an error due to protocols not matching (i.e., http loads on https site). A solution would be to switch to protocol-relative URLs. Both Google Fonts and CDNJS are https-aware, so there's no immediate problem on that front.

However. IE7 and IE8 will download the Google Fonts CSS twice (see http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/ for info).

SSL is becoming more widespread. IE7 and IE8 is becoming less widespread, so I move that the external resources be flipped to load in a protocol-relative fashion.

I'll take dibs if this is agreed.

Black border on first button in any form (IE6/IE7)

The much loved black border button bug that IE6/IE7 puts around the first CSS styled button it finds in any form. Investigate if there is any solution to this (apart from removing borders from buttons entirely for those two browsers).

PHP tags and Textpattern's security settings

Textpattern provides an option for turning PHP support off. If PHP is turned off, txp:php blocks in the theme will not work, and will generate notices when site is in debugging mode.

As the PHP snippets are basically only used for the copyright notices, the issue might be very simple to solve. Following options come to my mind;

• removed altogether. Note differences in local laws, rights.
• replaced with 2011- (year onwards).
• date could be removed, leaving only the symbol and site name.

Personally, I would just remove the copyright notice altogether, leaving in place a comment describing the element's usage. This would change following;

&#169;<txp:php>echo date('Y');</txp:php> <txp:site_name />

To;

<!-- You can add copyright here if you wish. &#169; 2012 <txp:site_name /> -->

Or using the year onwards;

&#169; 2011- <txp:site_name />

Or without year;

&#169; <txp:site_name />

Errore tag: <txp:meta_description />

Hi,
i download a 4.6 public theme - alpha3 copy and paste all the data in form, page and style, plus the design-patterns-page.textile and i get the error reported:

Error tag: <txp: meta_description /> -> Textpattern Warning: tag nonexistent during the parsing module "None" in the "TestPage"

I got this in every standard page (home, archive, about)

have a nice day

Stefano