Bulma: Unstyled lists

[jbrooksuk]

Can we have a ul class which will remove bullet points from lists?

[TroyAlford]

That seems a bit less semantic than one or more classes which use ul + a class name to create a specific effect.

Something like ul.menu.flyout or ul.tabs - which would both remove the bullet points, for example, but also create a specific type of component styling.

Is there a specific semantic type of component which this would fit? unstyled-list or something similar?

[jbrooksuk]

I was thinking ul.is-unstyled or similar?

[TroyAlford]

Sounds like it would be something like:

ul.is-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

[jbrooksuk]

Yeah.

[jgthms]

By default, lists are unstyled. I'm not sure what is needed here.

[jbrooksuk]

Ah it may be in the .content class.

[jgthms]

If you need a container that only adds a margin at the bottom, but without styling anything, use class="block".

[jbrooksuk]

Thanks!

[gdude2002]

If lists are unstyled by default, is there a class included to add bullets/numbering back?

[tompec]

@gdude2002 Yes you just need to put your <ul> into a <div class="content">.

[gdude2002]

Directly? What if I have it inside, eg, a message?

Or, wait, am I meant to put a content inside those as well?

[tompec]

<div class="content">
   <ul>
      <li></li>
   </ul>
</div>

More info here: http://bulma.io/documentation/elements/content/

[gdude2002]

Yeah, I knew that, I was just wondering whether it's appropriate to put within another container, eg:

<article class="message">
  <div class="message-header">
    <p>Hello World</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    <div class="content">
      <ul>
        <li>...</li>
      </ul>
    </div>
  </div>
</article>

[tompec]

yes!

You could even get rid of that extra div like that I guess

<article class="message">
  <div class="message-header">
    <p>Hello World</p>
    <button class="delete"></button>
  </div>
  <div class="message-body content">
    <ul>
      <li>...</li>
    </ul>
  </div>
</article>