Create style for "note" asides

[tachyondecay]

I've used the following markup in my port of the installation walkthrough:

<aside class="note">
### Love Git? So Do We

If you install Symphony via Git, it might be prudent to create a new branch for your website and keep the `master` branch tracking the Symphony repository. We have documentation on different workflows that use Git with Symphony to version-control your site.
</aside>

The idea is that these would turn into sidebar/call-out objects that contain useful tips, warnings, etc., but that are only tangential to the article in question (hence the use of aside).

Thanks to Factory’s super-sensible default styling, we can use the above markup right now, and everything looks fine. As we move forward, I’d like to style them to make them a bit bolder, pull them out of the content flow, etc.

I can probably get around to this at some point. I’m just making a note for myself here, and sharing my idea for the proposed markup (ultimately this sort of thing will end up in our style guide so we can stay consistent).

[bernardodiasc]

Something like this?

From http://symphonycms.github.io/factory/docs/layouts.xml

[tachyondecay]

Oh, nice. Just tried adding the content-annotation class, and it looks great. However, it hides the heading—I can see why it does that if all it does is "annotate the content," but in this particular use-case I feel like headings could be important information. So I think I’ll sub-class that and override the heading suppression.

[johnpuddephatt]

The content annotations included in Factory work well because the link between content and annotation is very clear (the line/arrow that forms the bottom edge of the annotation visually connects it to its content).

If annotations relating to text are to be pulled out of the flow of the document then I think it's really important that the relationship between content and annotation is still maintained, possibly as per the screenshot below (however I think it'd be good to follow @nilshoerrmann's advice about holding back on style changes we're a bit further along)

I also think asides positioned in the right-hand column would need to be kept very brief to avoid them visually competing with the main body of text – the example here would be better suited to being included inline because of its length.

Perhaps short 'tips' could appear in the right hand column, while warnings/alerts are kept within the flow of the article?

[tachyondecay]

Yeah, I’m not too crazy with how that worked out for longer notes. I think I’ll remove the content-annotation class and just keep the note class on it for now. Without any styling, it just appears as part of the content—and that’s fine for now. Like you say, we can handle styling later. But if we get in the habit of using this markup in the files, it will make styling easier later on.