Home/ Documentation/ Master Pinegrow/ Styling with CSS

Styling with CSS

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.

What is a CSS rule?

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.

Example of a CSS rule with selector and properties.

Active rules

Open the Style / Active panel.

“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.

Active tab in the Style panel.

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.

CSS List editor

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.

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 on the right side to show controls for hiding (commenting out) and deleting rule or property.

Position the mouse between properties. After a short time insertion line will show up. Click to insert new property at that place.

Click on the icon at the top of the Active panel to toggle the auto expanding of all rules listed in the Active tab.

Style attribute

“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:

Edit Style attribute and then save it as a new CSS rule.

Use Style attribute to quickly style the selected element using the Visual editor or CSS List editor. One you’re happy with the result, click on the 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.

Element states (pseudo selectors)

HTML elements can be displayed in a different states, beside the regular state: hovered with a mouse pointer, active when pressed down, focused and for links, visited.

Element pseudo states.

Each of this states can be targeted with CSS rules. That’s the most common with links and buttons.

For example, 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 states. Then the Active tab will also 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.

Ignored stylesheets

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.

Show hidden rules.

Use Stylesheets menu to hide any stylesheet. Right click on the stylesheet name and chose “Ignore in Active”.

Ignore rules in Active tab.

More about the Stylesheet menu later.

Visual CSS editor

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 and icons. Press ALT when clicking on the icon to collapse or expand all sections at once.

Visual CSS editor.

Numerical controls have sliders that let you change the value by dragging them up and down. You can also use UP and DOWN to increase/decrease by 1 and SHIFT + UP and SHIFT + DOWN to change the value by 10.

Controls like margins and padding have that makes all directional values the same.

Shadows, transitions and transforms can contain multiple definitions (for example, three different shadows). Use to add more items and to remove them.

Shadows, transforms and transitions.

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.

Pick up colors from the app screen.

Media queries

Click on the “Media query” button in the “Selector & Media query” section to display the query selector tool.

Show media query tool.

You can choose from one of the predifined queries that are generated based on the breakpoints values used on the page.

Select or compose a media query.

The or darker color on the query buttons indicates that the query is visible on the active page view (use 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.

What to do if the property you want to edit doesn’t have control in the Visual editor?

Simple. You have a couple of options:

  • Use CSS List editor in the top part of the Style panel, as described above. Click on the property value to edit it, or position the mouse between existing properties to insert a new one.
  • Select “Edit rule code” to edit the code of just that rule.
  • Go to code editor for that stylesheet and edit the property there. More about this later.

Creating new CSS rules

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.

Using the quick create tool

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:

  • Select the h1 heading element on the page. Enter a class selector into the Create rule input box
    1, for example, “.big”.

    Adding new CSS rule for the selected element.
  • Since the selected h1 doesn’t have the .big class assigned, Pinegrow will offer to add the class to the element
    2. Leave that check box on.
  • Click on Create button
    3. Because this is the first CSS rule that we are adding, Pinegrow will ask us to confirm which stylesheet should be selected as default for adding new CSS rules. Let’s choose pine.css. After we set the default stylesheet, all new rules created with the Create button will go there.

    Confirming the default stylesheet for new CSS rules.
  • The .big CSS rule is now created
    1 and displayed in the Visual editor. Use control selector (or scroll) to go down to the Text section. Play around with different controls.

    Using text controls in Visual editor.

Changing the default stylesheet for new rules

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”.

Choose the default stylesheet.

The default stylesheet is marked by next to its name.

Creating new rules with the Selector maker

Click on the … button to open the Selector maker tool.

Open the Selector maker.

Input the selector as text or click on various components of the selected element path to construct the selector:

Construct the selector.

Click on : to choose a pseudo selector:

Choose pseudo selectors.

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 right media query.

Chose the stylesheet where the new rule will be appended.

Click on the 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.

The Stylesheets menu

Click on the on the top of the Style panel to open the Stylesheets dropdown. There you can:

The Stylesheets dropdown menu.

“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:

  • marks the default stylesheet for the new CSS rules.
  • Use
    to hide and show the stylesheet on the page. This just hides all the stylesheet’s rules from the page, it doesn not remove the stylesheet from the page. Use it to quickly see what styling the stylesheet contributes to the page.
  • Click on the stylesheet name to open the stylesheet in the individual tab in the Style panel. More about this below.
  • Use the
    to edit the stylesheet in the code editor. See below for details.
  • Clicking on the
    displays the menu with further options:

    Stylesheets menu.
    • “Set as default for the new rules” selects the stylesheet as default destination for new CSS rules created in the Active tab.
    • “Convert to SCSS” and “Convert to SASS” will enable SASS and LESS live editing on the stylesheet. More details below.
    • “Ignore in Active” will hide rules from this stylesheet in the Active tab. This is useful for hidding CSS rules from various plugin and framework CSS stylesheets.
    • “Hide in page view” is the same as clicking on the
      .
    • “Reload” will reload the stylesheet from file. Useful if auto-reloading of externally changed files is disabled or if Pinegrow doesn’t automatically recognise the changed file.
  • Use
    to reorder stylesheets on the current page.

Editing individual stylesheets

Clicking on the name of the stylesheet in the Stylesheets menu, or on the next to the stylesheet’s name in the Active tab, opens the stylesheet in a separate tab of the Style panel.

Open a stylesheet in a separate tab.

Click on rules to select them in the Visual editor or click on the to expand the rules in the CSS List editor. Everything there is editable, including selectors, comments, property names and values.

Edit the stylesheet with the CSS List editor.

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:

  • Select the
    icon to only show active rules that affect the selected element.
  • Use
    to only show rules that are visible on the active page view, when using media queries to target specific view sizes.
  • will open the stylesheet in the code editor. Style panel and code editor are linked together. See the next chapter for details.

CSS code editor

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.

Edit the code of a single CSS rule

Hovering over the next to rule in the CSS List editor reveals the . Click on the icon to open a floating CSS code editor for that rule. Any changes are immediatelly applied to the edited CSS rule.

Edit the code of a single CSS rule.

Using the internal code editor

Clicking on 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.

Edit stylesheet code.

The stylesheet must be open in the code editor and this option has to be enabled in the code editor settings.

Code editor options related to CSS.

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, while cursor is focused in the code editor, to jump between multiple matches.

Using the external code editor

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.

Live-sync with Atom

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.

Using SASS and LESS

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, no 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.

Changing SASS variables.

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.

Working with existing SASS/LESS projects

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.

Select SASS/LESS source.

Converting a .css stylesheet to SASS/LESS

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.

Convert a CSS stylesheet to SASS or LESS.

Creating a new SASS/LESS stylesheet

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.

Editing SASS/LESS projects

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).

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. Internal or external code editor is much more suitable for that.

On the other hand, 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 the best. And you can always supplement your Pinegrow workflow with using an external code editor – or vice versa.

Managing stylesheets

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.

Manage stylesheets.

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.



Last updated on November 22, 2017 at 11:41 am


Print this article