The following is a short summary of my current webdesign process when I work on a WordPress theme with Pinegrow .
Building the layout
When I have a clear vision about the work I wish to accomplish (templates, layouts, structure, which WordPress features will be used in the project) I start to design with the default Bootstrap components in Pinegrow.
The result is one (or more) static document with the default Bootstrap CSS look BUT ready for further customization.
Styling the layout
Pinegrow is not an all-or-nothing web development solution. I can use it for those tasks where it can save me lots of time and effort while using other tools for tasks more suited to them.
I use 4 external applications for the job:
Mamp Pro (€39.00) for my local webserver
Atom (Free) for the SASS/CSS editing
I use SASS to write my CSS rules because that very popular CSS preprocessor is packed with many useful features and also because – its my personal experience – I feel that SASS documents are easier to manage than standard CSS files in the long run.
Atom is a really sleek editor with a lot of useful extensions. The application is “GIT ready” so I can have a full view of my project modifications and even use it to commit my changes.
Use case 1: From Pinegrow, if I need a new CSS property, I switch to Atom editor, create the property in my style.scss file (SASS).
Then I save the file which is then automatically compiled with Codekit (see below) and style.css is generated at the right location.
I switch back to Pinegrow, the style.css has been updated (Pinegrow detects changes done in external programs) so I can pick and apply this new property to my element..
Use case 2: I want to update an existing CSS property (change a background color or a padding for example) so I switch to Atom editor, I modify the corresponding rule and I save the file which is then automatically compiled with Codekit (see below) and the style.css is automatically updated.
When I switch back to Pinegrow, style.css has been automatically reloaded, the CSS is modified and changes are visible on the element.
For both use cases, because of the Automatic Quick Export on file change from external apps included in Pinegrow since version 2.8, my WordPress theme is updated and thanks to BrowserSync (see below), I can see the modifications in real time!
SASS is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.
Codekit (€39.00) for the SASS compilation job
Codekit is an application for the Mac. “Basically”, it’s a very sleek frontend to the most popular CSS, JS (and more) preprocessors compilers and it is really easy to setup.
Codekit monitors in real time my changes on the SASS document and automatically compile it to a standard CSS file at the correct location.
Browser specific prefixes (Autoprefixer) are added on CSS properties, minified output, source map are possible and a lot more.
Codekit Alternatives for Windows:
BrowserSync for the automatic live display of the changes in the browser
BrowserSync is the final link in the chain. It monitors all the changes in my WordPress THEME folder and automagically live reloads the display in as much browsers as I want/need. (desktop (mac, pc, linux), mobiles, tablets …)
Here are some of the major features:
- Browsers are automatically updated as you change HTML, CSS, images and other project files.
- I can test my website against a slower connection. Even when my devices are connected to wifi.
- Scroll, click, refresh and form actions are mirrored between browsers while I test.
- I can records my test URLs so I can push them back out to all devices with a single click.
- and more ….
PRO TIP: From Pinegrow version 2.8, WordPress Theme Quick Export happens also when HTML and CSS files are modified outside of Pinegrow.
It’s really convenient when I work with external applications and so, thanks to BrowserSync, I can see my HTML and CSS changes in real time on my local WordPress site, with real content, instead of a static page.
Adding WordPress actions
When the layout and the styling is done, I can focus on the WordPress development and from Pinegrow, I add the corresponding actions to my elements.
For that part, a good knowledge of WordPress features is key and the WordPress CODEX is my main documentation.
Of course, most of the time, I need to go back to styling and layout modifications to handle specific cases, but because the biggest part of the job is already done, the mission is quite straightforward.
If you want more details about my process, feel free to join the Pinegrow Slack community and ask your questions there.
You can also send an email to firstname.lastname@example.org
If you use external applications in your webdesign workflow with Pinegrow, send us a quick note about your experience, we will be glad to publish your feedback!