Skip to main content
CSS is fun and cool and I like it.

#019 – The Blog, Part 1

We start to work on the blog area of the site. We want to have the blog area of the site at /blog/ – so we end up making a page template for that called page-blog.php and using the Settings Reading setting to make that page the blog homepage. This way we have very specific control over that page and what it shows. In that template, we use a custom WP_Query loop to give us exactly what we want.

We … Read article “#019 – The Blog, Part 1”

#018 – Footer

This will be about the simplest footer ever on a site. It will be a copyright symbol with Jeff’s name (It’s always nice, I think, to have the name of the site in the footer in plain text for easy copy-and-paste) and social media links. The year will auto update so it never looks out of date.

<footer class="site-footer">
  &copy;<?php echo date('Y'); ?> Jeff Campana

  -

  <a href="https://www.facebook.com/JeffCampanaCeramics">Facebook</a>

   -

  <a href="https://twitter.com/jeffcampana">Twitter</a>

</footer>

This goes in the footer.php file that gets … Read article “#018 – Footer”

#017 – Home Navigation, Part 3

We’re almost done with the homepage navigation, but there is some weird space below our slider and above the navigation itself. We dig into finding out why.

For those of you who like to watch exact solutions, this isn’t for you. We struggle with figuring it for quite a while, showing off troubleshooting steps along the way. We ultimately figure out the specific CSS reason why things are the way they are, but the values are being all set with … Read article “#017 – Home Navigation, Part 3”

#016 – Home Navigation, Part 2

We have a good start on the homepage navigation, but there is some styling stuff that still needs to get done. We start by completing the content itself, adding a few more nav links for a total of five. Then we alter the fonts and colors of the elements we used to match our Photoshop design.

This was the first time we’ve altered header elements, so we style them right in our _typography.scss file, hoping that these styles can set … Read article “#016 – Home Navigation, Part 2”

Article

Uniqlo Stripe Hovers

For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It’s kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect. It’s fairly small at 4K, but as we know around here, it is also another HTTP request. Let’s reproduce the effect in a progressive enhancement style: less browser support … Read article “Uniqlo Stripe Hovers”

#015 – Home Page Navigation, Part 1

We have a plan for the home page navigation, we just need to get it done in code. Home page navigation, I say specifically, because this is likely only going to be used on the homepage. It would be a bit much to use on every internal page, the way it’s designed now. Point being, we can put this into our home.php template.

We write a bit of simple semantic markup according to our design, and then begin to style … Read article “#015 – Home Page Navigation, Part 1”

#014 – Positioning the Slider

The slider works! But it’s not placed quite exactly as we have designed in our Photoshop file. We need more room below it to expose more of the main navigation.

In this screencast we dig into the CSS that comes with the slider and clean house! Some of the sizing and positioning we also do in the JavaScript in the settings we pass the the plugin. … Read article “#014 – Positioning the Slider”