[Resolved] Suggestion Simple CSS

[Peter]

A suggestion for Simple CSS plugin:

Same like in the preview of the customizer three buttons for desktop, tablet and mobile.
In tablet and mobile one can put all CSS @media screen and (max-width: ???px).

Would help a lot to keep an overview and not getting one custom CSS editor with hundreds of lines.

[Paul]

One issue I can see with that is if you wanted to use custom media query sizes.

If you are adding lots of custom CSS you might want to consider placing it in a child theme.

https://docs.generatepress.com/article/using-child-theme/

[Peter]

Paul,

yes, I know. The suggestion is more about working with a better overview and more comfortably.
Even in the style.css of a child theme I would need to scroll through hundreds of lines.
If it is on the backend possible to add CSS separately according to the devices, then one might get 3 short lists instead of one long one.
I want my CSS file with the responsive settings at the end packed in

@media screen and (max-width: ???px) {
CSS custom;
}
Right now I see myself scrolling back and forth. It would be more convenient to use a click on a device, for which I want to add CSS.

[Paul]

I see what you mean now. To be honest, when I first replied to your post I thought maybe you was adding all the CSS to the additional CSS section – I’d completely forgotten about Tom’s CSS plugin 🙂

[Peter]

:-), Tom’s Simple CSS plugin is brilliant. Lightweight and easy to use – same like all his other plugins.
The suggestion is only about adding more convenience.

[Tom]

That would require the pugin to write media queries for you based on screen size. It would likely get pretty messy, really quickly. Interesting idea though, I’ll keep it in mind 🙂

[Peter]

Probably I was describing it too complicated (I am not a native English speaker)
I suggested only separate editors for each device

Example

I add custom CSS
#generate-section-3.generate-sections-container {
background-color: #f9f9f9;
border-right: 1px solid black ;
margin-left: 49px;
margin-right: 49px;
line-height:1.0em;
}

then there are buttons for tablet and phone, where I can click the tablet and add there
#generate-section-3.generate-sections-container {
margin-left: 0px;
margin-right: 29px;
}

The tablet button simply means wrapping all custom CSS oF the tablet editor in

@media screen and (max-width: 720px) {

}

and the whole custom CSS is generated as

#generate-section-3.generate-sections-container {
background-color: #f9f9f9;
border-right: 1px solid black ;
margin-left: 49px;
margin-right: 49px;
}

@media screen and (max-width: 720px) {
#generate-section-3.generate-sections-container {
margin-left: 0px;
margin-right: 29px;
}
}

That’s all.

I am suggesting that only for matters of convenience. I want to get the websites adapted to mobile devices and realized, that with adding the media queries the list gets longer and longer. It would be very convenient, if one can handle the media queries in own editors.

[Tom]

Ahhh I understand – that’s a very interesting idea. Thanks!

[David]

If it’s wish list time then I would like to see:
1. The backend editor cache the positon you were last at. Every Save dumps me back to the top of the code.
2. The customiser have a modal version of the backend editor.
3. Milestone map maybe using Comments for faster scrolling to and making sections such as the media queries suggested above.
4. Backend editor Browser Syncing? Or is that pushing it =)

Currently i use the browser finder to skip up and down code.

[Lyle]

Tom – I know you have been extremely busy of late will all the great updates to GP and GPP, but seeing as how we are on about Simple CSS here, I’ll “nag” you again 🙂

Please update the listing in the WP plugin repo, especially the “Tested up to” item. I have had more than one person (at both YYC WordCamp and YYC WP Meetup Group) express concern about this when I have recommended the plugin 🙂

Cheers!
Lyle

[Tom]

Thanks for the suggestions, guys 🙂

Lyle – will do my best, SVN is a pain and takes way longer than it should. I’ll see if I can get that done this week.

[Author]

Posts