Textpattern CMS

#13 2020-05-31 15:03:05

ThomasLeigh

Member

Registered: 2020-05-11

Posts: 24

Re: My new homepage (software, personal development, spiritual growth).

jakob wrote #323393:

You can change the order that elements appear in using a container/wrapper div set to flex-direction: column; and then give the items within in it a different order value.

I am in the process of re-writing the whole template, incorporating CSS column layout which I find appealing. I can’t manage to set the desired order for the elements, though. If You’d be willing to help with that, here is the code:

articles container:

	#mainContent
	{
		-webkit-columns: 385px 3;
		-moz-columns: 385px 3;
		columns: 385px 3;
		-webkit-column-gap: 0.5em;
		-moz-column-gap: 0.5em;
		column-gap: 0.5em;
		-webkit-flex-direction: column; 
		flex-direction: column;
	}

A single article is a span with display: block, and one particular span of those has order: 1; added via a CSS class. But it isn’t displayed as the first element within my column layout…

Would You be willing to help with that?

#14 2020-06-01 21:59:33

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,726

Website

Re: My new homepage (software, personal development, spiritual growth).

Hi Thomas,

Sorry, I had a day off today (it was a bank holiday). I probably contributed to some confusion by including too much in one post.

To my knowledge, CSS declarations from the display: flex; method are not interchangeable with those from css columns, so using css order: 1; within css columns won’t bring an article to the top.

If you want to feature some articles especially in Textpattern – i.e. make them appear first in the source order of the page – you could make them sticky and then use <txp:article status="sticky"><txp:article status="live"> (plus your other attributes) to output the sticky articles first and then the remaining live articles. The plugin smd_featured also offers a way of featuring certain articles, then outputting the rest later on the page.

What I meant in my post above was:

1. Use flexbox for block items you have on a page that you want to bring forward or push back. In your original layout, your tag cloud was lower down in your source code than the article blocks and you took it out of the flow with position:absolute which resulted in some overlap. You could have made a setup like this:

<main>
    <div class="article-container">
        <article> … </article>
        <article> … </article>
        <article> … </article>
        …
    <div>
    <div class="tag-cloud">
        <ul>
            <li class="tag"><a href="…">tag name</a></li>
            <li class="tag"><a href="…">tag name</a></li>
            <li class="tag"><a href="…">tag name</a></li>
            …
        </ul>
    </div>
</main>

and then done:

main {
    display: flex;
    flex-direction: column;
}
.tag-cloud {
    order: 1;
}
.article-container {
    order: 2;
}

and the tag cloud would appear above the article container and push it down.

But now that you’ve changed the order in your source code, that’s not an issue any more :-)

2. Using css columns for the stream of articles you used to have in separate left and right dis. In your current site, that might be something like:

#survey {
    column-count: 3;
    column-gap: 20px;
    column-fill: initial;
    column-width: 330px;
}
#survey > span {
    break-inside: avoid;
    page-break-inside: avoid;
    background: rgba(255,255,255,.2); /* not necessary: just to see what's happening */
    display: inline-block;
    margin-bottom: 20px;
}

That puts all your articles inside #survey into a three column layout that breaks to 2 columns and then 1 column when the columns become smaller than 330px each ass the viewport gets narrower.

---

TXP Builders – finely-crafted code, design and txp

#15 2020-06-02 12:39:12

ThomasLeigh

Member

Registered: 2020-05-11

Posts: 24

Re: My new homepage (software, personal development, spiritual growth).

jakob wrote #323470:

now that you’ve changed the order in your source code, that’s not an issue any more :-)

Yes, but it still helps me to understand the idea and apply in further cases, thank You for all Your points, thanks to which i.a., I have a clearer picture of CSS columns vs flex layout.

You’ve inspired me to re-write the template and now 1) it incorporates CSS columns and 2) tag cloud pushes other sections down when needed (so it won’t overlap them anymore).

#16 2020-06-05 21:04:54

ThomasLeigh

Member

Registered: 2020-05-11

Posts: 24

Re: My new homepage (software, personal development, spiritual growth).

First impressions are that it looks supposedly dark, gloomy… This was the last straw ;) I don’t want my site to be vampire-like :) . At least this has not been my intention.

Therefore I’ve decided to bring in more light… change the climate a little bit ;) :) . Enjoy :)