Skip to main content

Tools

Introduction​

The following are tools we use at Super Rad. This list will grow and change over time and is not meant to be comprehensive. Generally, we encourage or require these tools to be used in favor of other ones. Rules governing tools to be used and packaged with a client site will be much stricter than those used on internal projects.

Code Editing​

PhpStorm – We are huge fans of PhpStorm because it’s such a robust IDE. (todo: write a page for phpstorm settings and help and link to the page from here.)

Atom – Atom is a text editor that’s modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.

Local Development Environments​

At Super Rad, we use Docker to build and interact with virtual environments that match production as closely as possible. There are many setups and configurations available, but the following setup is supported internally:

DDEV - An open source tool that makes it dead simple to get local PHP development environments up and running within minutes. It's powerful and flexible as a result of its per-project environment configurations, which can be extended, version controlled, and shared. In short, DDEV aims to allow development teams to use Docker in their workflow without the complexities of bespoke configuration.

Scaffolding​

Starting Line - Developers can use Starting Line to quickly create themes with our recommended tools and many of our best practices already in place.

Task Runners​

Gulp - Gulp is also a task runner build on Node that offers a similar suite of plugins and solutions to Grunt. The biggest difference is Gulp allows you direct access to the stream of information from your source files and allows you to modify this data directly.

Package/Dependency Managers​

Composer - We use Composer for managing PHP dependencies. Usually everything we need is bundled with WordPress, but sometimes we need external PHP libraries like “Patchwork”. Composer is a great way to manage those external libraries.

When a WordPress install is managed and maintained by an engineering team, and when the infrastructure supports it, plugins in a WordPress project can be easily managed using Composer. WordPress Packagist provides a Composer repository that mirrors all public WordPress plugins and themes.

Version Control​

Git - At Super Rad we use Git for version control. We encourage people to use the command line for interacting with Git. GUIs are permitted but will not be supported internally.

Command Line Tools​

WP-CLI - A command line interface for WordPress. This is an extremely powerful tool that allows us to do imports, exports, run custom scripts, and more via the command line. Often this is the only way we can affect a large database. This tool is installed by default on DDEV.

HTML & CSS Frameworks​

Foundation for Sites – Foundation is the framework we use the most simply because of how it’s built. It’s very hands-off and easy to extend with Sass. It’s possible to access all @mixin’s without outputting anything from the framework itself.

Bootstrap – Bootstrap is just as good. It really comes down to preference and project specifications.

CSS & Sass​

Sass – CSS with superpowers

7-1 Pattern – Sass boilerplate

Font Awesome – The iconic font and CSS toolkit. (I use this in pretty much every project.)

CSS Pro Tips – A collection of tips to help take your CSS skills pro.

CSS Guide by @mdo – Standards for developing flexible, durable, and sustainable HTML and CSS.

Sass Guidelines – An opinionated styleguide for writing sane, maintainable and scalable Sass.

JS Libraries​

Headhesive – An on-demand sticky header.

Headroom – Give your pages some headroom. Hide your header until you need it.

Stellar.js – Parallax scrolling made easy

Isotope – Filter & sort magical layouts

fullPage.js – Create Beautiful Fullscreen Scrolling Websites

Bricks.js – A blazing fast masonry layout generator for fixed width elements.

Grade.js – This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.

Venobox – Just another responsive jQuery Lightbox plugin, suitable for images, inline contents, iFrames, Google-Maps, Ajax requests, Vimeo and YouTube videos.