CSS "In file location with titles" when creating a style

Feature Request
1

Hi,
Correct me when I’m wrong, but at the moment when you edit some CSS in Pinegrow Bootstrap 4 it ends up at your style.css for example in the order that you have put it in. The result is a messy CSS with no real structure.
What about when you sent the CSS you made not only to the specified CSS file but also to a specific location with a title (that you can choose from a drop down panel) if it’s already created or that you can create on the spot and then it gets added to that location title panel…
The result will be structured CSS with clear titles like this. There are standard structures for CSS files so you could also create CSS structure files ready made to choose from.
Regards,
David

/------------------------------------
START TYPOGRAPHY
------------------------------------/
h1 {
font-size: 1.8em;
}
/* Nice golden fonts*/
h1, h2, h3, h4, h5, h6 { font-family: ‘Playfair Display’, serif; margin-top: 0px; }
.section-title h2 { font-size: 35px; line-height: 50px; }
/about-image/
/------------------------------------
END TYPOGRAPHY
------------------------------------/
/------------------------------------
START MAPS
------------------------------------/
#map {
height: 550px;
}
/------------------------------------
END MAPS
------------------------------------/
/------------------------------------
START PANELS LINKS
------------------------------------/
.button-holder {
position: relative;
}
.button-holder a {
position: absolute;
top:;
bottom:40px;
left:35%;
right: 35%;
z-index: 99;
}
/------------------------------------
END PANELS LINKS
------------------------------------/
/------------------------------------
START FORM
------------------------------------/
.snipallmedialab {
font-family: ‘Maven Pro’, sans-serif;
position: relative;
overflow: hidden;
margin-bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.9);
border-top: 5px solid #BF9B30;
border-bottom: 5px solid #BF9B30;
color: #9e9e9e;
text-align: center;
font-size: 16px;
}
.snipallmedialab *,
.snipallmedialab *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.snipallmedialab figcaption {
padding: 12% 10% 14%;
}

/------------------------------------
END FORM
------------------------------------/

2

Personally, I just create multiple CSS files for different things (eg. colors, typography, customized components like headers, footers, accordions, etc, and then when I’m finally finished I combine them all into one minimized CSS file. I don’t really care for titles in the live site’s CSS. They’re more for convenience when I’m building (though I’m sure my CSS would annoy another web person who had to make edits to one of the sites I’ve built.)

3 Likes
3

the fact that PG generates neutral code, free of proprietary footprints, is what drew me to PG in the first place. it encouraged me to learn enough about html and CSS to make my own website the way i wanted it.

i view organizing the structure of my CSS to be as individual as my website and i would not want to be shoehorned into any specific format or template.

that said, it would be handy if it were to recognize my own comment statements and offer to place new rules under a list of them when i hit ENTER, with the default being to place them at the end of style.css.

a comment manager feature would also be handy that allowed me to create new comments without having to resort to the hack that i currently use.

the hack is to create a new “rule” with the text of my comment, hit ENTER, and then go back and comment it out… that leaves it with curly braces at the end, but you can go back and edit it like text at that point and remove them braces and tidy it up a bit if needed.

1 Like
4

Yes that’s what I do now too, but imagine you can do the same on only one CSS file including comments.

Exactly my idea!

With the templates I mean custom made templates (by your self).

My idea is say you style a heading and create a heading class that instead of only having the choice to which CSS file it has to go you have the possibility to choose: Typography > Heading and automatically your new CSS stuff ends up at the right place. If you combine that with a perfect search system like in Sublime Text 3 (that I use) you save hours of time and always have a super structured CSS.

And for the users that don’t like it they don’t have to choose the location and can only choose the CSS file name.

5

@AllMediaLab If you want (more/better) control over the order where CSS rules are going to be placed in your CSS file. You can use the CSS/SASS/SCSS features to achive this. Which is supported in Pinegrow, and you already can use now!

A little guidance…

(NOTE: Make a backup of your CSS file before you start, if you are going to use an existing CSS file).

Go to the “CSS Panel”, and open the “Stylesheets Menu”. For the “CSS file” you want to use and convert, click the V icon to show the options (or right mouse click). You see a few options, choose “Convert to SCSS”.

master-style-stylesheets-submenu
master-style-stylesheets-submenu804×666 99 KB

Pinegrow now takes care and controls everything for you that’s needed to “watch/process/compile” this file, and a new .scss file (with the same name as your original source CSS file) is created. Open that newly created .scss file (code editor), and define with @import the structure with sections/categories you want/need.

  • The @import are filepaths.
  • The additional .scss files for these sections/categories will be created by PG for you (on file save).
  • If you want the comments to be placed in the final compiled CSS file, you need a leading /*! in front of the comment line (otherwise the comment line will be stripped/removed in the compile process and not placed in the final .css file).

Example structure

/*!=============================================================== */
/*!	SECTION - Base
/*!=============================================================== */
@import 'css-sections/_base';
/*!=============================================================== */
/*!	SECTION - Typography
/*!=============================================================== */
@import 'css-sections/_typography';
/*!=============================================================== */
/*!	SECTION - Navigation
/*!=============================================================== */
@import 'css-sections/_navigation';
/*!=============================================================== */
/*!	SECTION - Header
/*!=============================================================== */
@import 'css-sections/_header';
/*!=============================================================== */
/*!	SECTION - Footer
/*!=============================================================== */
@import 'css-sections/_footer';
/*!=============================================================== */
/*!	SECTION - Forms
/*!=============================================================== */
@import 'css-sections/_forms';
/*!=============================================================== */

Just a few random sections, you can offcourse choose the ones you prefer yourself to use, and in the order you want them to be. In the example I decided to place them all in a seperate directory “css-sections” (you can choose your own location or use it without a directory name if you want the .scss files in the same directory as your .css file). And I have the filenames begin with an “underscore”. The underscore is to make them different from the main file, and easier to identify them as a (sub) section file when you are going to create new rules.

When this is all done and configured, and Pinegrow have created the .scss files for these sections for you (on file save). You can start creating CSS rules and place them in the .scss “section” file you want. (You can always add more sections later, or change the order of the defined sections later).

Now when you want to create a new “CSS rule”, you select and choose the correspondig .scss file (section) where you want to place it. This works the same as you are used to choose a certain CSS file. Only now you select the .scss file you want to place the rule.

Pinegrow is taken care of everything and merge these seperate .scss sections files for you and compiles the .css file for you where all the rules are imported/placed/inserted combined together. When you have added new rules or made changes to a .scss file, on file save Pinegrow compiles the .css file again for you with the new changes.

This way you have divided your CSS file in sections, which are now automatically will be merged by Pinegrow into a combined CSS file with the order you have defined and setup.

IMPORTANT :
Be aware that from now on with changes/edits you need to make to your CSS rules. You make them in the .scss files, and NOT in the compiled and generated .css file. Because they will be get lost and overwritten when the .css file is compiled again by Pinegrow.

Hopefully it’s all clear and make sense to you, and is maybe an option that you can use to get more/better control over the structure of your CSS file contents. Good luck and have fun!

5 Likes
6

Thanks Marf,

Interesting approach to use it with regular CSS files. Never tried that before. All I do now with SASS is general stuff in Bootstrap 4 like: $enable-responsive-font-sizes: true; fonts and general colors.

Going to give it a try this afternoon! :smiley: