Few questions for css usage in f7

Questions
1

I’m trying to understand CSS mechanism of framework 7. I have few questions

lets say I have this class for p elements of html

p.thick 
{    
font-weight: bold;
}
  • can I do this for a f7 tag such as f7-list-item ? this did not work for me
f7-list-item.thick {
    font-weight: bold;
}
  • another qeustion, what is # stand for ? for example whats the # doing in this code ?
f7-list#navList
  • Can I use any css in this css without defining in the componen ?

https://github.com/framework7io/framework7/blob/master/dist/css/framework7.css

  • Another question, how can I define a css in all components in a f7 app ? not by defining scoped only ?

  • most css examples on the web deal with divs however I do not have simple divs but custom f7 tags in my components, how can I use those example for my components ? custom f7 tags are also divs ?

A more general question (sorry not related to f7), what is difference between a css class starts with . , start with # and start with nothing ?

as I understand we dont use dash when we want it to use a generic for all kind of same elements, is that only reason ?

2

You need w3school…

3

thanks but w3school does not give direct answers to those quetions and I am not a css or front end expert

4

Is this question not answered because it is too compplex or because it is too easy ?

none of those questions are answered on w3shool site , w3shool is not about that

5

Well, it is simple, but basically requires to describe all CSS and Vuejs basic principles which requires a lot of time. So you can start learning css here https://developer.mozilla.org/en-US/docs/Web/CSS and vue js principles at vuejs.org.

You will find all answers there. As for F7 components instead of divs, it’s because they are actually rendered to HTML elements that you can see in dev tools inspector. Also official F7 Vue documentation has examples sections that in many components also shows what it is rendered to

2 Likes
6

Thanks Vladimir for advices. Actually I know basic css and I think one doesnt have to learn all css, using it and making css classes are different things.

Beside that page does answer to my specific framework related questions

Of course I know they re rendered , everything is rendered in bundle, I am asking code side, how can I implement an example implemented on div for f7 component ?

I see there are special css’s in the framework, can I use anywhere without defining? for example I want to make something centered, is there speciall css class in the f7 framework
for that ? and I wonder whether if there is a list for all css, or I should inspect and find in framework7.css ?

meanhile this question, is /framework7.css implemented natively when I use the framework ?

7

In same way as for div element. Because f7 components are rendered to divs:

<f7-card>...</f7-card>

will be rendered to

<div class="card">...</div>

So to change styles for f7-card, you need to write styles for div class=“card”

.card {
  /* your custom styles */
}

Check the Typography classes that can help in many cases http://framework7.io/docs/typography.html

8

Thanks, before I searched for a title css and couldnt find, I see its under Styling -> Typography

1 Like
9

What happened to this link ? I cant access it anymore,

Sometime I need it, for example I just wanted to look for Linklarge in it

https://github.com/framework7io/framework7/blob/master/dist/css/framework7.css

10

It has moved under v2 branch https://github.com/framework7io/framework7/blob/v2/dist/css/framework7.css

11

Thanks :wink:

Vladimir I looking for something in f7 that will provide me put some component at bottom, I wanted to ask this directly to you before posting something spesific about it.

I Cant do it with with a css, I put some div with fixed height as a buffer, but problem is when I switch to mobile, down part is not seen. You can quickly see the issue with my app (for left-panel settings button, and for when go to call after start a call/chat from dialpad)