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.
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:
And set position to relative.
Next, we create the rule for mybutton class (.mybutton selector) and create & assign it to the selected button:
In that CSS rule we set the width for the button:
…and set position to absolute with right and bottom distances for positioning. See, the button is just where we want it.
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:
We set width to auto, make the button higher and override positioning. We use media query tool to select devices smaller than 480px:
And here it is – our responsive button:
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:
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