[comment]The Zen template is an empty and just displays the page content [/comment] [template]zen[/template] [comment]Adding a HTML HEAD region to the Zen template and select Foundation by Zurb for CSS and JS.[/comment] [region=htmlhead] [css]foundation[/css] [js]foundation[/js] [/region] <div class="row"> <div class="columns small-12 medium-12 large-12 align-center"><h1>Welcome to Hubzilla!</h1></div> <div class="row"> <div class="columns small-12 large-6"><img src="https://elsmussols.net/photo/0961a8c3-76a0-4cda-9d1c-93c056324a62-2.png" alt="0961a8c3-76a0-4cda-9d1c-93c056324a62-2.png" /></div> <div class="columns small-12 large-6 callout primary"><h2>Be you - anywhere</h2> <p> Your online identity is even more nomadic than you are. You want to be automatically recognized as you by others? You got it. You want to be in two or more places at once? No problem, just clone. You want to move from one place to another? It is your data, of course data portability is built-in.</p> <h2>Stay connected - anywhere</h2> <p>Bring your friends! You want to stay connected? You got it. You want to stay connected with your friends if you move? Take them with you.</p> <h2>Easy edit</h2> <p>Write as long as you want. Format using Markdown, BBcode, HTML or plain text.</p> </div> </div> <div class="row"> <div class="columns small-12 large-6"><h2>Create web pages in Hubzilla</h2><p>As of January 19 2021, version 6.6.3 of Foundation 6 supports three page grids, Float, Flex and XY.</p><p>Hubzilla uses Foundation 6 version 6.2.3, so we can use either the Float or the Flex grid, and Flex is recommended. As the name suggest, Flex is based on Flexbox.</p></div> <div class="columns small-12 large-6"><p>Cascading Style Sheets grids like Foundation 6 allow designers to easily and flexibly position content on the page for a range of device screen sizes. A responsive design flexibly adapts to the size of the screen. All Foundation 6 grids are mobile first, i.e. you can layout your page's content so it will look good on a mobile phone first, and if the user visits the same page with a larger screen, say a tablet or PC, the content will be reflowed to look good at those larger screen sizes.</p><p>Foundation 6 divides the viewport into twelve columns by default. What does that mean? To grant visual structure to content, designers mentally divide the viewing area into equally sized columns. Based on the content to be layed out, they then decide how many column are needed, usually with some empty space between the columns - called gutters - so content will not bump into other content. If you have seen a printed cartoon strip with three panels, the entire strip is the viewport of the comic, each panel is a column, and the white space between each panel is gutter.</p></div> </div> <div class="row"> <div class="columns small-12 large-12"> <h2>Markdown</h2> <p>Markdown is a quick way to format text as you write.</p> <h2>BBCode</h2> <p>BBCode is a quick way to format text which gets formatted into sanetized HTML. When you select BBCode, you can use special markup which allows control structures and Zot specific tags.</p> <h2>HTML</h2> <p>Regular HTML markup, only allow this if you own the site or trust the member.</p> <h2>Regular text</h2> <p>Regular text without formatting.</p></div> </div> <div class="row callout secondary"> <div class="columns small-12 medium-12 large-12"><h2>Examples of the Flex grid</h2></div> <div class="columns small-12 medium-12 large-6"><p>This row has a class of callout and secondary, which delinates the row and adds the grey colour. Inside the row is this DIV you are reading now, which has a class of "columns" and sizing classes of "small-12 medium-12 large-6", meaning this DIV on small and medium screens will use all twelve columns of the viewport, while on a large screen it will use only six columns of the viewport. If on a large screen the next column in the row uses six columns or less, then the two columns are shown on the same row in the viewport. If on a small screen, the next column will be stacked, by default under this column, but you can specify the stack order.</p></div> <div class="columns small-12 medium-12 large-12"><p>This DIV has a class columns without any sizing class. It simply expands to the available space in the browser viewport.</p></div> <div class="columns small-12 medium-12 large-9 callout warning shrink"><p>This columns DIV shrinks to fit this content</p></div> </div> <div class="row callout secondary"> <div class="columns small-12 medium-12 large-12">Welcome to a web page using the Foundation 6 front-end framework created in Hubzilla's web page app.</div> </div></div> [region]$content[/region]