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
- can I do this for a f7 tag such as f7-list-item ? this did not work for me
- another qeustion, what is # stand for ? for example whats the # doing in this code ?
- Can I use any css in this css without defining in the componen ?
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 ?
thanks but w3school does not give direct answers to those quetions and I am not a css or front end expert
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
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
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 ?
In same way as for div element. Because f7 components are rendered to divs:
will be rendered to
So to change styles for f7-card, you need to write styles for div class=“card”
/* your custom styles */
Check the Typography classes that can help in many cases http://framework7.io/docs/typography.html
Thanks, before I searched for a title css and couldnt find, I see its under Styling -> Typography
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
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)