List indentation support

[support-inqbation]

Firs off, I'm talking about a new feature, not an actual issue.

CSS frameworks usually reset the default indentation of lists (UL, OL), so it would be great if Typeplate fixed that problem.

See attached screenshot to have an idea of what I'm talking about.

Thanks, guys, you're doing a excellent job with this initiative.

Regards,

Luis

[grayghostvisuals]

Can u tell me which frameworks you're referencing? Also curious what you think would be the best approach for us? CSS Class? Sass Mixin? Sass placeholder?

By default our lists look like this (w/out any reset)

Lists w/Normalize.css

[support-inqbation]

Hi,

I see, thanks for sharing your screenshot. I approached Typeplate to improve the presentation of my blog, implemented with Foundation Zurb (foundation.zurb.com), but I haven't tested it with other CSS frameworks. I took a look at Bootstrap and it seems they have the right lists indentation, but I think I've seen this problem on other frameworks, perhaps on Gumby (http://gumbyframework.com/).

So, by default, Typeplate has the right lists indentation, but it can potentially fix the problem caused by Foundation Zurb which is still a popular CSS framework.

In terms of the best approach, I'm not sure. Perhaps a class would be less intrusive? since UL tags are nowadays utilized to build layouts, you could impact the look and feel of a website by defining the properties for that tag.

Thank you,

Luis

[grayghostvisuals]

It's mainly their list-style-position (not just margin/padding) being altered as these frameworks you mention -or- at least the one in the screenshot appear to be setting the list style position outside.

What we can do is the following (@zakkain take a look at this too and tell me your thoughts)…

Sass

// ============================================================
// $List Style Variations
// ============================================================

%unordered {
    list-style-position: outside; 
    list-style-type: disc;
}

%unordered-inside {
    list-style-position: inside; 
    list-style-type: disc;
}

%ordered {
    list-style-position: outside; 
    list-style-type: decimal;
}

%ordered-inside {
    list-style-position: inside; 
    list-style-type: decimal;
}

%nobullet {
    list-style-type: none;
}

CSS

/* ============================================================
   $List Style Variations
   ============================================================ */

.unordered {
    list-style-position: outside; 
    list-style-type: disc;
}

.unordered-inside {
    list-style-position: inside; 
    list-style-type: disc;
}

.ordered {
    list-style-position: outside; 
    list-style-type: decimal;
}

.ordered-inside {
    list-style-position: inside; 
    list-style-type: decimal;
}

.nobullet {
    list-style-type: none;
}

[support-inqbation]

Hi,

I did a little research about conventions and default settings in lists, and found out that the default list-style-position is actually outside (correct me if I'm wrong, please).

I did a little experiment in my blog and set the list-style-position to inside but that didn't fix the problem. If you want you can take a look at this page of my blog: http://www.lucuella.com/2010/01/02/consejos-para-fotografia-de-retrato/

This is a screenshot:

I searched for that problem and found this: https://github.com/zurb/foundation/issues/1234 One guy recommended the following adjustment, which does the trick in my site when testing it with the code inspector: ul,ol { position: relative; left: 1em; }

So it seems that it's the "left" or "margin" attribute what is being reset on that framework. I double checked on Gumby framework (probably not that popular, other than it's a responsive framework compatible with the old 960 grid system) and this CSS adjustment will also fix the problem for it.

Kind regards,

Luis

[grayghostvisuals]

CSS frameworks usually reset the default indentation of lists (UL, OL), so it would be great if Typeplate fixed that problem.

The only way to fix this problem is by giving you some sort of class name you would have to attach to lists in the markup then giving you values for padding and margin. The other side of this is the order of asset fetching (zurb b4 typeplate vs. typeplate b4 zurb). If we styled lists with general selectors (i.e. ul {...} ) then we're at risk w/the order of asset fetching like I mentioned previously and one thing could override the other. That's how I see it so far.

[support-inqbation]

Yes, you are right. I agree that the adjustment should be done through a class, rather than modifying the tags properties. What I was showing is that list-style-position inside is probably not the best solution, but fixing the margin or left position of the bullets.

Kind regards,

Luis

[support-inqbation]

A final thought, perhaps that new class needs to specify the position outside, along with those other attributes, i.e.:

.unordered { list-style-position: outside; list-style-type: disc; position: relative; left: 1em; }