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

Naturally, I turned to jQuery which offers endless possibilities when it comes to HTML and CSS manipulations. Since the main request was that glowing effect should be permanent, I was required to set a loop of effects which would enable me to achieve this. Naturally, fade in and fade out were the first things that came to my mind. Let’s have a look at the function I implemented into WordPress (hence jQuery(document).ready(function ($) syntax):

jQuery(document).ready(function ($) {
    var $element = $('.fading');

    function fadeInOut() {
        $element.fadeIn(1000, function () {
            $element.fadeOut(500, function () {
                $element.fadeIn(1000, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

Furthermore, I had this idea to have one button on the front (it would also be a link), while I would also have an exact button behind it (naturally, I used z-index for this). The back button would actually have this glowing effect, while the front button would remain static, without any effect. So let’s have a look at HTML I used:

<div id="boxes">
    <a href="#" style="display:block;">
        <div class="box-button-main">
        </div>
    </a>

    <div class="fading"></div>
</div>

(As you can see, I didn’t bother with CSS classes very much – you’re free to do so. And since you asked – display: block was added to <a> as that turns <div> HTML element into link.)

And here comes the last part – CSS:

.fading {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:1;
    position: absolute;
    left:0px;
    -webkit-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    -moz-box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
    box-shadow: 0px 0px 32px 6px rgba(221, 51, 51, 1);
}
#boxes {
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 100px;
    top:50px;
}
.box-button-main {
    width:100px;
    height:100px;
    background-color:#dd3333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index:99;
    position: absolute;
    left:0px;
}

You can see my idea within this code – as mentioned earlier, I have an exact button below the main one, but I added box-shadow style to it that would, when using fading effect, make our button glowing. And that’s all there is – you can easily use this function to implement your own ideas, especially if you need infinite fading effects.

I’ve also created a jsfiddle where you can see how this works (I hope no one deleted or modified the code on purpose) – check the link within the resources below.

Resources:

• jsfiddle working example

Post Glowing HTML button with jQuery je prvi puta viđen na bbird.me.