Pascal CSS Editor (BETA)

Follow the instructions below to install and configure your new product

Remember: In order for the Pascal Plugin to work, you must have Divi from Elegant Themes. If you do not have it you can purchase it here. Once you have it, please install it on your self-hosted WordPress website.

A. DESCRIPTION

Pascal is a front-end CSS editor built right into the WordPress Customizer. It's in beta right now and improving all the time!

Edit CSS on the front-end of your WordPress website with Pascal: The smart CSS Editor that takes care of media queries and browser specific CSS for you.

Pascal is a series of CSS editing panels that make organising your code quicker and easier. Everything is added to your site in real-time and you can see the changes happening as you make them without refreshing, visiting the back-end or anything that takes you out of your coding groove.

B. FEATURES

Here’s a list of the features that make Pascal the perfect companion for writing CSS. Green is live. Red is coming very soon.

FRONT-END EDITING.

Stay out of FTP or the WordPress back end. Pascal is customizer based, meaning it’s right there on the business end of your site when you need it and hidden when you don’t.

DEVICE PREVIEWS

Preview your CSS on a variety of viewport sizes, including those used by the latest Apple & Samsung devices.

EXPORT YOUR CODE

All of the code you write in Pascal is formatted and ready to go, whenever you want it.

BE RESPONSIVE

Add your CSS and let Pascal take care of making it responsive on desktops, tablets and mobiles.

BROWSER SPECIFIC CSS

Cure headache-enducing cross-browser issues with browser specific CSS. Support for Firefox & Internet Explorer. Edge, Chrome & Safari coming soon.

SET YOUR OWN BREAKPOINTS

Choose the pixel-point where responsive changes happen.

HOVER TO GET IDS AND CLASSES

Hover over the browser preview window to see what classes and IDs you need to target.

See your site on all of your favourite devices! Pascal is one cool Chicken…

EXPORTING YOUR CODE

Exporting CSS written in Pascal is easy. Just head to your new page under Appearances > Export Pascal and take your code wherever you want.

C. HOW TO USE

• Install the heypascal.zip as a plugin ( plugins > new > upload new )
• Either head to the Theme Customizer and open up Pascal or use the quick-use link in the mobile menu bar.

• Open up any panel and start writing CSS. It’ll save in real-time and work immediately.

• If you need to export your CSS just head to Appearance > Export Pascal.