I'm Emmanuel ARNOUD and I'm a webdesigner. I'm part of the Pinegrow team where I work on WordPress related stuff like the Starter Theme.

The following is a short summary of my current webdesign process when I work on a WordPress theme with Pinegrow .

Note: I use a Macbook Pro 15′ and a basic 19′ external monitor + Spaces. (Windows 10 users can use the same kind of feature with virtual desktops.)

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.

get_bootstrap

To help me make the right choices, I follow the Bootstrap documentation and I use HTML5 tags as much as possible.

See: http://docs.pinegrow.com/editing/building-the-layout
See : http://docs.pinegrow.com/wordpress-themes/how-to-start-your-wordpress-theme-development-with-pinegrow-wp

The result is one (or more) static document with the default Bootstrap CSS look BUT ready for further customization.

Styling the layout

Pinegrow provides a cool and visual CSS editor with LESS variables support but I like to edit my stylesheets by hand AND I like/want to use SASS which is not (yet) part of the application.

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.

See: http://docs.pinegrow.com/editing/use-pinegrow-alongside-other-web-development-tools

I use 4 external applications for the job:

Mamp Pro (€39.00) for my local webserver

Because I work on WordPress themes, I use MAMP Pro to setup and manage my local WordPress instances.

See: http://docs.pinegrow.com/wordpress-themes/useful-wordpress-resources#local-development

mamp_pro

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.

atom_editor

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:

codekit_starter_theme

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

browsersync

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.

See: http://docs.pinegrow.com/wordpress-themes/converting-html-website-to-wordpress-theme

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.

add_wp_actions

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 support@pinegrow.com

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!