Timeline Portfolio. Timeline is a jQuery plugin specialized in showing a chronological series of events.
You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests. The HTML Timeline comes with a light colored theme by default. It is perfectly usable and in most cases would be exactly what you need. First, let's look at the basic layout of the page: index.html <! In the head section, we have the plugin's stylesheet - timeline.css, and styles.css, which will hold our customizations. When we call the plugin, it will search for a div on your page with the ID of timeline.
<div class="container main" id="timeline"><div class="feature slider" style="overflow-y: hidden;"><div class="slider-container-mask slider-container slider-item-container"><! As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. Why you should care about CSS page performance. Development: The estimated time to read this article is 5 minutes If there’s one thing I’ve learned over the years as both a user and creator of websites, it’s that performance matters.
Whether it is how fast the page loads or how it behaves once it’s in place, how well that page works has a direct impact on my and other user’s opinions of that website. A website that performs quickly and smoothly feels high-quality and that feeling translates to the brand it represents. Can you imagine someone like BMW having a website that was slow and clunky? However, the mental association isn’t always so direct. As such, it’s important to make sure that our websites perform at their best, both for business reasons and as a matter of professional pride. How to measure page performance Some of the best ways to test a page’s performance are also the least technical.
Of course, I’m not suggesting that you should remove all styles from your pages. A few quick tips on CSS performance. Free Subtle Grunge Minimal Iconset Download, Vector Files Included. Responsive Grid System. Cssarrowplease. Icon Fonts are Awesome. Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs.
Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings.
Here's a large collection of more choices. For quick usage, the code is below. How To Use To Enhance a Word Stats <h3><span aria-hidden="true" data-icon="⇝"></span> Stats </h3> How To Use for Stand Alone Icons. Font Awesome, the iconic font designed for use with Twitter Bootstrap. Simple Button UI (PSD) Collection of CSS Creations.