Simple questions on basic function -...

User 515049 Photo


Registered User
35 posts

I'm trying BB out coming from a different platform...

2 Simple things seem to elude me...

1) I'm used to being able to set a default font for the whole site (typically in the BODY style)...everything added then (paragraphs, H1's, etc) are in that font - you can create classes to override the default if needed. So far, I can't seem to figure out how to do this in BB?

2) Starting with a blank project, if I start in desktop view and add some styling to an element in a class, those styles do not cascade to lower breakpoints.Is this because BB is mobile first? So then if I do mobile first, and select the lowest breakpoint, add a class - it does cascade to higher breakpoints, but it doesn't cascade if I drag the slider to the left of the lowest breakpoint....what is going on?

I think I read somewhere you can use BB to do mobile first, or desktop first - is this a setting?

Any direction appreciated.
User 2699991 Photo


Registered User
4,799 posts
Online Now

Dave wrote:
I'm trying BB out coming from a different platform...

2 Simple things seem to elude me...

1) I'm used to being able to set a default font for the whole site (typically in the BODY style)...everything added then (paragraphs, H1's, etc) are in that font - you can create classes to override the default if needed. So far, I can't seem to figure out how to do this in BB?

2) Starting with a blank project, if I start in desktop view and add some styling to an element in a class, those styles do not cascade to lower breakpoints.Is this because BB is mobile first? So then if I do mobile first, and select the lowest breakpoint, add a class - it does cascade to higher breakpoints, but it doesn't cascade if I drag the slider to the left of the lowest breakpoint....what is going on?

I think I read somewhere you can use BB to do mobile first, or desktop first - is this a setting?

Any direction appreciated.


Hi Dave I don't use bootstrap myself but it is the same for bootstrap as it is for foundation

1/ for any element (size font/colour etc) to set it so it defaults to your choice,) select the element
go to design panel
go down to "apply to" section
open dropdown menu
select "type"
then set any style you want (at the side of the style a red border will show, this indicates style is set to type.
thereafter all elements you place will carry that style as default, If you then want to change you can add a new class, and do your apply your alternate style as you desire.

2/ You CANNOT build from desktop down it's mobile first only (well actually you can but then you encounter the problems as you have already discovered with breakpoints)
Hope that helps
edit
forgot to mention you should always work a little from the left of the lowest breakpoint for styling
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 515049 Photo


Registered User
35 posts

Thanks Wayan!
User 2739823 Photo


Registered User
1 post

Does the documentation provide verbal definitions for the classes? A brief verbal description that provides just a bit more information then the class title. Thanks.
User 379556 Photo


Registered User
1,535 posts

The lower part of the Inspector panel is entitled 'CSS(READ ONLY)'. When one has created a class for an element, and selects that element, the settings are shown in that CSS(READ ONLY) pane.

For example, I created two classes for a paragraph, one called 'ft' for the font chosen and one called sz for the font size. With the paragraph selected, the CSS(READ ONLY) pane shows

p.paragraph.ft {
font-family: Geneva, Tahoma, Verdana, sans-serif;
}

p.paragraph.ft.sz {
font-size: 24px;
}

Frank



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.