I have created a simple team member grid that reveals a short bio on hover. This can be used in a Bootstrap grid, or with CPT (custom post type) query in WordPress. Fell free to use and share.
Happy Coding!
See the Pen Team Member Reveal Text on Hover Boxes by Christopher Cook (@cccamuseme) on CodePen.
A simple scroll indicator created with CSS. Great for large hero image landing pages.
See the Pen Animated Scroll Indicator CSS by Christopher Cook (@cccamuseme) on CodePen.
By enabling this we can keep the client/server connection open across multiple requests, which will increase performance. Simply locate you .htaccess file and add the code below after the line #END WordPress.
Happy Coding!
There are many framework’s out there to choose from, but my favorite by far is Bootstrap grid. Bootstrap provides a quick and easy way to create responsive website layouts. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Bootstrap 3 includes predefined classes used for the grid for quickly making layouts for different types of devices like mobile phones, tablets, notebooks and desktops views.
Here are a few examples of what classes are used in different situations.
.col-xs-* ( extra small devices like cell phones ).col-sm-* ( small screen devices like tablets ).col-md-* ( class for medium size devices like desktops ).col-lg-* ( for large desktop screens )View the examples below in Codepen on different browser widths and see how they respond to the sizing. How the div’s stack and align on different size devices will depend on what classes you add to the div’s.
To view a lightweight Bootstrap grid only, click here.
See the Pen Responsive Bootstrap Columns and Rows by Christopher Cook (@cccamuseme) on CodePen.
In this Tutorial I will show you how to add a scrolling Parallax background to sections of your site. I will also show you how to use Flexbox to center the section’s content.
To make this effect possible we need to use jQuery and parallax.js, remember to call jQuery first before any other scripts in your header.
For my example I setup the sections to alternate backgrounds to show you the effect more clearly. Once you have your js in place all you need to do is give your section class=”parallax-window” with data-parallax=”scroll” and add data-image-src=”you-image.jpg” with your background image.
See the Pen Parallax Background with Centered Content by Christopher Cook (@cccamuseme) on CodePen.
I have been asked How To Create CSS Outline Buttons so I created a set of modern outlined buttons that become solid on hover using simple CSS. Feel free to use and edit my example as you wish for your own project.
See the Pen Modern Outline CSS Buttons by Christopher Cook (@cccamuseme) on CodePen.
Happy Coding!
Here is a full page overlay menu that is responsive for mobile and is a great way to make your menu stand out. I like this menu for it’s simplicity and it’s use of CSS3 . You see many websites trending toward using off canvas menus instead of using the classic static ones because there are more people use mobile phones and tablets to view their content than ever before. This can help by creating just one menu and not multiple for different devices.
See the Pen Full Page Overlay Menu by Christopher Cook (@cccamuseme) on CodePen.
source: http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
Bootstrap is a powerful tool for developing responsive templates because of the easy to use grid system. But one feature of the grid that I have not seen explained very well is how to reorder columns based on the breakpoints. The doc’s only explain it in minimal form and don’t explain it in simple terms.
This is how they show it in the bootstrap documentation.
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
So the most important thing to remember about Bootstrap is that it is built with Mobile First in mind. This is the key thing that many struggle with and have a hard time understanding some features.
Column reordering is changing the order of columns based on the size of the browser or viewport. I will be showing you how to reorder columns based on mobile view to desktop view.
The first thing we want to do is create our page markup for mobile first view like this:
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3"></div>
</div><!-- end row -->
On mobile view, it will show the 9 width column first (top) and the 3 width second (below). On desktop view, it will give us two columns side-by-side, one 9 width column that will be on the left and one 3 width column on the right that will look like this.
Now we will added some classes so that the 9 and 3 column will swap places when viewed on a desktop or larger viewport.
<div class="row">
<div class="col-md-9 col-md-push-3"></div>
<div class="col-md-3 col-md-pull-9"></div>
</div><!-- end row -->
Now as you can see, in the class we are declaring the column size and then telling the column how many rows to push or pull. Since the grid is based in 12 columns we would only need to push-3 for the 9 and pull-9 for the 3. You can use this to reorder divs at different breakpoints and can be used with more than just two columns as well.
Happy Coding!
A Favicon is a small image that is used as a websites favorites icon. Favicon’s help users find your website in favorites or bookmark bars by quickly recognizing the favicon. Usually company’s will use their logo, abbreviations or something specific to their brand.
A favicon can be created as .ico, .gif or .png image files and are 16×16 pixels in size.
Traditionally favicon’s are placed in the root folder of your website (http://example.com/favicon.ico) because almost every browser will look in the root for a file named favicon.ico, but you can place your favicon in any folder as long as you add an HTML link in the sites <head> and have the correct image location (yourwebsite.com/images/favicon.ico).
Here is an example of the HTML code you will want to place in the head section of your site, usually placed below the <title>. Copy the code and paste into the head of your document and replace the .png file name and location with your own.
<link rel="shortcut icon" href="http://example.com/favicon.ico" />
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png">
Happy Coding!