Understanding Type Class.... - Post...

User 219465 Photo


Registered User
324 posts

Can someone please help me understand Type Class without getting too in depth. Is Type Class a 'code' of sort than can do specific things depending on what is put in? So medium-horizontal will keep the menu bar horizontal at the medium break point?
Lets say in the Type Class I enter "menu bar text" then nothing will actually happen. BUT this will allow me to use "menu bar text" later somewhere else and it will pick up my font style and size?
User 122279 Photo


Senior Advisor
14,447 posts

Yes, you are right. BUT, if you write 'menu bar text' into the type class field, it will be seen as three class names. If you want to style your menu bar text, you need to write a class like 'menu-bar-text' or in some other way of binding the words together.
Be also aware that Bootstrap and Foundation have a series of predefined classes. In Foundation e.g. the class .menu given to a list container will remove the bullets from the list item containers and place them horizontally.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 219465 Photo


Registered User
324 posts

Thanks Inger. Sounds like I am not too far off from understanding lol. I was thinking about the - between the names and forgot to ask, so thanks for clearing that up. So, if I am messing around with a theme or a sample you previously posted, how can I tell in SDv3 if it is bootstrap or Foundation?
And I assume there is a list online of the codes for each one?
User 122279 Photo


Senior Advisor
14,447 posts

Foundation has blue break points and Bootstrap has purple ones. Also, in the design pane, where you add class names, you have the dropdown saying 'Foundation classes' or 'Bootstrap classes' respectively.

The websites for those two systems also have overviews of the classes and what they do.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 219465 Photo


Registered User
324 posts

Thanks again. Just trying to learn as much as I can. Honestly it is a bit overwhelming to get started, but not too bad when you get your feet wet. Im sure for those well versed in code it flows easy. I can see now that I should not have to learn a lot of code to make a site, just enough.
User 377716 Photo


Registered User
31 posts

Your last statement is true, Marc. But if you learn some code, by looking at the Inspector pane, knowing some code could help you spot errors that you cannot locate! Ask me how I know! :/
Sylvia Nickels
User 122279 Photo


Senior Advisor
14,447 posts

We've all been there, Sylvia! :lol:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2914916 Photo


Registered User
3 posts

I have an understanding of classes and how they can be used, but SD likes to hide things away and call them something else. I want to add a class to a div and I have spent an hour searching for the answer, pulled out hair, bitten all my nails off, and not any closer to figuring it out.

There should be a box that appears when I select an element that says 'these are the classes that are assigned to the element, edit at will'

Could it be "attributes"? Do I need to add a custom attribute to the element 'div' or something?

thanks!

Paul
User 2695940 Photo


Registered User
148 posts

Hi Paul,
You can find the classes in the Styles pane, the paint brush on top, and then under Type Class. You can type a new class name and then adjust its properties in the section below.

Hope that helps,
John
Attachments:
John Ferguson
Website Design and Development
www.jf1.co
User 2695940 Photo


Registered User
148 posts

I didn't mean to point at the Reset Properties box, look farther down on the menu Paul for more settings.
John Ferguson
Website Design and Development
www.jf1.co

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.