CODEWITHSUNDEEP
csszurb-foundation
Ryan-Neal Mes
Ryan-Neal Mes

Reputation: 6263

Foundation 5 div heavy

I have started work on a new project and decided to give Foundation 5 a bash to see what it's like. The first thing I noticed in the documentation when creating forms with horizontal fields is they use a large number of divs for styling. So I tried an example below (second example I tried it without divs):

<!-- Example with extra divs -->
<div class="row">
  <div class="large-2 columns">
  <label>Contact</label>
  </div>
  <div class="large-6 columns left">
    <select></select>
  </div>
</div>

<!-- Example without extra divs -->
<div class="row">
  <label  class="large-2 columns">Contact</label>
  <select class="large-6 columns left"></select>
</div>

These both achieve the same thing with slightly different styling. I was wondering if anyone could explain why I would use the first one (follows foundation documentation) and not the other ... with less html! I am guessing it has something to do with how foundation is used and I am just not up to speed with it enough yet.

Thanks

Upvotes: 0

Views: 114

Answers (1)

Rahul Ajani
Rahul Ajani

Reputation: 192

Having <label> in <div> will give you lot of flexibility in styling. Defining a class for <label> will restrict your styling options. For a <div> you can define height, background color, border, width, background image, gradient fill, margins, padding, and lot more. Whereas giving <label> a class name would not let you do those styling. You could try it.

Basically, a <div> works as a box or container holding some content element in it, and that gives you lot of power and flexibility in styling. Whereas defining classes for content element doesn't give you that flexibility and power.

Upvotes: 2

Related Questions