Styling - painting and positioning elements - is done with CSS properties and rules. Pinegrow offers a collection of powerful styling tools to suit different tasks and workflows.
This guide - and Pinegrow - assume that you're at least somewhat familiar with CSS. If not, Pinegrow is a great companion tool for learning about web development.
Open the Style panel.
First, let's define what we call a CSS rule.
Visual styling of page elements is done with CSS rules. Each rule has a selector that specifies what elements are affected by the rule and properties like color, font, etc. that define the visual style.
Open the Style / Active panel.
The "Active" tab of the Style panel shows the CSS rules that affect the currently selected element. If more elements are selected, the rules for the last selected element are shown.
Click on the rule to select it.
The selected rule is shown in the CSS Visual editor. There you can use visual controls edit rule's properties like width, color and so on.
Back in the active rules list, you can expand the rule to show and edit its properties right there in the list. We call this mode CSS List editor.
Click on the property name or value to edit them.
Click on the empty space right of the property value to select that rule and to jump to the Visual editor control for that property.
Hover over the repeat-Y_ICON on the right side to show controls for hiding (commenting out) and deleting a rule or property.
Position the mouse between properties. After a short time, an insertion line will show up. Click to insert a new property at that place.
Click on the down_ICON icon at the top of the Active panel to toggle the auto expanding of all rules listed in the Active tab.
The "Style attribute" rule is always listed at the top of the Active rules. It represents the style
attribute of the selected element. Its properties are not stored as a CSS rule in a stylesheet. Rather, they are listed in the style attribute in the HTML code of the element.
For example:
<h1 style="color:red>I'm red!</h1>
Although the style attribute is the quick and easy way of styling elements, using it is not recommended. Why? Because instead of using one CSS rule to tell the browser that all h1 elements should be red, you have to specify the color on each and every h1 element on your site. Now imagine that you have 20 pages and want to change the color to green.
But, Pinegrow knows a smart way of using the style attribute:
Use Style attribute to quickly style the selected element using the Visual editor or CSS List editor. Once you're happy with the result, click on the plus_square_ICON to save the style as a new CSS rule. Pinegrow will create the new CSS rule, transfer CSS properties from the style element to the rule and then clear the style attribute on the element.
HTML elements can be displayed in a different states, beside the regular state: active when pressed down, hovered with a mouse pointer, focused and for links, visited.
Each of this states can be targeted with CSS rules. That's most common with links and buttons.
For example, if a button has different color when it is hovered by a mouse and then when it is clicked.
Toggle the buttons for these pseudo states to force the selected element to be displayed in that state. The Active tab will also then show rules that target the states.
To create a new rule that targets the element in a pseudo state, simply append :active
, :hover
, :focus
or :visited
to the selector, for example button.primary:hover
.
By default, CSS rules from framework stylesheets are not shown in the Active tab because showing too many of those rules would clutter the list. To show them click on the "Show more" link at the bottom of the list.
Use the Stylesheets menu to hide any stylesheet. Right click on the stylesheet name and chose "Ignore in Active".
More about the Stylesheet menu later.
Controls in the Visual editor are organised into logical sections.
The section filter at the top of the editor lets you quickly see which sections have defined properties. Click on any icon in the filter to jump to that section.
Sections can be collapsed and expanded with down_ICON and right_ICON icons. Press ALT_KEY when clicking on the icon to collapse or expand all sections at once.
Numerical controls have sliders that let you change the value by dragging them up and down. You can also use UP_KEY and DOWN_KEY to increase/decrease by 1 and SHIFT+UP_KEY and SHIFT+DOWN_KEY to change the value by 10.
Controls like margins and padding have same_ICON that makes all directional values the same.
Shadows, transitions and transforms can contain multiple definitions (for example, three different shadows). Use plus_ICON to add more items and bin_ICON to remove them.
Controls that deal with colors have a color picker. When the color picker is open you can pick up any color from the Pinegrow window by moving the cursor over the area and then clicking to pick up the color of the pixel below the cursor.
Click on the "Media query" button in the "Selector & Media query" section to display the query selector tool.
You can choose from one of the predifined queries that are generated based on the breakpoints values used on the page.
The see_ICON or darker color on the query buttons indicates that the query is visible on the active page view (use Pin15_ICON above the page view to set the view as active).
If needed, you can also type the custom media query value in the input box.
Use "Page -> Manage breakpoints" to edit breakpoint values for the page.
Simple. You have a couple of options:
So far we were modifying an existing CSS rule. Let's see how we can create new CSS rules. As usually in Pinegrow, we have a couple of different options.
The quick create tools is located at the top of the Active tab. To create a new rule enter the selector in the input field and click on the Create button.
Here's an example:
You can change the default stylesheet to which new CSS rules are appended in the Stylesheets menu. Right-click on the stylesheet and select "Set as default for new rules".
The default stylesheet is marked by check_ICON next to its name.
Click on the ... button to open the Selector maker tool.
Input the selector as text or click on various components of the selected element path to construct the selector:
Click on : to choose a pseudo selector:
The selector maker will display information about how many elements on the page match the selector:
If the selector includes one or more classes, and the selected element doesn't have that classes, the tool will offer to assign the classes to all the selected elements:
If needed, select the correct media query.
Chose the stylesheet where the new rule will be appended.
Click on the 267_ICON in the tool header to select another element on the page for the selector path display.
Click on the Create button to create the rule. The new rule will be selected in the Active tab and displayed in the Visual editor.
Click on the Pin10_ICON on the top of the Style panel to open the Stylesheets dropdown. There you can:
The "Manage" button will open a dialog where you can attach / detach stylesheets from the page and create new stylesheets. It is described further down on this documentation page.
"Refresh" rescans stylesheets that are attached to the page. Use it when stylesheets change but the change is not automatically recognised by Pinegrow.
All stylesheets, including imported ones, that are attached to the page are listed:
Clicking on the name of the stylesheet in the Stylesheets menu, or on the align-left_ICON next to the stylesheet's name in the Active tab, opens the stylesheet in a separate tab of the Style panel.
Click on rules to select them in the Visual editor or click on the right_ICON to expand the rules in the CSS List editor. Everything there is editable, including selectors, comments, property names and values.
Position the mouse on the border between items to display the insertion line. Click to insert a new rule or property at that position.
The stylesheet tab has a couple of options displayed at the top:
Some web developers do their CSS editing purely in code and some prefer to use visual tools. With Pinegrow there is no need to choose just one way - you can do both at the same time.
Hovering over the repeat-Y_ICON next to rule in the CSS List editor reveals the KODA_ICON. Click on the icon to open a floating CSS code editor for that rule. Any changes are immediatelly applied to the edited CSS rule.
Clicking on KODA_ICON in Style panel opens the stylesheet in Pinegrow's internal code editor:
All changes that you do in code editor, Active tab, CSS List editor or in the Visual editor are immediatelly synced among all the tools.
In addition, selecting the CSS rule in the Style panel will highlight the rule in the code editor.
The stylesheet must be open in the code editor and this option has to be enabled in the code editor settings.
The matching of selected rules in the code editor is done by simple selector text search. While not perefct, this feature is still very useful to quickly navigate complex stylesheets. Use CMD+G_KEY, while cursor is focused in the code editor, to jump between multiple matches.
Pinegrow will ask before reloading the externally changed stylesheet if the stylesheet has unsaved changes in Pinegrow.
Pinegrow watches open files and reloads them when change made with another program is detected. Most code editors will also reload documents after they are saved in Pinegrow.
Pinegrow will ask before reloading the externally changed stylesheet if the stylesheet has unsaved changes in Pinegrow.
Using Pinegrow with Atom goes a step further - all edits are synced between the two apps without having to save them first. Check the documentation for details.
Pinegrow comes bundled with full-featured SASS and LESS compilers. You don't have to install anything to use SASS and LESS with Pinegrow. No node, gulps, grunts, yetis, npms, or json config files.
Not only that - SASS and LESS editing in Pinegrow is Live! Every change that you do, be it changing a variable or adding a new rule, is immediatelly reflected in the page view, without having to save changes first.
And when you save changes, Pinegrow also saves the compiled .css files. It's as simple as that.
NoteAuto-prefixer is used when Pinegrow compiles SASS and LESS files. No need to use different vendor specific properties like -webkit-box-shadow
. Just say box-shadow
.
If .scss / .less version of the file is located in the same folder as the .css stylesheet, Pinegrow will automatically discover it and load it (and any imported stylesheets) to the Style editor.
If source files are located in different location you have to tell Pinegrow where they are. To do that, open the Stylesheet manager with "Page -> Manage stylesheets" or with "Manage" button in the Stylesheets menu in the Style panel.
There, find the .css stylesheet in the list and click on the "Use SCSS/LESS" link. Locate the main SASS/LESS source file and click on the "Use" button. Pinegrow will load the source files and remember the setting.
If you have an existing .css stylesheet and want to start using SASS or LESS with it, simply use "Convert to SASS" or "Convert to LESS" right-click menu options in the Stylesheets menu.
To create a new main SASS/LESS stylesheet, use "Manage stylesheets" to add and attach a new .css stylesheet. Then convert it to SASS/LESS in the Stylesheets menu in the Style panel, as described above.
To create a new file that will be imported into an existing main SASS/LESS file, simply add the @import
statement to the main stylesheet and Pinegrow will take care of creating the new file.
The complexity of SASS and LESS projects spans from simple stylesheets with variables to complex projects, containing lots of variables, reusable mixins, nested code and so on (for example, Bootstrap).
A multitude of style editing tools in Pinegrow gives us the needed flexibility to chose the best approach for the task at hand.
Although the CSS List editor can handle nested statements it would be awkward to edit large Bootstrap source files there. The internal or an external code editor is much more suitable for that.
On the other hand, the CSS List editor is perfect for editing the variables of even large complex projects. Tweaks to the existing CSS rules can also easily be done there.
And the Visual editor is handy for editing individual rules, even if they use variables and expressions.
As with other Pinegrow use-cases, just try different tools that are available in Pinegrow and use the ones that suit you best. And you can always supplement your Pinegrow workflow using an external code editor - or vice versa.
And we're almost at the end of the Styling chapter. Let's take a closer look at the Stylesheets manager, that was mentioned a couple of times before.
NoteAlthough their names sound similar, "Stylesheets manager" and "Stylesheets menu" are two distinct dialogs. We'll probably integrate them into one in the future.
Open the Stylesheet manager with "Page -> Manage stylesheets" or with "Manage" button in the Stylesheets menu in the Style panel.
The Manage stylesheets dialog lists all stylesheets that are loaded in Pinegrow, even if they are not attached to the current page.
There, you can duplicate, rename, save or close individual stylesheets, as well as connect them with their SASS/LESS source files.
Use Attach and Detach links to add or remove the stylesheet from the current page. This operation adds or removes the <link>
statement in the <head>
of the page.
Below the list, we have a form for creating a new stylesheet or loading existing one from file or url.
Type the url of the stylesheet, absolute or relative to the current page, and click on the "Add" button.