How To Use Sass With WordPress

There are many benefits of Sass for WordPress developers. You’ve probably heard many arguments for using a pre-processor by now. CSS pre-processors provide the opportunity for better code organization by using partials and nesting styles. Pre-processors help developers style faster by writing mixins and functions. Pre-processors also allow us to write more maintainable, scalable code with logic and variables.

Convert a Stylesheet to Sass

The best way to start using Sass in WordPress development is to use a theme that has Sass files included. The Underscores theme is my favorite starting place for a new theme. However, if you’re starting with a theme that doesn’t have Sass files included, you’ll need to convert the existing stylesheet to Sass.

The good news is that if you’re using the .scss syntax (which I recommend), your existing CSS is all valid Sass. You can simply copy style.css to style.scss and that .scss file will compile properly.

Setting Up Partials

At this point, you’ve got a long .scss file with just as much code as your original CSS file. You can now use variables and mixins, but this still isn’t organized better yet. We can get some much-needed organization by breaking the long stylesheet up into smaller files. Copy each “section” of style.css to a separate .scss file in your Sass folder. Name this file after what it contains with an underscore prefix. For example, your styles relating to your navigation go to _navigation.scss.

Once you’ve moved code to a partial, you’ll need to import that partial in your main style.scss file. Essentially, you’ll copy all the navigation code to _navigation.scss and replace it in style.scss with an import command. Note: the file name in the import does not have the underscore or the extension.

Read More

Advertisements

Elegant Themes: 87 themes for only $69!

These days people browse on wide-screen desktop monitors, smaller desktop monitors, laptops, tablets and mobile phones. So if you want your potential customers or clients to have a good experience when they visit your site, regardless of what device they are using, you need your theme to be mobile responsive.

Divi theme is fully Responsive so no matter how you use it and no matter how you view it, your website is going to look fabulous.

divi-elegantthemes

Smart, flexible and beautiful that’s Divi the drag and drop pagebuilder theme from Elegant Themes

Divi was released by Elegant Themes at the end of 2013, quickly becoming the center of attention in the community. What’s interesting about it is that it’s easy to use, very user-friendly, but elegant and professional at the same time.

Its interface, which is called Divi builder, offers a simplistic approach to web design at a first glance, due to the fact that it splits the dashboard in horizontal layers, similar to the header, body and footer.
Everybody seemed to love Divi, so we can say that the strategy envisaged by Elegant Themes proved to be a right choice.
In fact, Divi has become so popular that, during last March, Elegant Themes didn´t blink to make a move that usually involves making difficult decisions: They increased the price of their Personal Package membership from $39 to $69 (although the new yearly subscription price would affect only new members, since Elegant Themes always honors the signup price for current members; in their own words: “we will never raise the price for people who have already signed up”). Anyway, $69 looks like a very fair price for a collection of 87 themes, especially when one of them is Divi, which really deserves that price by itself.

Get Full Story of Divi
Dive into Divi Reviews

“Vivacity” WordPress Theme Released

We have released our first WordPress Responsive Theme called “Vivacity“.

The Vivacity Theme is also completely responsive, meaning that it is automatically compatible with any device that a website visitor uses to view the site, whether on a desktop, smartphone, tablet, etc.

 

The Vivacity Theme is the perfect solution for website administrators who are looking for a way to add a touch of minimalistic professionalism to their website in a way that doesn’t require the work of an expensive custom web developer.

Vivacity is a child theme of Twenty Fourteen. Using Vivacity theme you can customize various element’s in theme like color of headings, background etc.

Vivacity-Wordpress Theme

To access a Vivacity Theme , Download it here.