layout posts

The min-content in CSS grid apparently takes into account the full width of a <pre> element content, even if you put max-width: 100%; on it. Continue reading post "#1984"

A couple years ago, I wrote a post titled "CSS: Inner Border Grid List" about solutions to a problem I was having. The post is not about CSS grid layout, but recent interest in the post leads me to believe people are visiting expecting it to be. In the interest of serving those visitors, I decided to create a solution using the now well supported spec.

I've been interested in the basic idea of responsive design since I first started into web development. Back then it was mainly limited to flexible widths that accommodated changing screen widths and font sizes. I experimented with that when development was just a hobby. Still, I found CSS2 and browser compatibility issues to greatly limit the flexibility. When starting to actually get paid as a developer, I went with what was already being done at the places I worked, which was pixel-perfect design. Sites had to work in old browsers and time was limited. Designs were flat images that were easy to cut up and use CSS to match exactly. I did play with some flexibility when I had more free time.

When responsive design became a thing, I thought it looked pretty awesome. It gave a lot more flexibility than what I had been playing with. Still, browser support was too bad for parts of it for me to use at work. I played with some aspects of it, adding a bit of flexibility here and there, but still kept mostly with the pixel perfect type design. When we eventually discussed it with my boss, he didn't like the idea, particularly for accommodating his designs and the browser support issues. I started a yet unfinished remake of my own site that allowed me to play much more, but didn't get very far towards a finished design.

The Site

Recently, my boss came up with a simple design for a simple site that he thought would be perfect for trying responsive techniques with, the annual report for the Gay Community Fund. It lent itself well to flexibility and him and the client were fine with graceful degradation / progressive enhancement. It consists of basically two layouts: the home page, with a gallery layout of boxes; and an internal layout with a heading, a possible image, a possible small image gallery, and a possible long list.

IE 10 has recently graduated from beta and is now the current official release. It started out Windows 8 only, but now is available on 7 as well as a preview release. Hopefully that will allow it to grab more IE users quickly. IE, which has long been the bane of web developers, has been getting better and better with each release. IE 6 has always been a pain to develop for, having many bugs/quirks in rendering pages. In all but fairly simple sites, it always took me a fair amount of time to fix after getting things looking right in other browsers. Luckily, the market share is low enough that at work we don't even worry about it anymore. IE 7 was better. Using a subset of HTML4/CSS2 level development, I usually have had to do only minor tweaks unless the sites were fairly complex. Luckily, It's share is almost to the cutoff point where we stop developing for it as well. With IE 8, I've been able to do most HTML4/CSS2 level stuff without worries. display: inline-block;, :before, :after, onhashchange, etc. It still remains a limiter in using some selectors and in making use of HTML5/CSS3 level techniques, though using an HTML5 shiv and CSS3 PIE or allowing for progressive enhancement to skip over some features in it works rather well. IE 9 has brought some HTML5/CSS3 stuff to the table, like selectors, HTML5 semantic elements, SVG, though it's missing some important ones, like CSS3 columns and HTML5 form stuff. Since I develop to support IE 8 usually without browser specific tweaks, IE 9 basically works automatically, and has some style enhancements over 8.

And now there's IE 10. IE 10 has added a lot more and is finally coming close to other browsers in implementing the not-yet-fully-standardized standards. It's still missing some good ones, but the list of things that have to be skipped, worked around, etc, for IE's current version has shrunk a good bit. It even implements some features that others haven't yet.

The big one is the CSS3 grid layout module, which is the one I'm most excited about for the future. This module is pretty close to allowing for a real decoupling of markup from style that CSS has promised finally for page layout. Continue reading post "IE 10 and CSS Grid Layout"

In building a website for a client, one usually builds clients, one usually builds a few mockups with different themes to give the client an idea of what the site will look like with one of a few options. They can tell the designer what changes they want, which can be made relatively easily to the mockup before the theme is actually built for the site.

The mockups are supposed to be quick and easy to build and modify, allowing designers to avoid dealing with all of the nuances of CSS and HTML at this early stage. Designers shouldn't be held to any limits at this point: They design what they think the site should look like, and figure out how to build it later.

Traditionally, this might have been done in Photoshop. The layout would later be cut up and positioned on the site with CSS. I did three mockups for the Stearns Homestead project in Photoshop. They were a pain, with maybe a hundred layers to handle two pages of the site for each mockup. Managing multiple elements of the same type is not easy there. Photoshop doesn't allow any easy management of multiple blocks of typography at once, so changes are difficult. Now that I'm not using school computers, I don't have access to a newer version of Photoshop, and none of my image editors have layer folders or some other useful features, which had helped me out a lot.

Our layout has some pages with a three column layout and some pages with only two columns.  The left column is always the same, but the other two will have one or two columns based on individual page content.  For a while, we've had the third column on the home page and an empty third column on other pages, but we ran into troubles when we wanted to add the third column content to the other pages.

The columns use float to get their positioning and can't be inside each other or the text from one would flow under the other.  A few options came to mind.  We tried closing template divs and opening others in the HTML editor of the page content: this did not work for us, somehow removing the background that was supplied by a wrapper.  It would be trouble for Stearns anyway.  We also tried removing the container for the center column from the template and putting one div into two column pages, two into three column pages.  This gave some difficulties with the editor, would require the divs on every page, and would be difficult for Stearns and us to work with.

Over the past couple weeks we've been working on our mockups for the site desig…

After making our layout wireframes, we brainstormed some various thematic ideas…

We made some wireframes for the planned layout of the Stearn's site. We were s…

We set up the full version of Wordpress (from wordpress.org) for learning how t…