Looking for Pinegrow V4 Documentation?

Visit our new documentation site

  • Features
  • Documentation
  • Forum
  • Blog
  • Download
Back

What Pinegrow is and isn’t

Categories: Editing

How to decide if Pinegrow is for you?

Pinegrow IS NOT a tool where you draw the website and then let the app generate and export the HTML and CSS code for you.

Rather, Pinegrow IS a HTML and CSS editor that lets you work with HTML elements and CSS rules visually and through code.

Pinegrow IS NOT the right choice for you if your prefer not to deal with HTML and CSS concepts.

Pinegrow IS the right choice for you if:

  • you are (or want to become) familiar with HTML and CSS
  • you prefer to work with HTML and CSS directly and have complete control over your code
  • need flexibility that code generators can’t provide
  • you need a visual editor that works alongside other web development tools
  • need to open and save HTML and CSS files, without importing or exporting anything.

In Pinegrow you build layout and styling just like you would code a website by hand – using HTML and CSS.

To illustrate how Pinegrow works, let’s take a look at the example of moving a button in the page header.

button1

How would we do that in HTML and CSS, regardless of which tool we use?

Simple – we would create CSS rules for positioning the button.

Let’s do that. First, we have to make the button move relative to the containing section, not to the page (default behaviour). In CSS we do that by setting position property to relative or absolute.

In Pinegrow we select the section, add a new CSS rule for class header (.header selector) and click on Create & Assign:

button2

And set position to relative.

button3

Next, we create the rule for mybutton class (.mybutton selector) and create & assign it to the selected button:

button4

In that CSS rule we set the width for the button:

button5

…and set position to absolute with right and bottom distances for positioning. See, the button is just where we want it.

button6

We can go further and make the button easier to press on mobile devices. We switch to mobile view and create another rule for the button class mybutton. We’ll use that with media queries to target only the mobile device width:

button7

We set width to auto, make the button higher and override positioning. We use media query tool to select devices smaller than 480px:

button9

And here it is – our responsive button:

button10

Pinegrow can do lots more. If we’re working with Bootstrap for example, we can select the button and set its various Bootstrap properties in the PROP panel:

button11

Pinegrow lets you visually work with the full range of Bootstrap and Foundation components, as well as with any HTML document.

And you can always switch to code view with live page update.

Pinegrow also has power features like projects, master pages, smart components and reusable libraries.

To recap: Pinegrow doesn’t add any code, it doesn’t generate anything. Instead it lets you work with CSS and HTML visually and provides visual tools for working with Bootstrap, Foundation, plain HTML, WordPress and responsive sites in general.

 



Last updated on November 17, 2015 at 1:03 pm


Print this article

Find this document useful ? Share it !
Back to Top
  • Recent Articles

    • How to change your Pinegrow subscription plan
    • How-to Renew your license to continue getting Pinegrow updates & Major upgrades
    • How to Cancel your Pinegrow subscription
    • Color the Boxes
    • Pinegrow + Atom = The Perfect IDE for the Web
    • About charging sales tax on Pinegrow purchases
    • How to Try Pinegrow for free for 7 days ?
    • Use the right jQuery version in your WordPress themes projects with Bootstrap V3.3.x
    • Countdown to Pinegrow 3.0 – A New Feature Presented Every Week
    • Experience Feedback: The relaunch of Mr. Bürli
  • Beginner’s Guides

    • Beginner’s Guides
    • Getting started with Pinegrow
    • Getting Started with Pinegrow WP
  • Editing

    • Layout
    • Elements
    • Text
    • Code
    • Javascript
    • PHP, ASP, ERB
    • Editing with Atom Editor
    • Tips & Tricks
    • More …
  • Pro Features

    • Features Overview
    • Projects
    • Master Pages
    • Components
    • Editable areas
    • Libraries
    • Partials
    • CMS
  • Blocks

    • Components
    • Editable areas
    • Build your own Blocks
    • Bootstrap Blocks
    • Bootstrap Blocks for WP
  • Helpdesk

    • What Pinegrow is and isn’t
    • Troubleshooting
    • Support Forum
    • Release notes
    • Download older versions
    • Renew your License
    • Change your subscription plan
    • Cancel your Subscription
    • Contact Us
Pinegrow Web Editor © Humane technologies LLC, Poklukarjeva 22, 1000 Ljubljana, Slovenia