Adaptive Blog Theme: Basic Styles
videos

Adaptive Blog Theme: Basic Styles

on Nov 13th 2012 with 50 comments
Tutorial Details
  • Screencast duration: 31 mins
  • Difficulty: Beginner
  • Topic: CSS
Download Source Files
Demo View It Online
This entry is part 6 of 14 in the Adaptive Blog Theme: From Photoshop to WordPress Session
« PreviousNext »

Having built the majority of our HTML markup, let’s now turn our attention to styling it. We’ll begin by looking at our LESS reset file, then we’ll grab Twitter’s Bootstrap grid CSS, after which we can get slicing our original Photoshop files.

Less, Bootstrap and Slicing our PSD


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Header Styling


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://twitter.com/borowskirafal Rafał Borowski

    What’s with the double colon on the pseudo-class Adi?

    • ianyates

      I’ll jump in here because I’m an interfering fool..

      The difference was introduced with CSS3 when it was deemed necessary to discriminate between pseudo-classes (:hover, :focus etc.) and pseudo-elements (:before, :after etc.)

      Now, you should technically use the double-colon syntax for pseudo-elements (::before) especially as CSS3 brought several new examples into the game (::selection, ::value, ::choices to name just a few).

      However, as IE7 won’t support the double colon, you should consider the purpose of whatever pseudo-elements you’re using and weigh up what kind of support to offer..

      Hope that helps!

      • Adi Purdila
        Author

        Couldn’t have said it better myself :) Thanks for clearing things up Ian.

      • http://twitter.com/borowskirafal Rafał Borowski

        Thanks for clearing things up Ian!

  • Christopher Bishop

    really? Using an image for the logo? How about we embed some fonts with CSS instead. And wouldn’t it be wiser to teach people how to actually code instead teaching to rely on bootstrap with is a horrid framework (markup hell).

    • Adi Purdila
      Author

      Some people who will use the theme might not have a “text-only” logo so I think it makes sense to use an image instead :)

      Not sure I agree with your second point. Being a good web designer/developer also means being able to adapt your workflow by using tools that will make your life easier. In this case, I’m talking about frameworks. In my opinion Bootstrap is a great framework and I think it will benefit loads of people who use it.

      With that said, I’m only using the grid system from Bootstrap which is not that hard to replicate if you wanna code your own. For reference, here’s a similar example on extending Skeleton, made by our very own Ian Yates: http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-widescreen/

      • Christopher Bishop

        Both are hardly semantic. I don’t know how we went from a group of people really caring about semantics to markup hell that is in Bootstrap despite the time advantages it gives (honestly I find it harder to work with because of all the markup).

        I had to redo a site that was in Bootstrap to something with my own markup, It was about 50% or more lighter, more semantic, and easier to manage.

    • ianyates

      WIth fonts (even @font-face) browsers will render the results slightly differently (think small details like kerning); where logos and branding are concerned that ain’t good enough! Vectors are an option, so svg would be okay (even on retina screens), but there’s nothing wrong with sticking to an image :)

      • Christopher Bishop

        ok, I admit, I agree to your point there.

  • Al

    guess I will have to learn something about LESS , no idea how it actually works but looks like it generates code to be used in style.css. not sure how it connects to the demo version of style.css but that is part of learning what it does and how it works.

    • ianyates
    • Adi Purdila
      Author

      You basically have to compile that LESS file into a CSS file. There are 2 ways to do that:

      1. Use the less.js from their website: http://lesscss.org/

      2. Use something like LiveReload which monitors a specific folder in order to detect file changes and, if necessary, it can also compile LESS :)

      • http://twitter.com/borowskirafal Rafał Borowski

        or if you’re using Windows I suggest WinLess

    • Al

      tried linking to the styles.less file and calling in the less.js file in the head area of the demo code on IE8, Chrome (latest version) and FF. change works only in FF, not Chrome or IE8, not sure if it works in IE8 at all but did expect it to work in Chrome (as per the LESS page documentation). still working on it, really neat way to generate CSS code.

      Al

  • http://twitter.com/borowskirafal Rafał Borowski

    Just a quick question Adi. Are you going to show the “responsive coding” part or you just included it (styles from bootstrap) and going to say “if you want it responsive you’re good to go so try to do it yourself”? :)

    • Adi Purdila
      Author

      Hi Rafal,

      Sorry about the late reply, this slipped past me somehow :D If you’re talking about the grid, then no, I’m using the Bootstrap responsive grid. If you’re talking about the whole responsiveness of the layout then I will be coding that towards the end of the CSS tutorials.

  • limpa

    First of all, this series rocks, been waiting for something like this since the skeleton one.

    Maby you should do a sprite for the article-meta-comments? Or just make it in css.

  • http://laranz.in/ lawrence77

    @adipurdila:disqus OR @ianyates:disqus Which is the best Responsive Grid System?? (IE7+, Chrome, Firefox)

    • ianyates

      That’s not really a question which is going to get you a definitive answer! There are heaps of grid systems, tools and frameworks available – all have their selling points and their relative downsides.

      The more involved frameworks (like Bootstrap and Zurb’s Foundation) are very capable, but can often be like cracking a nut with an anti-tank missile – way more features and overhead than most projects need. It’s therefore a good idea to play with as many systems as you can find, strip them down to the elements you’re most in need of, then build from there. Adi’s done that in this series by using just the grid from Bootstrap’s pile of features.

      You can expect more on frameworks and grid systems on Webdesigntuts+ in the near future :)

      • http://laranz.in/ lawrence77

        Thanks for clearing up Ian, that showed some path. Yeah I read in comments that Adi is gonna use twitter bootstrap’s grid system and waiting to read those type of grid tuts too :)

        • ianyates

          The issue at hand here is that media queries are not supported in IE8 or earlier. This means that any grid system which relies on media queries will be less effective in legacy browsers.

          One approach which I really like, is to develop mobile first so that IE8 (ignoring all media queries) is served a mobile experience. You can target IE8 specifically and make sure the maximum width of the container element is a reasonable size (instead of full screen). Joni Korpi (creator of http://goldengridsystem.com) talks about it in his blog post Leaving Old Internet Explorer Behind.

          Alternatively, go with any grid system you want and use a JavaScript polyfill like respond.js or css3-media-queries.js which force older browsers to recognise and parse media queries.

          • http://laranz.in/ lawrence77

            Thanks mate for a clear explanation ;)

            I will look through those cute little .js ‘es. :)

  • John

    for some reason, i cant make livereload compile the less file :S
    im using sublime text 2, with the livereload package installed, chrome with the livereload extension
    if i write , css syntax works, less doesnt.
    doesnt work either

    what should i write there? what file should i be editing in?

    • ianyates

      Hi John, you don’t need to link to the styles.less file from your html document, you need to link to the styles.css file. Once you have livereload setup to compile your .less file, it will automatically output everything to your .css file.

      So:

      - Download the source files from the tutorial.
      - Fire up LiveReload and ask it to watch the project folder (in the case of our source files the “starting_blocks” folder).
      - Check the “Compile” checkbox (see screenshot) which will ask LiveReload to compile styles.less each time you save it.
      - By default, it will see which files require compiling, but you can check that, plus state where you want the .css outputted to, by hitting “Options..” (again, see screenshot).
      - Use the Chrome browser extension, or the JS snippet to connect LiveReload to you browser.
      - That’s it!

      Hope that helps :)

      • Andy

        I’m having the same problem as well even after following your instructions.

        Another strange problem i’m having in chrome only, is that the images inside the tag will not show when the class name has a hyphen in it. So have to change to to get the image to appear. Can’t figure out why.

        • Abbas

          I was having the same exact problem, but fixed it! Follow everything ianyates says, then download the source file provided above. Once you’ve done so, open his styles.less file and copy/paste it (where ever you’ve reached) into yours, then it should work!

          I believe he may have added a few lines of code into his less file to get it working the way you see. Anyway that should fix it for you!

      • John

        ohh i see..so adi has the app running on the background right?
        i would like to know, can sublime text+livereload package compile the file on the fly? so i dont have to use any app (btw, im using windows..i heard of winless)
        but what i really really would love to know is, a way to make chrome work with the local less.js x__x otherwise, i have to use firefox =/

        thanks ;)

  • Janis

    Hello! How do save for web (in photoshop) and get only the selected layer (or group) you want? Why isn’t
    the whole page in there?

  • http://twitter.com/ArgirisGeor Argiris Georgiadis

    Thanks for those great videos Adi. I have a problem though. I am not a beginner on HTML/CSS and also know a little bit more than the basics of PHP. I watched all the videos until now cause I wanted to see the entire process “From PS to WP” (not much experienced on WP, started learning recently about WP theme dev). When linking the “bootstrap.css” I notice several changes but sidebar still appears below the articles container. I watched the video about 10 times… can’t figure my mistake out… “styles.less” is connected to “styles.css” through WinLess and works fine so I suppose there is something wrong in “bootsrap.css” file… Anyone experienced the same problem? Thanks in advance.

    • Adi Purdila
      Author

      Hmm, that would be caused by some extra width on the left hand container which forces the sidebar to display below the content…. weird. Can you link to a live demo?

      Thanks!

      • Guest

        I replaced my “index.html” with yours and seems to work fine but I dont like using source files for my own copy of a theme. Does the source file differ from the source file that came out of those videos? As I’ve noticed there are some extra lines on yours but it requires a lot of money to check them one by one. I’m sure the problem is not cause of any typos, I checked my code a lot of times.

        • http://twitter.com/ArgirisGeor Argiris Georgiadis

          I replaced my “index.html” with yours and seems to work fine but I dont like using source files for my own copy of a theme. Does the source file differ from the file that came out of those videos? As I’ve noticed there are some extra lines on yours but it requires a lot of time*** (probably was thinkin’ about money when typing :P) to check them one by one. I’m sure the problem is not cause of any typos, I checked my code a lot of times.

          • Adi Purdila
            Author

            They shouldn’t be different, at least not on a major scale. I can’t do much else without a live demo tho… can you email me a draft of your WIP site so I can have a look?

  • http://www.facebook.com/abohay Ahmed Amin

    i don’t know what should attach with the html markup the less or css and the variables not working

  • http://www.facebook.com/profile.php?id=1409411974 আহমদ শরীফ

    Adil done a great jab.But i think some of them are confusing to nobice.For example in your screencast you are working on styles.less file but its not included in head section of the index file.

    you made this responsive but you did not add the bootstrap-responsive.css file in header section !!!

    But how it going to be responsive ??? please explain such technique more sepcifically then it would be better for new learner.Like how less css preprocessor works, how responsive works without adding bootstrap-responsive.css file.

    I think many of them has the same question.

  • http://www.facebook.com/profile.php?id=1409411974 আহমদ শরীফ

    @ianyates:disqus & @adipurdila:disqus
    I am wasting plenty of hours to

  • Tomz

    Thank you for your good articles..
    I’m learning with your series (adaptive-blog-theme-from-photoshop-to-wordpress) So excited!
    Crystal Clear :)

  • Ryan Belisle

    I’m curious to know how you are just selecting layers and automatically getting the Save to Web export with the graphic on a transparent bg and trimmed automatically? Do you have a PS action setup to do that?

    • Adi Purdila
      • http://www.facebook.com/derekjbeachler Derek Jay

        I followed that video step by step… and it keeps taking the layer. I can’t get it to only take the 4×4 selection at the beginning.

        • Adi Purdila
          Author

          Well, using that action you can only export layers on groups, not selections.

          Try using Ctrl+Shift+C to copy everything in your page instead of simple Ctrl+C, that should activate the clipboard preset.

          • http://www.facebook.com/derekjbeachler Derek Jay

            Thanks for the ctrl+shift+click, and the quick response. Works great.

      • http://www.facebook.com/derekjbeachler Derek Jay

        Also… I tried to figure it out myself…and I’m assuming you copy the selection, open a new file using the “clipboard” preset and then I’m stuck because I’m using Windows & CS6 and when I copy something and go to File > New the Preset – Clipboard is always grey’d out…can’t click it.

        Tried googling the problem and have found very little helpful content.

  • Andrew Jones

    Just got to the end of css2-n.mov and though I’m sure I’ve not mistyped anything, my top-menu-container has a height of 63px, therefore using the code upto this point in the video there is a larger gap above the actual menu links when displayed in Chrome 27.0.1453.110 on my PC than is shown in the video. Has something slipped past me that I haven’t noticed?

    • Andrew Jones

      I have noticed that by removing the margin-bottom: 1.5em; from all p, ul and ol elements the problem is resolved, but this can’t be correct as it affects the rest of the document.

      • Adi Purdila
        Author

        Hi Andrew,

        Can you give me a link so I can take a look?

        Thanks.

        • Andrew Jones

          Hi Adi, I thought I’d load up your original copy of index.html from the adaptive html folder before I uploaded what I have so far to an accessible site. It seems I did mistype something somewhere in the html. Thanks for getting back so promptly.

          PS. Just found the culprit. I’d missed off the clearfix class on the top-menu-navigation. Duh ;P