
Macleod & Co.
Macleod designed, Darin developed.
- WordPress
- FoundationPress – WP Starter Theme
- Used Bower, Grunt, and Sass
- Responsive
Features
- Home Page
- Video or Image Background
- Advanced Custom Fields (ACF) – Ability to choose between image or video background, different fields shown based on that option
- Tagline – uses ACF
- Featured Links – uses ACF
- Ability to add up to 3 links with Name, Link and Color
- Video or Image Background
- Case Studies – Custom Post Type
- Pods Plugin – to make custom post type
- FitText jQuery Plugin – for scaling text size within Case Study link
- Sweet hover effects
- Portfolio Gallery – on Our Work page
- ACF – to create the gallery
- Ability to add new images with Title, Category, Tag(s) and Description.
- FitText jQuery Plugin – for scaling text size within thumbnail link
- MixItUp jQuery Plugin – for filtering projects based on tag
- Magnific Popup jQuery Plugin – lightbox for large project image and description
- Sweet hover effects
- ACF – to create the gallery
- Main Site Navigation
- Custom JS to toggle the menu open/closed and keep the bubble in the correct position
- On Desktop, nav opens with hover and logo goes to homepage. On Mobile, opens with click and logo (or off-menu click) closes it.
- Bubble size adjusts to the number of links in the nav
SVG Best Practices; Optimization
The best way to use SVG today, mostly taken from here: http://css-tricks.com/using-svg/
As an image
<img src="kiwi.svg" alt="Kiwi standing on oval">
Add Modernizr trick for browser support
if (!Modernizr.svg) { $(".logo img").attr("src", "images/logo.png"); }
As a background image
<a href="/" class="logo"> Kiwi Corp </a>
.logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }
Fallback for background image
.main-header { background: url(logo.svg) no-repeat top left; background-size: contain; } .no-svg .main-header { background-image: url(logo.png); }
Best way is to use SVG code inline and optimized
SVG Optimizer
Base64 Converter
This video runs through it all
Recent Comments