Foundation Theme - How Do I Make An Unordered List With No Bullets?

(Varied Team Members) #1

Hello Foundation Community… Wanting to format some text as a unordered list with no bullets. Tried using the paragraph stack, highlighting the text and selecting the list but the code is still a p tag only. I have the full Foundation Theme suite, looked for a list stack but all I see is side navigation and inline list stacks. I can select the text and if I apply the list using bullets then then RW will output the code with the proper ul and li tags but the p tag is still there.

Could someone nudge me in the right direction as I must be missing something simple, new to the RW workflow?

Kind Regards,

(Brad Halstead) #2


Dave, there is no Foundations or Big White duck stacks that do what you are asking, using a Paragraph is improper

Might I suggest using the Stacks Text or HTML stack

Stacks Text stack… select content, will not let you make an unordered or ordered list unless a bullet is included even though none is an option, no P tag generated.

Stacks HTML stack… will allow you define your own css and unordered/ordered lists with no P tag generated.

thats the only 2 ways I can think of doing it… the first you HAVE to define a bullet, the second you HAVE to define the css so no bullets appear

Others may have further suggestions as I do not work with Foundations very often.


(Andrew Tavernor) #3

@TeamSDA Putting block level elements inside a <p> tag produces invalid HTML anyway and the browser will break the <ul> out of the <p> . While RW users are used to putting lists into styled text and general stacks, a paragraph stack is there to produce an HTML paragraph and thus strict rules apply as they do anywhere that a <p>.....</p> construct is used.

@Turtle’s suggestion of and HTML stack is the way to go if you don’t want to use a third party list stack to do the job.

There is a little more discussion on the subject here:

(Brad Halstead) #4

Awesome @tav, don’t hold back Andrew, tell us how you truly feel about invalid markup lol :wink: I’m in the same camp as you though so just sharing a little fun your way :slightly_smiling:


(Andrew Tavernor) #5

I was making a serious point but I thought that was the only way to get most people to read it. Code issues put off most weavers, hard cash always gets their attention. :smile:

As you may of guessed, there have been no winners.

(Varied Team Members) #6

Hello Guys… Not sure where the improper markup discussion is coming from as that was actually my point, don’t see a way to properly layout and publish a list from within the Foundation Theme. But always helpful to point those things out, solid input is always appreciated and valued.

So back to the point and thanks for your suggestions Brad. First want to confirm that both of the Stacks 3 stacks will play nicely with Foundation Theme?

I gave both approaches a go and I see how they could be used, perhaps I could do the Stacks 3 Text stack approach and use CSS to remove the bullets as well?

What I am trying to accomplish is something quite simple from a markup and styling standpoint. The need is to add a few links in a footer and an unordered list is a great way to do that. Kind of surprised there is not a list stack with the foundation suite. I realize I could use the Site Side Nav stack but it imposes some formatting that would have to be reversed out as well and further I also have needs where the list items are not links.

If this needs to be baked up by hand then Brad’s suggestion may be the simplest. As for doing this through another stack could you make a recommendation that will play nicely with the Foundation Theme?

Kind Regards,

(Andrew Tavernor) #7

@TeamSDA I was agreeing with you about the markup issue as I know you come from a hand coding background.

The foundation stacks reflect the components in the Zurb framework. There is no specific list tool (as you would probably expect) and hence no stack other than the side nav.

@willwood’s Lister stack has been used to great effect by many Foundation users recently and although I have no personal experience of it, that would be my recommendation based on user feedback. Introducing the new Lister stack

If you want to hand code it in an HTML stack then thats fine too (or using a stacks text stack) as neither will impose the troublesome <p> tags.

(Brad Halstead) #8


We weren’t making fun of you at all, please don’t take it that way as you were asking the right questions for the right reasons!!! You’re old school - hand coder so you know the drawbacks of block element nesting!

… Reminiscing about having to do stuff actually by the DOM with 100% valid code by hand because WYSIWYG editors SUCKED back then and if people reading this are middle-old age like us then they know what it’s like to code a page using nothing but a text editor (when knowledge of every tag/ attribute/ placement was a must because the browser didn’t fix things for you)…

Yes, you could use css to hide the bullets in the text stack, but the best way truly is to hand code it in html. You can then make it a snippet or a partial for further use elsewhere in the site or if a snippet, use one other projects…

You could use the Linked Lists Stack in Foundation Pack X (I don’t know which pack it comes in) but it makes a horizontal list of links using UL/LI tags with no bullets… I don’t know much about the stack itself, but seems to me it should come with the option of vertical or horizontal output for list of links

Have a go with that and see if that does anything for you…


(Varied Team Members) #9

Thank You Andrew and Brad… I appreciate the input as there is a great deal I don’t know and I most certainly don’t consider myself an expert developer. I do try to be knowledgeable in the areas I am working so I can engage in meaningful discussions with those I am working with. So again thank you for your input, it is truly appreciated.

I value all the recommendations made here and will do some experimentation to find the best way to work with lists.

Kind Regards,

(Varied Team Members) #10

Hello Brad… Was researching something else over at ZURB’s Foundation docs and stumbled upon a .no-bullet class. As this is part of the built in classes all I had to do was use your stack recommendation and add the class to my code, dead simple. Here is an example of the code in the HTML Stack, thanks again.

<ul class="no-bullet">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>

Kind Regards,

(Gary) #11

I can highly recomend @willwood 's Lister. It allows a multitude of bullet options including warehoused image and has px positioning in all directions. You can even use Markup so you don’t have to go near the list tool.

Here are a couple of demos of Lister with all of the bullet points being editable using EasyCMS and also inside a slider positioned over an iPad image. Lister demo