You learn as you go

The great thing about SASS is you don't have to change anything about the way you write CSS. You can write CSS normally. As I've gone along and noticed things that have felt a bit repetitive/could be done more efficiently, I've gone into the SASS or Compass documentation and looked to see if there is a way.

Setting up a reusable base

You probably have use either a framework or have your own premade frequently used styles now. With SASS you will probably be able to shove a lot of that stuff into mixins, variables and possibly extendable classes.

The obvious examples are colours and fonts. I usually have $primary and $secondary colours. I set up my sans-serif, serif and monospace font stacks and apply them to $sans, $serif and $monospace variables.

Using complement to build a palette

A tip for a quick colour palette is to use the SASS complement function. Like so:

$primary: #f00;
$secondary: complement($primary);

Although it's uses can vary as your primary colour may be too dark for a great difference. It's wise to set some other colours you will use a lot such as hover/focus colours. SASS has many useful colour adjustment functions.

I also set a base line height variable to use throughout. Though when using that with the font shorthand make sure you wrap the font size and line height in ( & ), as it will end up dividing the two values. Like so: font: 900 (16px/$blh) $sans;.

SASS and Compass interactive

These modes are great when dealing with a big chain of lighten(darken(saturate(#f00, 20%), 20%), 20%) for example. How do you just get the hex value of the colour without compiling and finding it in the compiled CSS or web inspector? Opening a terminal window and typing sass -i or compass interactive. These two modes can work with SASS/Compass functions and give you their compiled output. Handy.

Time saving mixins

Mixins can save a lot of time, how many times have you wrote something as simple as width: 100px; height: 100px and thought "I wish I could write that quicker". You can with SASS.

@mixin wh($width, $height) {
    width: $width;
    height: $height;
}

If you use presentational classes a lot, why not make it a mixin?

@mixin button {
    border: 1px solid #000;
    background: #222;
    color: #fff;
    padding: 5px 15px;
    display: inline-block;
}

Anything that you want to turn into a button use @include button; simple as that.

Other mixin benefits

Mixins allow you to not have to litter your code with classes. I think OOCSS is a great idea and I think mixins do help this and of course not forgetting @extend.

SASS helps responsive web design

In the prerelease versions of SASS only (at the time of writing this post). You can use nested @media queries. This saves a lot of time and you can set up a mixin to make this even more efficient.

@mixin respond-to($media) {
    @if $media == iphone {
    	@media only screen and (min-width: 480px) { @content; }
    }
    @else if $media == ipad {
    	@media only screen and (min-width: 768px) { @content; }
    }
    @else if $media == desktop {
    	@media only screen and (min-width: 960px) { @content; }
    }
}

Now we can write things like:

.container {
    width: 95%;
    @include respond-to(iphone) { width: 90%; }
    @include respond-to(ipad) { width: 80%; }
    @include respond-to(desktop) { width: 70%; }
}

This makes mobile first, in my opinion a lot easier. This article on The Sass Way, which is where I got the idea from.

Notable extensions

Compass just goes hand in hand with SASS, I feel like you can't have one without the other, it saves time within saving time. Without Compass you'd have to write all the box-shadow, border-radius, gradient mixins yourself.

Stitch

Stitch is a CSS pattern framework for Compass. It's got some nice features and ideas around it, particularly prefix(). I have found it can bloat your compiled CSS a little so be wary of what you're using and not using.

Animate.sass

Animate.sass Based on Animate.css this is a nice easy way to use the animations with limited hassle. For example @include animation(fadeIn, .5s, ease, forwards). Take great care with this otherwise you could end up with 10000 lines of CSS bloat.

Wrap up

So these are a few of the tips that save me a lot of time using SASS. I haven't really covered Compass in this post, it sort of goes without saying that Compass adds a lot of efficiency. I hope this post has been helpful. I shall be writing more about my uses of SASS soon.

It’s a minimal theme and has an individual layout for each post format to give a bit of a feel for each type of post it is. I think it adds a nice touch, though the rest of the design remains consistent the post formats have their own look.

I’ve included a child theme with a basic stylesheet of the things I generally recommend you change colour wise. Which should make it a breeze for editing. More so if you have experience using SASS/Compass as with the variables, change a couple of them and you have a new colour scheme.

I’m looking to improve it over time and try add features/general requests to make it a better theme as time passes. Anyway there’s more information on Superhug.

View the theme

Firsts

Typically personal websites are used for experimentation and a chance to have full control over what you do with your website. This is always the case with me.

Mobile first

This was the first site I'd taken a mobile first approach with, and by no means have I done it perfect really. I have always tried to keep the content cruft to a minimum on my personal website, so that's never really an issue. I started from the bottom and generally worked my way up and I'm pleased with how the website changes to fit the viewport. Though my media queries are a little messed up I got that approach wrong, something I may work on correcting. It was a totally new approach starting from the smallest width to the highest. It's definitely something to get used to and it slipped my mind on occasion that I was using a mobile first approach (as in I applied styles that should have been in larger width media queries instead of the base). Either way my mobile version has come out much better taking this approach.

CSS preprocessors

My other first was this was my first site I used SASS/Compass with. All I can say is I feel it's a godsend, using compass' mixins is such a time saver and allows less room for error. I've heard that it's not all good with CSS preprocessors, such as performance and bloat. I purposely avoid nesting too deep as I hate being too specific and it makes it harder to organise your CSS (Not all my CSS is organised how it should be, but I do fairly well). I've generally focused on performance overall with this website. I'm fairly proud of the speed of most pages, they load under 2 seconds mostly! Back on track, I like how you can avoid adding presentational classes if you need to have something to use elsewhere with @extend. I think this is somewhat an Object Oriented CSS approach? I don't have to remember class names, or where I need to apply them. I just extend a bit of code and it has worked well for me in most cases.

Design/content decisions

Most of this design is pretty flexible in the way that I can change it colour wise. It's easy for me to make minor changes like that if I'm to get bored of the colours within the website. SASS makes this incredibly easy with variables and I can just change the required ones and done.

As always I go with a big opening heading on each page. I'm not sure why this always follows suit in my website throughout (any version), it just follows the design and consistency of it. A plan is to add an accompanying illustration of some sort to each of the main headings to add a bit more appeal to each page — it will be something I can use to practice illustration with anyway. My designs are generally always centred round the content. After all, it's something I'm trying to sell, generally, my work/skills.

The idea for the design overall was minimal, easy to read (I'll probably be making tweaks with the typography over time) and something new/fresh as always. I felt I was growing in understanding of how the content first approach worked with my last version that I was fairly pleased with how I'd trimmed the website down, that there wasn't a large amount that got cut out this time. Just rework most of the content to be more to the point. I decided I would add my about page back, which is still in progress (I want to do something a little more adventurous with the layout and generally haven't had time lately to do it). All content you find at the larger resolutions, you'll find at the smaller resolutions. No hidden content here.

I can't wait for the flexible box model/content regions

Something concrete that allows for more control over shifting your content about, to be final. I have used the old flexbox version on the home page, to see what I could do with it. I was pretty happy with how it worked, just not the extra markup I had to add as a container for the boxes that I wanted to be flexible. Although it's nothing to add an extra container, I don't think it should have to come down to that. Though the changes I used was for the mobile focused version, I have my availability and contact details the first lot of content you see as you scroll. It's not this way in the markup.

Paged portfolio

I also went back to a paged version of my portfolio. As I felt that it's my work and it deserves some explanation for each of the designs and the decisions behind them. It's better than filling the page with images.

Media queries in action

Here are some of the differences between the mobile and desktop versions.

I think that's it

I think that's everything of importance really about this version. I think this version will be of many tweaks, changing and making it better with time.]]> Website, 2011-12-30T18:41:09+00:00 http://iamsteve.me/blog/entry/wordpress_post_formats http://iamsteve.me/blog/entry/wordpress_post_formats#When:19:53:14Z I haven't done much Wordpress development as of late, so I was a bit rusty, last time I used it properly was around the release of 3.0. I decided to try out Wordpress again. I discovered post formats, looked into them, found they were like what Tumblr offers. Though I'd got that wrong they have some constraints, so for the time I've been figuring them out and consider this to be one of the best ways to use them.

Set it up

We need to make sure they're set up, you can include as few or as many as you want, I've included all that Wordpress supports: add_theme_support('post-formats', array('aside', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video', 'audio')); place this code in your functions.php file. More information about the types can be found in the codex.

Using the post formats

Detecting a post format is simple, we use has_post_format('the format') to give what I ended up with this simplified loop:

<?php if (have_posts()) : ?>	
	<?php while (have_posts()) : the_post(); 
		if (has_post_format('aside')) {
			get_template_part('loop', 'aside');
		} 
		else if(has_post_format('gallery')) {
			get_template_part('loop', 'gallery');
		}
		else if(has_post_format('audio')) {
			get_template_part('loop', 'audio');
		}
		else if(has_post_format('video')) {
			get_template_part('loop', 'video');
		}
		else if(has_post_format('quote')) {
			get_template_part('loop', 'quote');
		}
		else if(has_post_format('status')) {
			get_template_part('loop', 'status');
		}
		else if(has_post_format('chat')) {
			get_template_part('loop', 'chat');
		} 
		else if(has_post_format('image')) {
			get_template_part('loop', 'image');
		} 
		else if(has_post_format('link')) {
			get_template_part('loop', 'link');
		} 
		else if(has_post_format('gallery')) {
			get_template_part('loop', 'gallery');
		}
		else {
			get_template_part('loop', 'standard');
		} 
	?>
<?php endwhile; ?>

What I'm doing here is using get_template_part() to get my custom layout for each post. It looks for each file named loop-format and includes it. I'm sure there should be a simple way than all those else if blocks, but I haven't come across it yet, or a method that works at least.

After you've set up the loop

I recommend you get the post formats plugin. It adds a nice UI to make it a little more tumblr like. I also recommend that if you change theme and it doesn't support the plugin you install post formats fallback plugin this will put all the content into the right field.

Using the fields from the plugin

The plugin adds several fields throughout to each format on adding a post. This is where you will need to make your custom loops, it's not entirely obvious to begin with how to use the fields, take a look through each of the files in the plugin views folder. If you include the piece of code that looks like <?php echo esc_attr(get_post_meta($post->ID, '_format_link_url', true)); ?> from each one into your own files. This will output the content for you. Here is an example of one of mine for a link post:

<article role="article" class="link">
    <?php include('post_header.php'); ?>
        <div class="entry">
            <a href="<?php echo esc_attr(get_post_meta($post->ID, '_format_link_url', true)); ?>"><?php echo esc_attr(get_post_meta($post->ID, '_format_link_url', true)); ?></a>
        </div>
    <?php include('meta.php'); ?>
</article>

Obviously you may want some content to follow that and it won't be included just make sure you include your the_content() above or below it.

That's it

I hope this helps, I felt like sharing as these are some of the stumbling blocks I came across with the post formats. I will edit this post as I learn more of utilising them better.

Nonetheless, there is probably bits that aren’t totally perfect (the contact page needs the responsiveness sorting properly). I have been working on this design on and off I think for the past 6 months. I spent 2 months of that totally design/web free, it was a break I sorely needed, but that’s more of a personal matter. Anyway I’m pleased with the design and overall functioning of it, it adapts nicely for devices on iOS 5 particularly the navigation — the one you’ll see if you resized is altered for iOS 5. Anyway more of that in the follow up post.

Demo

Inline-block demo.

The code

article {
display: inline-block;
vertical-align: top;
margin: 0 2.5% 0 0;
padding: 2.5%;
width: 48.5%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* our helpful friend, remove and add different values if you want older browser support. */
}
/* remove margin on right side of every 2nd article */
article:nth-of-type(even) {
margin: 0;
}

This rightly will place each of our articles side by side. It works for multiple elements you want side by side obviously adjust the width as needed. This may seem slightly inefficient at first but it also removes the need for clearing, through using the clearfix or just a normal clear depending on the situation. Which in turn we don't have to add an additional class to our code.

Explaining further

What exactly is the inline-block property, quoting the spec:

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

Simply it's allowing us to treat it as both a block and inline element. As block level elements can have a width and height applied to them whereas inline can't. Though a block level element fills its whole line so to say and inline as the name is they go inline. Which allows us to display them side by side with a width we desire.

Now what's the vertical-align: top; for? It's simply to align them to the top of the parent element so that they all align nicely. The demo will reveal all.

Finishing up

This won't work for every situation sometimes a float will be needed, and as for browser support it's good, I couldn't find anything in particular about it not being supported in IE 8, but I from what I read IE 7 supports it but only on elements that are inline normally.

Demo

Inline-block demo.

So since the update I haven’t really posted. The reason being I have had a lot of deadlines to meet and keep up with, particularly the past 2 weeks I’ve had at least 4 university assignments to hand in, as well as a test and 2 presentations. I’m finally coming to an end with it though I have one more assignment to do and hopefully nothing else will pop up in the time. So once this final assignment is done, I’m going to try make an effort to do some more posts and see where it leads me.

I have also recently got a job as a frontend web developer at CreativeLynx. I’m yet to start as I’ve had university to deal with, I feel quite lucky to have found the job and to have been given it. On the basis that over November and part of December last year I was looking for a placement, as to which I found no one who was willing to give me a try the least. I’m looking forward to starting and hoping I can get into a rhythm of being able to get up at 6:30am Monday to Friday, as what I’m used to now is hugely different. It worries me so I’ll have to start adapting now for when I do start.

My advice to fellow people like me

I was fairly worried about finding a job when graduating but a lot begin to go up for graduates around the start of March, while this is a good time to start looking. Make considerations for whether you want a break or not, this is a big deciding part of when you finish, do you want a break? More than likely the answer is yes, but you may think what if it takes 6 months to find a job? Well that’s a long break and some people will find it more difficult than others to find a job. The jobs are all available now, which is why I went ahead and found one, I thought it would be a definite missed opportunity. It depends on you as a person and I thought it was the best thing to do.

If you don’t have industry experience like me and you want a break, I would start looking fairly soon for a job, as I’m not sure how often graduate jobs stay around for but they certainly are more vast between March and May (I’m guessing). Even if you end up having a year out, it won’t be the end of the world as you can try gain improvement in your skills and favourite areas. You won’t have the nag of university work, so while you don’t have a job you should focus on what’s probably been said a lot to you ‘get your name out there’. It’s difficult, but joining in communities such as Forrst, Dribbble and LoveDsgn to name a few. These places generally offer feedback too and can offer advice, which can be super helpful.

Building a portfolio!

On the side projects thing these will help strengthen your portfolio. You may not get clients, but that’s not the end of the world. Have you seen a product/service which you think is great but you think the design, usability and accessibility of the website could be better? Why not produce a redesign for that and justify your decisions heavily and based on your knowledge of what you think could be better. Make sure to add this description to the work within your portfolio, maybe write a blog post about it.

Push the boundaries, use your skills currently and test them. Is there something you think is possible with just CSS? Do it. Experimenting can be fun and can help you to learn more and demonstrate your knowledge, upload it and create a file directory for it. Place a link to it in your portfolio and nudge people towards viewing your different experiments.

Helpful?

Hopefully this has been helpful for you and not too long, but it’s advice I felt I could do with sharing.

Reasons for a redesign

• Something more simplified for responsiveness;
• Obviously something new and fresh;
• Better focus on content and layout of content;
• Try to refine the design and rid unneeded stuff;
• More editorial friendly layout for blog posts.

These are just reasons I found needing a redesign with V2. The biggest one was to make it responsive, while possible with V2 I didn’t feel like attempting to while it was live and risk messing the site up, it would’ve took a lot of media queries and adjustments too. Though while V3 isn’t lacking in the amount of media queries and changes in CSS, it works much nicer I think. The difficulties were with the slider and main page headings.

About the design itself

I started this design in the middle of November last year. I was aiming to create a website with fewer pages; home, blog, portfolio and downloads. Though I thought about the implications of people expecting a contact page, so that was added. I got rid of my about page and put it on the home page and refined the content of it; to be much less, but still have the same value. Why I did this was I felt my about page the least relevant page (unfortunately). So adding it to the homepage gave it more visibility, hopefully people will read it and such.

Each page has it’s reasons for it’s design. My portfolio was something of experimentation, but also to reduce the amount of pages. I thought of it from a usability perspective and I like viewing portfolios all on one page. The responsiveness allows all portfolio images to be shown for one long scroll. Though you may think experimentation? When you view a large image of each item it opens in a modal window which is done with CSS. Worked out pretty well, though it’s not perfect.

The downloads page is fairly simple, similar to the portfolio but without the modal box. Display a picture, information needed about each download and that’s that keep it simple. The same applies for the contact page, just the needed information — contact form, ways to contact me and social networks.

The blog page was one of the most important things to me, I have always wanted to start the editorial/art direction type blog posts, but I can’t always do it on every post. So I thought about having separate a separate articles page or just stick to blog posts only on things I can give a nice editorial design to. I just went for the option where I post what I want, base it round the categories and use the great lettering.js to add a bit of fancy/difference to each page (this wasn’t around when I was designing V2 to begin with). The pages are just kept fairly minimal so customisation is easy done. You should begin to notice this as I begin to post newer articles.

Inspiration

I honestly can’t remember where any direct inspiration came from, though there are so many out there that inspire me. I just tried to go for a design without the direct input of inspiration, searching for it and using that to spur me on. I had in my head what I wanted to do and that was to make a better website for myself, content, updating and reading for the user. Though I must say Trent Walton and Brian Hoff inspire me a lot with the way I design.

WordPress to ExpressionEngine

Around the end of December I purchased the Fusion Ads bundle which included ExpressionEngine, probably the sole reason I got the bundle. As I had always wanted to try ExpressionEngine and see what the hype was about and learn how to use it, as a thing, to add to the list of things I can do. In some respects I’m missing some of the functionality of WordPress but enjoying some of the added benefits of ExpressionEngine. Though I’m calling it too early to decide whether the switch is beneficial but, the best thing about ExpressionEngine is I definitely find making a template less of a chore.

The learning curve for using ExpressionEngine was pretty simple and using the screencasts which came with the Fusion bundle were a great, great help. The biggest pain was my older posts from WordPress, I couldn’t find a simple transfer to and from, so I did it manually. Fortunately I didn’t have too many posts. I still have a lot to learn with using ExpressionEngine, so that’s that.

Thanks!

Thanks for reading if you did, these posts are for logging my ideas of somewhat I hope to achieve with the redesign of my websites and see if I achieve it until the next redesign. There are probably a few tweaks to be made over time still to perfect it totally, but hopefully they’ll be done soon. Most likely with the responsive side of things.

Other news

I’ve also been working on a competition entry within Manchester for Drivesafe, it ends at midnight tonight (17th November). So the results for it should be announced relatively soon after, I’m hoping it’ll be a day or so. At the same time I’m praying I win as it will be a pretty big achievement and having my work saw by a lot more people than this site gets. For what we had to do; the idea was vague, we had to design a landing page and branding for Drivesafe and have a button saying “Enter site” but somehow get across the dangers of using handheld devices in public, with a bit of content. I’m quite pleased with my entry and I’ll be putting it in my portfolio fairly soon, probably after the winner is announced.

Overview of my day

I went of course, to hopefully get a good idea of what companies want and whether they have anything going. Some chats were fairly brief, some longer, the longer ones were the jobs I was mainly interested in and they were positive about my work and wanted to see my portfolio (for what the University wifi allowed…) Throughout the few hours the title I usually give what I do “web designer” lost the meaning I thought it had. That meaning I do designing of sites, coding of websites, and so on. What I considered to be a full requirement, and what I think should be, wasn’t what every company looked for but instead I was talking to people then telling them I’m a front-end web developer (as what they called it, I didn’t think there was much difference but everyone has their own opinion). I prefer web designer if I’m honest – much shorter and just what I’m used to.

I went to a session they have called “pimp my CV”, a definite eye opener, and though my portfolio does more talking than my CV, I think I’ll be definitely going to rework my CV a little. I do wish I’d got an opinion on it but I was more interested in finding a potential placement and showing my work.

Conclusion

I’ve found it extremely helpful as a whole, and it gave me a great understanding of what companies want. Though I would take any creative web job at the moment, just for experience. I think I’d like a role where I design and I code the websites that I would be making. Then again I’d have to see how that went with a job, I’m not 100% fond of coding but I like to keep my skills sharp and learn more. If it is a specialised job I do get it’ll depend on the opportunities, but I’d take the designer role every time. I recommend anyone within the central Manchester area to attend. Even if you have a job, just purely to meet people if you don’t have your name out there as much as you’d like.

Though I definitely need to expand my portfolio! Slowly but surely working on that though.

Covering all grounds

I can settle for the times I need it to use Chrome, I thought which would be generally not too impacting, though that depends on how much I need to watch online. I’m a frequent user of BBC iPlayer and 4od, so my Chrome usage will be up a fair bit.

Missing Youtube? Easily covered for the most part I have the Youtube5 Safari extension and so far is doing the job greatly. It also has support for sites like Vimeo and Facebook.

Improvements?

Overall it’s too early to say, but switching between Chrome and Safari for the times I really do need Flash, I’m not arguing as it won’t be a process still running when I’m done with Chrome. I do think it’s going to be a helpful improvement for the battery and hopefully performance.

Conclusion

While I wish I could be Flash free (unless it becomes more reliable and such), it’s a nice alternative to not wonder if the page will crash when you know Flash will be there. Flash isn’t going anywhere, yet, but if the alternatives weren’t growing to Flash this wouldn’t be possible. Let’s hope it lasts, well I do anyway.

Dribbble is show and tell for designers, developers and other creatives. Share sneak peeks of your work as “shots” — small screenshots of the designs and applications you’re working on.

So for this contest, like every contest related to Dribbble, comment here linking me to a few of your best work or your portfolio. Depending how many entries there is I'll announce the winner by the 3rd November 1pm (GMT). So leave me some method of contacting you either Twitter or your email. You can also enter by emailing me if you wish at steve@iamsteve.me.

So my focus has been on that, as well as my almost 3 month old MacBook Pro and it’s logic board had gone the week before, it’s still in for repair it’s been a week now so I’m a little worried in some ways. So that’s it for now I guess, I’ll be preparing a tutorial as soon as I get my computer back. Which will be how to create a skip to navigation link, which doesn’t affect your site in anyway. It’ll be with jQuery and a sliding div, though it won’t have to be for a skip link, it can be for anything.

jQuery

As always make sure you have jQuery in your code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

The code

$(document).ready(function(){
	var page = window.location.href;
	var name = page.replace(/.+[\/]([^\/]+)$/,'$1');
			
	if ((name === "index.php") || (name == "sitename.com"))  {
		$("#nav .home").addClass("current");
		$("#nav .home").click(function(){return false;});
	}
	else if (name === "portfolio.php") {						
		$("#nav .portfolio").addClass("current");
		$("#nav .portfolio").click(function(){return false;});
	}
	else if (name === "blog.php") {						
		$("#nav .blog").addClass("current");
		$("#nav .blog").click(function(){return false;});
	}
	else {					
		$("#contact .contact").addClass("current");
		$("#contact .contact").click(function(){return false;});
	}
});

Break down

I’m relatively certain this could be done in fewer lines, but as I’m no jQuery expert, I wasn’t able to achieve it in fewer lines. Though this fits my needs perfectly.

The variables

var page = window.location.href;

This first variable is simple assign the URL of the current page to ‘page’

var name = page.replace(/.+[\/]([^\/]+)$/,'$1');

This is a little trickier to understand, it is a regular expression. In short it replaces the whole of the URL with just the end part, so if we had http://site.com/path/to/file.php, we would just have file.php. The longer explanation being; this part of the regular expression /.+[\/]([^\/]+)$/. .+ is looking to match one or more of any characters that match except a newline. [\/] matches any instances of \ or /. ([^\/]+) is matching any grouped sequences and instances of \ or / at the beginning of the line and if there are any more preceding the match, match them too. The $ is to match the end of the line. Finally the $1 matches the first submatch, basically the end of it eg: “index.php”.

The if statement

if ((name === "index.php") || (name == "sitename.com"))  {
		$("#nav .home").addClass("current");
		$("#nav .home").click(function(){return false;});
	}
	else if (name === "portfolio.php") {						
		$("#nav .portfolio").addClass("current");
		$("#nav .portfolio").click(function(){return false;});
	}
	else if (name === "blog.php") {						
		$("#nav .blog").addClass("current");
		$("#nav .blog").click(function(){return false;});
	}
	else {					
		$("#contact .contact").addClass("current");
		$("#contact .contact").click(function(){return false;});
	}
});

This is an if statement which compares the value of name to every possible page you give it. Which obviously if it finds a match to then add a class of ‘current’ to the link of the page. $(”#nav .home”).click(function(){return false;}); simply if the link is clicked then nothing will happen. For the final else I found this a little difficult to match the final page it just doesn’t happen with out a comparison that you get with an else if. That’s where my knowledge falters. I’m sure it can be done some way but I’m relying on a unique body ID to select the final page.

Finishing points

I hope this is of some use to you. It’s an easily adjustable code just add as many extra else if’s before the else and change them as needed and it should do the trick. It’s definitely one for smaller websites of course, where as my University one is only four pages.]]> Code, jQuery, 2010-10-03T00:45:12+00:00 http://iamsteve.me/blog/entry/unique http://iamsteve.me/blog/entry/unique#When:13:35:58Z I’m quite a beginner with jQuery, but recently I made a basic free template on my downloads page, and I wanted to actually try put some of my knowledge to use for once. So I made this little jQuery snippet. Say you want to style a page of your website a little differently to the rest of the other pages, be it you want all the h1 headings on the home page to be green and on your about page blue. With these few lines of code you can have an ID added to the body based on the URL’s ending/page name.

Note: this doesn’t work too well with “beautified” Wordpress URL’s. So if anyone could contribute it’d be great! I’ve had a try which it will be provided at the end, though I couldn’t figure out how to always get the last part of the URL.

Step one: get jQuery

If you haven’t put jQuery on your page, you’ll need to. Here is the Google hosted one if you need it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

The code

Here’s the full code if you don’t want to read an explanation, that’s below.

$(document).ready(function() {
				
  	var pathname = window.location.pathname; // get path after url eg: /blog/page/post_name.
  	var getLast = pathname.match(/.*\/(.*)$/)[1]; // remove every thing before post_name - so /blog/page/ would be removed.
	var truePath = getLast.replace(".php",""); // check if there is a .php extension and remove.
				
		if(truePath === "") { // checks if the body id is blank, if so replace with home this works for if you go to site.com instead of site.com/index.php
			$("body").attr("id","index");
		}
		else { // else replace with the actual page name
			$("body").attr("id",truePath);
		}	
 	});	

The explanation

For those wondering why and how what line does what I’ll try my best to explain.

var pathname = window.location.pathname;

This is a variable called ‘pathname’ which gets the URL’s path name so for example: http://iamsteve.me/something/somethingelse/hello would lead to /something/somethingelse/hello

var getLast = pathname.match(/.*\/(.*)$/)[1];

This is a new variable called ‘getLast’ which gets the ‘pathname’ variable and uses a regular expression (regex) to find all slashes. The [1] is an array that looks for the first position.

var truePath = getLast.replace(”.php”,”“);

This is a further new variable called ‘truePath’ which gets the variable ‘getLast’ and uses replace() to look within the ‘getLast’ variable and seeing if it contains any .php and replace it with nothing which is what ”“ is for. You can also look for whatever you like, it doesn’t need to be a file extension at all.

if(truePath === "") {
  $("body").attr("id","index");
}

This part of the if statement checks the ‘truePath’ variable to see if it’s exactly equal to nothing. This is just incase you type in say a url http://site.com Becau.se window.location.pathname will return nothing. So we need a backup for that.

else {
  $("body").attr("id",truePath);
}

This assigns to the body whatever the variable ‘truePath’ contains if the if statement before it doesn’t return true.

For Wordpress and stuff alike

$(document).ready(function() {
  var ifpath = location.pathname.split('/');
  var pathname = location.pathname.split('/')[2];

  $("body").attr("id",pathname);
});

Basically this is as good as I could do to get working for beautified URL’s which more often than not you will use within Wordpress. The code works relatively the same as above. Just the array controls what is shown as the ID. For example if you have http://site.com/stuff/thing/here With .the array set to [2] you will get ‘thing’ as the ID. Whereas if you changed the array to [3] you would get here. It depends entirely on how your website is structured. Like I said earlier in the post I would greatly appreciate it if anyone had a better idea to post it.

I hope you’ve enjoyed this explanation. Practice makes perfect.

Firstly; the button.

We need a button this can be done with either the actual <button> or just a plain <div>. Though it is possible to use for example a <section> it’s not very semantic, if you were wondering. Though if you are intending on applying this to a section of content for styling then by all means do so.

I’m going to use a button for this example:

<button>Do something!</button>

Now we have our button, albeit bland. Now we want to add some styling, you can also add a class of choice, or if you want to have all buttons styled the way we will do so now, then you might just want to target the button element.

Styling

Looking at the button now to make it 3D, the main make up of the code is the box-shadow. I’ve commented the box-shadow area to show which part of the shadow is doing what. Anyway here’s my code:

button {
	padding: 10px;
	background: #ec6161;
	border: none;
	font: 900 11px/1 Helvetica, Arial, sans-serif;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	border-radius: 10px;
	-webkit-box-shadow: 
	inset 0 -2px 5px rgba(0,0,0,0.1), /* a little shading to add a better effect */
	inset 0 -1px 0 #ff8d8d, /* adds a highlight at the bottom */
	0 4px 0 #b64a4a, /* adds the 3D depth */
	0 6px 4px rgba(0,0,0,0.3); /* makes it seem slightly raised */
}

Note: if you do it with a <div> you will want to put display: inline; into your divs CSS.

That’s the great thing about box-shadow, you have up to 8 shadows to use the way you want. You could also add some texture by adding an image into the background. It’s quite versatile in what you may want to do.

Full code

That’s the basics above, but you may want to make them feel more button like. This is also just as simple, it requires changing the shadow on the hover and active states slightly. So here’s the full code, with some added extras. Of course a demo too.

// for button

button {
	padding: 10px;
	background: #ec6161;
	border: none;
	font: 900 11px/1 Helvetica, Arial, sans-serif;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #ff8d8d,	0 4px 0 #b64a4a, 0 6px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #ff8d8d,	0 4px 0 #b64a4a, 0 6px 4px rgba(0,0,0,0.3);
	box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #ff8d8d,	0 4px 0 #b64a4a, 0 6px 4px rgba(0,0,0,0.3);
	-webkit-transition: background 1.5s ease-out;
	-moz-transition: background 1.5s ease-out; 
	-o-transition: background 1.5s ease-out; 
	transition: background 1.5s ease-out;
}

button:hover {
	background: #da5959;
	-webkit-transition: background .6s ease-in;
	-moz-transition: background .6s ease-in;
	-o-transition: background .6s ease-in;
	transition: background .6s ease-in;
}
button:active {
	-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #ff8d8d,	0 4px 0 #b64a4a, 0 5px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #ff8d8d,	0 4px 0 #b64a4a, 0 5px 2px rgba(0,0,0,0.3);
	box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #ff8d8d,	0 4px 0 #b64a4a, 0 5px 2px rgba(0,0,0,0.3);
}

// for div

div {
	padding: 10px;
	display: inline; /* so it doesn't fill the full screen/div whatever */
	background: #77a8cb;
	border: none;
	font: 900 11px/1 Helvetica, Arial, sans-serif;
	color: rgba(255,255,255,0.85);
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #b0deff,	0 4px 0 #5d86a3, 0 6px 4px rgba(0,0,0,0.3);
	-webkit-transition: background 1.5s ease-out; 
	-moz-transition: background 1.5s ease-out; 
	-o-transition: background 1.5s ease-out; 
	transition: background 1.5s ease-out;
}

div:hover {
	background: #5d86a3;
	-webkit-transition: background .6s ease-in;
	-moz-transition: background .6s ease-in;
	-o-transition: background .6s ease-in;
	transition: background .6s ease-in;
}
div:active {
	-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #b0deff,	0 4px 0 #5d86a3, 0 5px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #b0deff,	0 4px 0 #5d86a3, 0 5px 2px rgba(0,0,0,0.3);
	box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1),	inset 0 -1px 0 #b0deff,	0 4px 0 #5d86a3, 0 5px 2px rgba(0,0,0,0.3);
}

View the demo: 3D buttons.

Well where do I start? Like everyone redesigning their own personal website, it takes a lot for you to design something you truly, truly are happy with. While I’m not truly happy with this redesign, I’m happier than the previous version. I think I went through around 10 different designs, while some may have done more. I completed a fair few in full code and the majority of the pages of that design.

Why this design?

Well it’s a pretty easy to answer that question. I came to this design through chance to an extent. I thought the idea of adding a 3D type depth, was a pretty cool idea. The other challenge I kind of set myself was, being able to do it in as few images as possible and replicating as much in CSS. Which I think I have done very well (just try zooming in and everything apart from the header will remain crisp).

Inspiring buttons

Inspiring designs

The vertical navigation and display of the work helped inspire the recent work on the home page.

Not enough inspiration?

While I have only noted a few examples, they are the ones that played quite a big part. Various websites, articles and such, helped me with ideas for content layout. As that was what the main focus was to me, I want to give users a good experience, a simple experience and not too much ‘blab.’ However I did do a rather large amount of sketches to get a rough idea, far too many to show just on here, as well as Photoshop mockups. Reason being I was trying to go for something that wasn’t really inspired from anywhere, though the overall design probably relates to many things, of course.

Sketches

Albeit poor quality, you will get an understanding as to where I was going!

Firstly, this is what the final sketches look like in my book. The rest below will be of concepts and a couple went further and were almost what I ended up with.

This one almost saw the light of day. I coded the majority of the pages.

A rough idea, which I thought wouldn’t work.

Actual designs

Two of the however many there was, the two which I was most happy with before hand. Both of these examples are in the browser. So there is a couple of things that are out of place, like the pink line and misplaced footer text. Why didn’t I use them? This may be a question of yours but because they weren’t as adaptable/easy to work with for being responsive. This one is much easier to make responsive. While it isn’t at current it will be at some point. I will follow it up with a blog post when it is.

[/caption]

Wrapping up

Well, this turned out to be longer than I’d expected. I had so much to show of how I got to this design you see now and all that I’ve done leading up to it, the post could easily have been twice the length. Basically I wanted to achieve something that would work responsively (when I’ve got the correct CSS in place) and a design which could easily adapt from time to time to make easy changes for blog posts.