Bittersweet: a free SharePoint Master Page for blogs

5 Mar
2012

Bittersweet Master Page (SP2010)

I’ve been inspired lately to create a Master Page for a SharePoint blog. It’s based on Kyle Schaeffer’s V5 Master Page, and I’m giving it away free in return for feedback and critique. I’d love to develop this further and take it to team sites, my sites, and publishing pages, but before I go through the whole process I’d like to gauge interest.

Features:

  • CSS3 rounded corners
  • fonts: “Shadows Into Light Two” and “Open Sans” (courtesy Google Webfonts)
  • an HTML5 shiv for older browsers
  • Fixed width, centered design

So download, enjoy, and tell me what you think!

Download: Bittersweet Master Page (SharePoint 2010) (11.7KB, ZIP)

Ben

2 Comments

Making my website responsive

16 Jan
2012

Try resizing the window, I’ve swallowed the pill and made my website responsive. It’s a sloppy job I’m sure, but it seems to work ok. I accomplished this with a few things:

  • CSS3 Media Queries
  • Modernizr.js
  • Respond.js (don’t think it loaded by default for some reason in modernizr. weird)

I’ve decided on 3 main sizes. They aren’t particularly standard practice, but they work for my site. In my case, I have pretty basic stylistic differences between screen sizes. Here’s my setup:

@media only screen and (min-width: 716px) and (max-width: 970px) {...}

@media only screen and (max-width: 716px) {...}

Because my site runs on wordpress, I’ve also installed a Modernizr and Respond plugin. Yes, I could have put them in myself, but the goal was a quick and dirty implementation of responsive design. I’ve tested in Safari, Firefox, and IE7/8/9. Everything seems to work except my background-size declaration in any version below IE9. Oh well. For another time…

I’ll also be writing soon on the differences on doing responsive design vs using something like jQuery mobile.

A few resources:
Responsive Web Design: What It Is and How To Use It
Modernizr
Taking Advantage of HTML5 and CSS3 with Modernizr

CSS4 is coming!

12 Dec
2011

With many of the level 3 selectors of CSS not even being fully supported on many browsers, the World Wide Web Consortium (W3C) is already plotting its release of level 4 selectors! You can read the spec here. There is some interesting stuff. They mention ideas like the “time-dimensional canvas”…I’m not going to pretend to have any idea what that means.

Here are a few selectors in the current working draft:
E:not(s1, s2)
E:matches(s1, s2)
E[foo="bar" i]
E:local-link
E:local-link(0)
E:current
E:current(s
E:past
E:future
E:indeterminate
E:nth-match(n of selector)
E:column(selector)
E:nth-column(n)
E:nth-last-column(n)

I don’t even have everything in CSS3 down yet, but I assume this is going to be a while in the making, it’ll give me some time to catch up!