-
Notifications
You must be signed in to change notification settings - Fork 3
/
README.html
78 lines (43 loc) · 4.5 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="all-grid:atextpatternthemeforimage-richwebsites">all-grid: a Textpattern theme for image-rich websites</h1>
<p><a href="https://all-grid.all-sorts.biz">Demonstration Site</a></p>
<p><!-- <picture>
<img width="480" alt="all-grid" src="https://all-grid.local/images/517.webp">
</picture> --></p>
<p>Mix Textpattern pages and forms with a library of css classes to generate varied layouts. all-grid is the template I use as a starting point in my website development.</p>
<h2 id="modulardesigncomponentlibrary">Modular Design Component Library</h2>
<p>Atomic Design principles guide the naming of css classes and Textpattern forms.</p>
<h2 id="incorporateimagesampvideoanywhichway">Incorporate Images & Video any which way</h2>
<p>Responsive images served automatically, flexible typography on a baseline grid. Article images are displayed in groups, others can be displayed inline with your body copy.</p>
<h2 id="toolstosimplifywebdevelopment">Tools to simplify Web Development</h2>
<p>Article edit and image edit links simplify workflow (if you’re logged into Textpattern’s admin interface); the public site includes article-edit links and image-edit links. Know which <em>Page</em> or <em>Form</em> is being used ; hover over an element on the page, and its <em>Form</em> or <em>Page</em> name is revealed — useful in large sites with a variety of <em>Forms</em> in use.</p>
<h2 id="installation">Installation</h2>
<p>Upload to your Textpattern Themes folder via ftp, and use the Textpattern Themes tab to load the theme from disk. Assign section(s) to all-grid.</p>
<p>For full functionality, <a href="http://github.com/jools-r/glz_custom_fields">glz_custom_fields</a> is required, with custom fields:</p>
<p><em>video</em></p>
<p>Uses shortcode m_embed.txp — eg. <code><txp::m_embed background='<txp:custom_field name="video" />' /></code> , <code><txp::m_embed social='<txp:custom_field name="video" />' /></code> , <code><txp::m_embed file='<txp:custom_field name="video" />' /></code> etc.</p>
<p><em>links_to_url</em></p>
<p>Used to override txp:permlink on list pages</p>
<p><em>details</em> configure as a textarea</p>
<p>Not used by allgrid, but useful if you use all_admin.scss and require another textarea for your project</p>
<h2 id="usage">Usage</h2>
<p>Experiment with article status: sticky, and override form. Do the same with the minimal <a href="https://github.com/gizulor/all-grid/blob/master/pages/default.txp">default page</a>, using classes derived from <a href="https://github.com/gizulor/all-grid/blob/master/atomic-docs/scss/6-layouts">layouts classes</a> and others.</p>
<p>Use <code><txp::figure id="1" lightbox class="a_image--inline large" captionclass="b_small" /></code> or <code><txp::o_inline_gallery id="1,2,3" /></code> in an article field (or in a <em>Page</em> or <em>Form</em>).</p>
<p>While it is possible to edit <em>styles/main.css</em> directly, it is preferable to edit the scss stubs in the AtomicDocs instead, and then use a utility to build your css (I use CodeKit).</p>
<h2 id="includes:">Includes:</h2>
<h3 id="slirhttps:github.mirror.nvdadr.comlencionislirimageresizingscript"><a href="https://github.com/lencioni/SLIR">SLIR</a> image resizing script</h3>
<p>All image requests are made by the <em>Form</em> <a href="https://github.com/gizulor/all-grid/blob/master/forms/misc/figure.txp">figure.txp</a>, which is configured to use SLIR by default (and run under php8). Code blocks can be hidden/un-hidden to use smd_thumbnail or display the original image instead.</p>
<h3 id="lazysizes.js">lazysizes.js</h3>
<p>Automatic responsive image sizes (and video autoplay when in view).</p>
<h3 id="atomicdocsstylelibrarytohelpmanagescss">atomicdocs style library to help manage scss</h3>
<p>A link to the library is available in the site footer <em>forms/o_footer.txp</em> if you’re logged in.</p>
<h3 id="grid-basedcssfortextpatternsadmin:writepanel">grid-based css for Textpattern’s Admin:Write panel</h3>
<p>See <a href="https://github.com/gizulor/all-grid/blob/master/all_admin.scss">all_admin.scss</a>. Place in your admin theme eg. <em>/textpattern/admin-themes/hive/assets/css/all_admin.css</em> and update Textpattern’s config.php accordingly.</p>
<p>all-grid is free and open source software, and requires Textpattern v4.80 and above.</p>
</body>
</html>