Dashboard Redesign
Webpops project dashboard has been updated with a whole new look, improved UI and room for new features that are on the horizon. We also overhauled the underlying database infrastructure a bit. Here's a list of changes:
Webpop Extensions Q & A
We get lots of support requests related to writing custom extensions. So I'm starting a list of questions and answers so that we can all learn from each other.
Speeding up your Webfonts
The era of the font-face is upon us! During the last couple of years the growing support across platform for custom web-fonts via the CSS @font-face rule has completely changed the game for typography on the web.
While there's a bit of trickery to generating a Bulletproof @font-face Syntax the basic idea is simple to grasp: the @font-face rule allow us to import a font file from a URL and use that font in our CSS.
This is great, but as with seemingly all things web, there's still some trickery to it.
Top 10 Free Icon Fonts
Icon Fonts are all the rage in web design today. They can really spice up the UX without incurring the large payload of images. They are also well suited for doing responsive design because their vector based nature makes them look crisp at any size of pixel density. The fact that they are actually just fonts means you can easily customize their size, color, hover state and even apply cool CSS3 font styles like text shadows.
If you're really serious about site performance, especially for mobile, try building a site without any images and building your own custom icon set with something like Icomoon or Fontello. With a dash of color and the right set of icons, you can build really rich and lively websites with payloads under 100KB! Then for extra credit, serve the font via CDN! (it's actually a bit tricky to do right, but Webpop does it for you automatically via the bundle tag)
Here's the list of the best free icon fonts out there:
Simple Responsive Images: Picturefill with one Line of Code
All the good responsive image solutions perform a similar function: they let you specify which image urls should be served for various sreen sizes and pixel densities. That means they also create extra markup to maintain! But since your sites responsive images often share a common ratio of image resizing at various CSS breakpoints, there is an opportunity to DRY things up with a bit of abstraction.
Webpops extension engine makes it easy to abstract your favorite responsive images soluttion. This post covers a little responsive image extension for Webpop that lets you author Scott Jehls Picturefill ( a robust little responsive image solution ) in a single line of markup.
We'll use it to make a responsive Raptor gallery. Note that this same technique could be used with any number of other responsive image solutions as the underlying principles are the same.
How to Build an Event Calendar with Elastic Search
We've all been there. You're working with a CMS, and a situation arises where your site has a very specific requirement for its content architecture that isn't possible to build in a clean way with the off-the-shelf parts your CMS provides. Even Webpop and its powerful standard library of Pop Tags can't possibly cover every content architecture situation.
But the cool thing about Webpop is that it's an open system which makes it easy for you to create custom Pop Tags that render out content exactly how you like it. In this post, I'll show you how to create a simple extension that uses elastic search to create an events calender.
Top 15 CSS Generators
There are tons of great little generators out there to help you write CSS. Everything from making a simple gradient to going through your entire stylesheet at adding the current browser prefixes. You can use them to add advanced CSS styles to your site, or just as interactive educational toys to learn how stuff works.
Can a Puppy Sell a CMS?
We all know humans are hardly rational agents when it comes to buying decisions, often emotional reactions plays almost as large a role as facts, figures and logic.
Choosing a CMS is often a long process involving careful evaluation of the flexibility of the content model, the power of the template engine, the level of separation between design and content, etc. But even so, there's still plenty of space for the purely irrational to play a role.
A while ago we launched an interesting little test to dig into the effect of emotional engagement. In this case we decided to test the click through rate rate on our call to action at the bottom of most of our pages where we urge people to give our 30 day free trial a shot.
Author Smarter Stylesheets with Sass Compass Integration
Today, we're proud to announce that Sass Compass is now built right into Webpop’s IDE! Compass has been rising star in the world of CSS authoring abstractions, it's almost like the jQuery of CSS, mitigating the complexity of authoring modern CSS
To get started with it, simply import Compass at the top of any .scss or .sass file in your public folder, like so:
@import ‘compass’What is Compass?
Compass is an open-source CSS authoring framework that runs on top of Sass that gives you the tools you need to author really expressive stylesheets with robust browser support. It comes loaded with a great collection of Sass mixins that greatly simplify authoring modern CSS styles.
Pin Things with jQuery.pin
Fresh out of Webpop's open source oven, it's jQuery.Pin!
Finally, a super simple jQuery plugin for making stuff stick around when users scroll down the page of a site.
jQuery.pin is a small plugin for pinning a DOM element within a container. We're using it on this site for the Gallery and Themes sections and for the sticky navigation in our Documentation section. You can even see it in action with the Webpop slogan on the right which appears when you scroll down ( if you're viewing this on the full desktop layout ).
There are already various tools out there for sticky navigations and for pinning and unpinning elements, but none of them make it really straightforward to get an element to pin inside a container element.
