Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update default class for ordered and unordered lists #91

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

nathanbiller
Copy link
Contributor

Because the original theme only had a front-page and no single pages the global class for lists was set to display none for the footer.

With the addition of single pages, standard markdown was setting UL and OL tags but nothing was being displayed. I'm no CSS expert, but I played around until I got something that seemed to look pretty good. And then I preserved the formatting by setting the "link-list" class that the footer used to keep the original settings.

Now using markdown files for ordered and unordered lists works as expected.

…set default CSS classes for ordered and unordered lists so that standard markdown yields expected results.
@StefMa
Copy link
Owner

StefMa commented Oct 11, 2019

Can you please post a screenshot which have changed exactly? Thanks

@todinov
Copy link

todinov commented Oct 11, 2019

I don't think that overriding the frontend framework's (Bulma) files is a good idea. This will make updating Bulma a nightmare. A better approach is to add any overrides in /assets/fresh/partials/, however I don't think this is neccessary as you can just put your lists inside of a 'content' element (https://bulma.io/documentation/elements/content/). This will style any lists, heading, etc. without adding any classes.

@nathanbiller
Copy link
Contributor Author

Sure @StefMa Here's what I'm trying to accomplish; on my ToS page which is just a single page of markdown text I want to show a bulleted list:

Screenshot 2019-10-11 14 22 49

Because this is set now: ul list-style: none This is what that looks like rendered:
Screenshot 2019-10-11 14 22 15

With the updated code, this is how that renders:
Screenshot 2019-10-11 14 19 16

@todinov You make a good point, thank you. I didn't think about upgrades. I can see that the content element might work, but is that the best way of handling default UL and OL that people have in markdown files? I would think we'd want to handle that in a pleasant way versus asking people to write html inside markdown unless I'm not understanding the proper way of doing that in the markdown file?

Let me know what you would recommend.

@todinov
Copy link

todinov commented Oct 12, 2019

@nathanbiller We are also using markdown, so I've overriden the single template and wrapped the content for single pages in order to apply styling like so:

<div class="content">{{ .Content }}</div>

However this is not a suitable change for the theme, as not everyone is using markdown, or at the very least you can have mixed content formats.
Fortunately we can just check for the content format and only wrap the markdown content. There isn't a really clean way to do it, but according to the hugo docs (https://gohugo.io/content-management/formats/) we just have to check for the markup param and file extension. So something like this should work:

{{- $isMarkdown := or (in (slice "markdown" "mmark") .Params.Markup) (in (slice "md" "mmark") .File.Ext) }}
<div {{ if $isMarkdown }} class="content" {{ end}}>
  {{ .Content }}
<div>

@StefMa Do you think this change makes sense for the theme?

@nathanbiller
Copy link
Contributor Author

Thanks for the writeup @todinov If it's not appropriate for the theme I'll just do an override for myself, no worries. I was just thinking my issue was likely a common one and that this would solve that issue for more people than just me. I didn't realize it wasn't common for people to use MD when using a single page template; I'm happy to learn more about what other alternatives there are because I thought that was the purpose of adding a single page to this theme. For me personally, I don't want to have to write HTML for single pages inside MD (or maybe a better explanation is I'd like to have other less-technical folks on my team be able to easily add content using MD files).

Because we're defining global UL to have no styling by default MD files aren't rendering bulleted lists. (If there was an easy way to specify the addition of a CSS class via front matter that could work too, but it seems more complicated than just defining the default.) It would seem like we would want to allow that to happen especially because the place where the theme is currently using unstyled ULs already has a specific class being applied to it and it would only take us explicitly styling that class the way it currently is to preserve what exists today but also giving less technical users an easy way to use bullets via Markdown by defining a default class with bullets.

I really liked your initial suggestion of building an override of the default Bulma in /assets/fresh/partials/ and that's the solution I'll likely go with for myself and just keep in out of the heme folder if you and @StefMa decide that extending that functionality by default doesn't make sense. I still have lots to learn, so thank you for taking the time to educate me :)

@StefMa StefMa force-pushed the master branch 11 times, most recently from 7c769b3 to 1907474 Compare February 28, 2023 13:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants