Bootstrapping A New Landing Site

I’ve been tinkering this week for a new approach to building basic web sites driven by a single HTML file (with a backend of sophisticated CSS and Javascript). It’s a style you can start to recognize — see Medium, Sports Illustrated, and countless others once you tune into it.

It is exploding. This is a future of web design based on Bootstrap, a framework first created by twitter that is focused on responsive (any device it reformats) and actually a mind set of mobile first in design. But it looks gorgeous in a web browser too. And it looks must less “pagey” than what came before it. And it is standalone- it needs no database, and can run in a browser offline.

And it is also exciting to be dabbling with a new approach for web design. It is not, however, something that you make through a GUI interface, punching buttons, and menus– you need to get in the code. You do not need to understand how it works (I am a model of that). This is not a tutorial but my own record keeping as I start learning how to build.

But stop talking and start showing. I am using this for a new version of my “calling card” or a “landing page” site at http://cogdog.info — explore it first, then I will roll through what I have done here.

New site for cogdog.info

And the same site on a mobile

I bought the domain a few years back, and for a while simply had it pointed to my About.me site which is easy to set up and connect to your various social media sites. What I liked for a while was that it had a contact form, so people could message me. Then they changed the way it worked, so you have to log into About.me to leave a message. Then it turned into something that keeps messaging me when people “like” the site. And its run by AOL.

So I decided to take back the site and built it myself, after all, I want to show what I can build, not how I can be dependent on a third party site. Keep on Reclaimin’.

I was after a simple one page site that would then link to my others. I looked at a few different WordPress ones, and had a go with the new Onesie theme from Graph Paper Press (I have an account, I really love their themes), experimenting with it at http://lab.cogdogblog.com/cogdoginfo/ trying first a look using what I had at About.me.

I had a weird experience because I could never see the other pages nor the menu links to creates, until after putting a message in their forums, it dawned on me that the WordPress admin bar was covering it (note to theme designers, AHEM! DO NOT FORGET THE MARGIN!).

And then I started to think maybe I had too much WordPress on the mind- I had no plans to use a blog capability, so why not use a clean web template?

I was familiar with bootstrap, I used it a bit for the ds106radio site dashboard, and it comes into play a lot with github generated sites. I am using a WordPress port of it for the ds106 assignment bank template.

So on googling “bootstrap templates” I landed at {wrap} Bootstrap and right away was attracted to the Treble One Page Responsive Theme. I liked the full screen image on the front, and the row of link icons. Okay, it is not free, but it was worth the $10 investment (look for free ones at http://bootswatch.com/).

I am impressed with what it accomplishes via a flexible grid system layout and the jquery tricks that make it feel like a multipage site. You get a lot of capability just with bootstrap. In a way it is parallel to WordPress child themes, core functionality is provided in bootstrap, and a theme then adds stuff on top

But you also find yourself dealing with the CSS building approach of less — the “dynamic css language”, and I am finding myself at the foot of a new learning curve. The ropes are out. But what you have in “less” are a bunch of source .less files that contain style elements, and you have to compile them into the production css– which is well formed and you don’t tinker with.

Compiling means doing some command line stuff, but I did find a nifty {less}.app which works in OS X — I fell in love with the graphic:

so now, this is what I have done so far…

Landing page

This is really what I wanted a simple page with links. I used my own photo as background, reflecting my interest in photography (and hiding my mug behind a camera). That little icon at the top I replaced from the default to use my iconic dog- it does this neat spin thing on a hover that changes it into a “scroll down” image to indicate there is more stuff below.

People may not figure that out.

They can be trained.

There are three lines of text which rotate, maybe distracting, but it allows you to put a message into less space. This is automatic in the theme, in HTML it is simply an unordered list:

Now the button row was where I spent some time; the theme comes with a few default ones, but I wanted to make my own for flickr, delicious, slideshare. And this is where your old school HTML gets spun around. In the old days, you would create a single image file for each one. On this case you have a single (well actually 4, with inversions for highlights) image, and in CSS it does offsets and clipping to make it act like single images. It’s likely a tad more efficient to ship one image 7 times (caches) then sending 7 little ones. Guessing.

So I modified the default icon image:

to ones I wanted to use:

and then to make it work, I had to edit assets/style/theme/icon-set.less to define my own classes (and I had no need for a facebookone):

this had to be compiled to fold into the bootstrap.css file that runs the site. This is hardly an explanation, but it is a door opening for me as a completely new way to think about web design.

The lower sections act more like separate pages, thanks to the fixed menu bar at the top. I removed a few sections from the template I did not need — there is a blog template, and something to display twitter feeds if you run it in php, I looked at for future reference, but its not anything I needed now.

The menus are driven at the top be a list, so I just edited it, the links point to heading IDs

I moved the about to be next, and just used the content I had previously on the About.me page, but added a photo.

The About page is just HTML, but there is no reason why you could not use the grids to create a 2 column or a 12 column display. Simple is better.

The About page

After that is “Stuff” which is what I renamed the Portfolio section. Now this is where it gets really interesting.

Each image represents a portfolio item; you get 3 rows of 3 items per line, and then you can append more (loaded with ajax) via the readmore link. You could easily have more rows above that, just copy/paste.

In seeing the template I came across a nice side discovery, http://placehold.it/ a site that dynamically generates images you can use for placeholders in IMG tags, see http://placehold.it/390×300 or http://placehold.it/800×800 or hhttp://placehold.it/139×423.

Neat.

But when you click an icon, it loads a separate HTML file above as a bit of more info, where I can describe each project:

And the close box, makes it close. In the old days this would be now a site with like 30 swimming HTML files. And I guess it still is. But it makes a single page act like more.

But wait there is more.

You can create groupings of projects, that act like category archives in wordpress! So just by using class names for each portfolio item, you can click and see just the ones in that category, and then even do a bit of animation on changes.

Photography Photo items in portfolio

Coding Items in Portfolio

And if you have the “readmore” list open, it pulls them from there too.

This is done by understanding the list structure of each item, e.g.

The classes in the li tag define the “tags” (all items after “mix”). And you just rewrite the menu to make it work

I edited the text of the contact form, put a map of Arizona in the background:

Contact Form

The form now uses a silly mailto: action (using a gmail filtered account), but there is no reason why you could not rig it up to a PHP or third party contact form. Later.

That’s as far as I’ve gotten so far, but I am so jazzed to be onto something new here.

I was somewhat inspired this way by some questions Tim Owens posted on his (posts no longer available, got an archive of the WP site??) blog (which is using something similar now designwise). Tim was really questioning the blog form, the reverse chronological default of WordPress.

That’s not a real limit of wordpress, I do quite a few sites where the chronology is not the blog one — my photo site uses random ordering on the front as well as one I did for an artist friend. A site I did for another artist has no posts at all; Emilio’s site is all pages and galleries. You can subvert the order by handling the loop.

But I like Tim’s experiments, and that’s what a personal space is for.

And for a site that does not need regular adding of content, WordPress is not really required. It’s helpful because of its templates, and ease of use, and the way you can design it for people to use who don’t want to tinker in code.

But now, I am thinking for some standalone sites, the bootstrap approach is something I am going to look at more and more.

Your mileage will definitely vary. And I know 95% of you lost interest when I said “edit code”. That’s okay, that makes more work for me 😉

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon