CSS Section

[videlais]

Break out the CSS page into its own section with details on the differences between what selector each included story format uses (<tw-story> for Harlowe, .passage, and .main for Snowman) for their content area and how to style links and other common selector issues.

This section should include or otherwise summarize the upcoming Twine 2 HTML Elements specification.

[mcdemarco]

Here is my idea of a revision of the page: https://github.com/mcdemarco/twine-cookbook/blob/css-section/terms/terms_css.md. I dropped mention of tw-storydata (and the Twine 2 HTML spec) because that element is normally not style-able. It's still kind of a big chunk of information that might be better distributed into one or two new recipes, plus better examples in the existing ones.

[videlais]

Great work, @mcdemarco! What do you think about splitting off the information about each story format into their own page? My thinking is that it would be easier to send people to the specific page to help them rather than one whole page.

My original thinking, and I'm totally open to changing this, was that the CSS information would be its own section (folder) with pages on each story format with the existing introduction you have already. Something like the following:

cookbook/
    css/
        introduction.md
        harlowe.md
        sugarcube.md
        snowman.md
        chapbook.md

Do you think that makes sense?

[mcdemarco]

It's not so clear where a section broken up by story format that is not a recipe fits into the cookbook. Some of the other recipes are pretty abstract and educational (e.g., Arrays), so maybe CSS would fit in as a recipe, too. I'd suggest calling it CSS Selectors. The introductory material could remain under the CSS term and be pointed back to in the recipe summaries.

To make the recipes "do" something (that's different from existing recipes and also requires less linking to them), the CSS recipe could, for example, put a colored border around the relevant sections.

I guess the recipe summary could still point to more CSS-related recipes, but that may be more confusing than helpful.

If you think it's a good idea I can try my hand at the recipeification.

[videlais]

Sorry for the confusion, @mcdemarco. I was thinking of "Sections" as GitBook loosely defines them within the Summary markdown file. I should have clarified that.

For example, the Terms "section" looks like this in the Summary file (which becomes the Table of Contents for the site).

# Terms

* Common Terms
    * [Twine](terms/terms_twine.md)
    * [Cookbook](terms/terms_cookbook.md)
    * [Stories](terms/terms_stories.md)
    * [Passages](terms/terms_passages.md)
    * [Variables](terms/terms_variables.md)
    * [Macros](terms/terms_macros.md)
    * [Story Formats](terms/terms_storyformats.md)
    * [CSS](terms/terms_css.md)
    * [JavaScript](terms/terms_javascript.md)
    * [Twee](terms/terms_twee.md)

A section, as I've been using it, is defined by a hash (which produces the horizontal rule) and then its files. A section has its own folder and its files are generally named based on the folder.

That's what I was suggesting: having a CSS section. That way, there could be an introduction on CSS concepts and the stuff you have divided up into page per story formats. Examples could then be put in the folder after that.

[mcdemarco]

I get the structure, though not how nestable it is. But it's still not so clear where a new CSS section would fit, i.e., where you're thinking of putting it in the existing hierarchy and how much sense it would make there as opposed to in a recipe. Besides being more understandable with live examples, I think it may get more attention as a recipe as well.

[videlais]

I think I see what you are writing. There would be an extended CSS terms page, as you have now, and then add in new examples following the current pattern of a folder with each story format?

[mcdemarco]

The CSS term got a bit shorter, since all the breakdown is in the recipe. I moved things around and implemented the Harlowe example in my fork, so you can see the idea here: https://github.com/mcdemarco/twine-cookbook/tree/css-section/cssselectors

[greyelf]

@mcdemarco I have noticed that (unlike @videlais and myself) you don't include a space between then Passage Name and the Passage Tags enclosure within the header lines of your Passage definitions. This adds an inconsistency between the recipe examples produced by you and others.

[mcdemarco]

@greyelf I copied my recipe from "CSS and Passage Tags" (aka passagetags/), and trimmed it of most but not all tags. If I'd typed it out by hand I would have included the space.