I want to see both my css file and my php file at the same time - one on my main screen and one on my secondary screen.
Can I do that in Wappler in any way, or should I use a separate text editor to edit the css files?
I there any reason you need to see the actual css file and the main file at the same time considering the styles panel is almost an exact replica of the css file?
However as far as I know Wappler works the same way as Espresso and a few other apps i have used for Web Dev and you can only see one tab at a time, so I do not think there is a way to do that, although as I say I think doing it that way is outdated and slower and more prone to issues.
Take this as an example
I have a blank page in Wappler, I add a Container > row > column > p
I click the styles panel, hit the + button and attach the blank Wappler css/style.css file
I click the p tag in App Structure and make a custom class of my choosing, lets say my-text, go to the styles panel
Firstly at a glance I can already see that it has bottom margin on it from the p tag style built into the framework as well as its inherited properties, which in your blank css file you would not see, you would just have to know from experience.
I want to alter it, inside my style.css file, so with the p tag selected i click the + button and the drop up has style.css, i click it, and it already adds the selector into the css for me of p.my-text, now i type in what i want such as font-size:60px; and bam its done, it shows in design view instantly, it saves the css for me.
I also did not have to write the syntax perfect, as i wrote fon… it allowed auto completion of the various font properties, and i did not have to manually add a colon or a semi colon.
If you did it the old manual way, you would still have to attach the style sheet, you would still have to give your p tag a custom class if you wanted, the only difference would be, you would need to know your selector to type it in.
And the result of it when looking through the css file vs the styles tab would be nothing
p.my-text {
font-size: 60px;
}
There are times where I still prefer the open stylesheet file vs the styles panel and that is more granular control over the selectors such as div.row div.col p.my-text which I can not seem to make it do inside the style panel, and media query relative styles which do not work like I would imagine from the styles panel.
I was kind of hoping if I had Tablet view selected and I added a style it would add it inside a media query for me, so I still need the style sheet open for that instance too.
Otherwise day to day i find the styles panel far faster to work in. When i have the rare occasion that i did not manage to find a prebuilt bootstrap class i could use without making my own style.
Just my opinion though.
Hey @psweb, thanks for your detailed response!
I’ve just had a play with the styles area, and I didn’t realise that it actually write and saves to your style file as you go along - that is really nice.
I will find a methodology which combines the two ways I think… I do also find it really useful to have the CSS file open on another screen so that in Wappler I have the design and the App Structure open… then I have all I need to see at my fingertips.
Thanks for your input!
Best wishes,
Antony.
1 Like