.element
{
left:0;
right:0;
position: absolute;
width: 100%; //would be nice, also
}

You can also center the content using text-align. Now as for width, some say that it is required, but in many cases I didn’t see any difference (I guess this is dependent on the browser). And you’re encouraged to add max-width combined with width:100% values.

Post How to center HTML element with absolute positioning je prvi puta viđen na bbird.me.

But I’ve got a quick trick for you – version your file! As you already know, the proper way to enqueue style or script in WordPress is the following:

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( ), '1.0.0');

The number 1.0.0 is the style version which is not always included. If you want to make sure that after every cache purging the new version is loaded, you only have to change the version number. So if you put something like:

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( ), '1.0.1');

after you have added new changes into style.css and if clear the cache after that, the new CSS version will be loaded immediately and a ton of your nerves (and your clients’ nerves) will be saved.

You’re welcome!

(yes, this happened to me, well, countless times…)

Post Purging a stubborn WP Engine CSS cache je prvi puta viđen na bbird.me.

Directory structure

I’d say this is up to:

1. personal preference
2. project requirements
3. … and few other things.

You can go with something like:

style.scss

partials/_base.scss

partials/_grids.scss

partials/_typography.scss

...

vendor/_jquery.scss

...

etc.

Partials

As you can see in the above structure, there are partials – this is the word you use for Sass files. It is a nice way to structure CSS, based on the layout, project type, etc.

Import

Use the @import clause for importing partials into the main (compiled) file. Normally you would put import clauses into the main style.scss file and the syntax would be something like the following:

// Modules and Variables
@import "partials/base";
@import "partials/buttons";
@import "partials/grids";
@import "partials/typography";

Notice that you don’t need _ or .scss suffix.

Variables

Yes, these are the variables you see in other programming languages. In _base.scss partial, you can put something like:

$primary-color: #333;

And you would call it like:

body {
  color: $primary-color;
}

But in _buttons.scss partial, you could also use the following, and without the need of redeclaring this variable:

button {
    background: $primaryColor;
}

But needless to say – if you want to reuse this variable across other partials, make sure you define it in _base.scss file (or whichever partial will be imported first), possibly on the top, before this variable has been used. As you know, in CSS, whatever comes last takes the precedence. And there is a quite big chance that your CSS file will not be compiled at all, as the compiler would return an error ( something like variable not declared or so).

Mixins and @include

Now Mixins is an excellent topic. Let the show you few mixins and notice that they use @include clause:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

And this is how you would call it in our example:

.box { @include border-radius(10px); }

But there is absolutely no reason why wouldn’t you use it again:

.box-wider
{ @include border-radius(20x); }

And you would get the following result:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

.box-wider {
  -webkit-border-radius: 20x;
  -moz-border-radius: 20x;
  -ms-border-radius: 20x;
  border-radius: 20x; }

I guess you are already asking – do I have to write all these mixins, or has someone already done this before? Sure they did it – and a lot of people did it! You can find an extensive list on this blog post, While you can find also some of them on my resources page.

Inheritance

Why bother with redeclaring the styles, when you can use an @extend clause. It would go like:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

And the CSS result will be:

.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

Nesting

If you use the following:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

You would get:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Post Sass Quickstart je prvi puta viđen na bbird.me.

function add_new_class(){
	
if (is_page()) {
    return "page";
} elseif (is_single()) {
    return "post";
} else {
    //add other elseifs
}
}

While inside page template, you would use something like:

<header class="entry-header <?php echo $new_class = add_new_class(); ?>">

The final result would be:

<header class="entry-header post">

or something like:

<header class="entry-header page">

I’ve also posted this as an answer on Stackexchange, so if you find this useful, do not hesitate to vote me up :).

Post How to add custom CSS class depending on the template je prvi puta viđen na bbird.me.

#nav ul li:hover > a {
    background-color: #000;
    color: #FFF;
}

Needless to say, it is up to you which styles to choose, but make sure that the ID (or class) matches the code on your website.

Post How to highlight parent menu item when hovering over submenu item je prvi puta viđen na bbird.me.

I am assuming that you have NetBeans installed and WordPress project created. The steps are as follows:

Download the latest Ruby from http://rubyinstaller.org/downloads/ and install. When installing, make sure you thick the middle option:

The next step is to install Sass from command prompt – open command prompt and type the following:

gem install sass

Upon successful installation, several new files appeared in your Ruby folder – one of them is sass.bat you will need.

Now open NetBeans, open Tools -> Options and point to Miscellaneous. This is where you will select your Sass processor. If you installed Ruby in default path, you will have something like this:

Restart NetBeans after that (some users reportedly had to do it, so just in case ).

Completing these steps doesn’t mean that your Sass files will be processed – this is where most tutorials finish, forgetting the most important thing – setting the Sass file path! This is how you do it:

1. Right click on the project name and click properties.
2. Now, refer to the next image that will give you an idea on how to set input as output paths for Sass preprocessor. In my case, WordPress root directory is the projects’ root directory, hence the path I added.

And there you go – make a change in any of the partials or the main file, and providing there are no errors (undeclared variables, etc), Netbeans will compile main CSS file.

Post Auto compile Sass on save in NetBeans je prvi puta viđen na bbird.me.

The first thing is to add either class or ID (your choice) to the first container above the first level <ul> element. Let me show you an example on a FoundationPress theme, a starter-theme for WordPress built with Foundation, built by Ole Fredrik Lie. Needless to say, I highly recommend this theme for any WordPress project based on foundation (it has custom walker class implemented – do I need to say more? ). So this is the code:

<section class="top-bar-section">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
</section>

And this is where you would add CSS class or ID. Let’s use .fd-animate class for now:

<section class="top-bar-section fd-animate">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
</section>

And now all that we need is CSS (this theme is using Sass, but I will show “pure” CSS  for those who don’t use the Sass approach):

.fd-animate ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 1.2s ease-out;
  -moz-transition: max-height 1.2s ease-out;
  -ms-transition: max-height 1.2s ease-out;
  -o-transition: max-height 1.2s ease-out;
  transition: max-height 1.2s ease-out;
}

.fd-animate ul li ul li:hover > ul > li {
  max-height: 100px;
  height:auto;
  position: relative;
}

.fd-animate > ul > li:hover > ul {
  left: 0;
}
.fd-animate > ul > li:hover > ul > li {
  max-height: 100px;
  height:auto;
  position: relative;
}

.fd-animate > ul > li > ul {
  width: auto;
  min-width:200px;
  display: block;
}

For positioning purposes, you may want to overwrite default foundation CSS:

.top-bar-section .right li .dropdown {
  left: 0;
  min-width:200px;
  right: 0;
}
.top-bar-section .right li .dropdown li .dropdown {
  left: 100%;
  right: 100%;
}

.top-bar-section .dropdown li a {
  white-space: normal;
}

This may be a bit rough code which you can modify for your purposes, but the main point is that it covers the idea of adding transitions to WordPress drop-down menu based on foundation framework.

Post Adding CSS3 transitions to WordPress drop-down menu based on Foundation je prvi puta viđen na bbird.me.

@media (min-width: 768px) {
.dropdown .dropdown-menu{
    display: block; 
  opacity:0;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}
}

Why media queries? Because you don’t want display:block on hover on the mobile menu (as the hover used for this would double the submenu). As for CSS transitions, you can generate them using any of the online generators, such as this one.

Post Adding CSS transition on Bootstrap drop-down menu je prvi puta viđen na bbird.me.