Menu icon Foundation
Classes

I'm new to Foundation framework and to front end development. Prior to me trying to write any kind of code, I have learned the HTML and CSS fundamentals and obtained knowledge that might be considered more "advanced". Done codecademy exercises involving projects. Also taken a look at some source code of several pages to get a grasp of what a clean and professionally written code looks like. My problem is, that I have hard time assigning classes to my tags, which prevents me from being able to group, position and differentiate them in the process. I understand what are classes for, but not when or where to insert them. This becomes even more problematic when I try to work with the grid involving classes.

classeshtmlcsscodegrid

I'm new to Foundation framework and to front end development. Prior to me trying to write any kind of code, I have learned the HTML and CSS fundamentals and obtained knowledge that might be considered more "advanced". Done codecademy exercises involving projects. Also taken a look at some source code of several pages to get a grasp of what a clean and professionally written code looks like. My problem is, that I have hard time assigning classes to my tags, which prevents me from being able to group, position and differentiate them in the process. I understand what are classes for, but not when or where to insert them. This becomes even more problematic when I try to work with the grid involving classes.

Rafi Benkual almost 2 years ago

The Foundation classes are documented here: foundation.zurb.com/sites/docs/

There is also dedicated training on Foundation and how to use all of it here: https://zurb.com/university/foundation-intro

Walking In The Darkness almost 2 years ago

@Nikolay, class is an HTML attribute that can be assigned to any HTML element, classes are technically optional attributes so you do not have to add them to your code (I mean HTML without classes will validate) but of course in such a case your page will look almost like a text document with some limited styling added by your web browser - so you want to use them.

1. Where? - you place class attribute within opening tag of HTML element and assign some value (name of the class):

HTML paragraph element:

<p>Some text goes here...</p>

with added class:

<p class="red-text">Some text goes here...</p>

of course at that moment visually you will not see any change, you need to create some rules for this specific class (that's what are they used for!), so in CSS file:

.red-text {
    color: red;
}

now, you have rule created and class assigned to HTML element, this will work. The same class may be assigned to more than one element on the page:

<p class="red-text">This is a paragraph with red text</p>

<p>This paragraph has default text color</p>

<h1 class="red-text">This header will also be red</h1>

Of course if you use some CSS Framework, like e.g. Foundation, some rules for specific classes have already been created for you and you can just add them to your HTML elements and this wil work (without writing CSS rules), like for example this:

<p class="stat">This text will be enlarged because that's what built-in Foundation .stat class does</p>

…but nothing stops you from overwritting rules pre-defined by Foundation if you only want:

.stat {
    font-size: 0.8em;
}

you can add more than one class to the same HTML element (separated by space):

<p class="red-text stat">As you can expect this paragraph has large AND red text</p>

 

 

 

Walking In The Darkness almost 2 years ago

oh, and:

2. When? Any time you need to modify how something looks. You may create basic rules for all paragraphs in your code without using classes, just assigning rules to HTML element:

p {
  color: black;
  font-size: 1em;
}

and then, if you want some of your paragraphs to look different -> give them a class and create rules for this class:

.red-text {
   color: red;
}

.large-text {
   font-size: 2em;
}

and now you can use them in your HTML:

<p>This paragraph is black and has font size of 1em</p>
<p class="red-text">This paragraph is red and has font size of 1em</p>
<p class="large-text">This paragraph is black and has font size of 2em</p>
<p class="red-text large-text">This paragraph is red and has font size of 2em</p>