Posts Tagged: tutorial

CSS shapes. Images in rounded corner square rotated to 45 degrees (rhombus).

read post

Lately there is a certain trend in web design for using images in geometrical shapes. Shape in-trend changes about once a year. We all remember rounded corner squares, then circles, then hexagons and octagons that used to contain Team members’ happy faces:), right? A Dribbble player rightfully popped up a question: what will be trend of 2014?

I think, it will be a diamond rotated to 45 degrees, with rounded corners. Let’s go ahead and make one with CSS.
demo

Introduction to OOCSS and Responsive Behavior. Designing a one page site with Simple Responsive Template.

read post

breezi_placeit

Working on web projects I used to run into 2 problems time and again. First problem applies to any web design project: as the project grows bigger, CSS gets messier. There was obviously a need for some kind of better system of writing CSS. Second problem applies to responsive websites. The problem is that solely CSS media queries are not enough to make a website truly responsive. Truly responsive website will not only look, but also behave in a responsive way. That means – if we will simplify things a lot – it will serve different assets to different devices. In this tutorial I would like to show you the solutions to those problems, which I think are awesome: OOCSS (stands for Object Oriented CSS) and Responsive Behavior continue reading….

Simple Responsive Template. New freebie from Prowebdesign.

read post


Simple Responsive Template is a continuation of YAMB (Yet Another Responsive Boilerplate) project. This tutorial on YAMB v.1 will give you a short overview of responsive design concept and idea about why YAMB was created. In this article we will mainly speak about how  to use Simple Responsive Template and how it is different from the YAMB v.1.

Yet another boilerplate for responsive (mobile) web design. YAMB.

read post
A new version of this template – YAMB v.2 – is available. Please use the new version. This version of YAMB is not maintained anymore.
YAMB v.2 tutorial and download page


YAMB   is a small set of tools and best practices that allow web designers to build responsive websites faster.
YAMB includes features that are requested by the clients all the time:

  • Fluid grid.
  • Drop-down menu with possibility of unlimited sub-levels or/and mega subs.
  • For small screens drop-down menu is automatically converted into select box.
  • Responsive image slideshow with captions.

Sortable design portfolio with WordPress 3.0, tags and jQuery

read post

If you have many design projects, it is good to let your clients sort them by some criteria like type, industry etc. This tutorial tells you how to build sortable portfolio like PROWEBDESIGN’s. We will also cover how to optionally add jQuery animation effects to the sorting script. PROWEBDESIGN portfolio is made with WordPress 3.0.3… Read more »

Designing websites with scope in mind (or Why PROWEBDESIGN got its version #6)

read post

What to consider, when you design a portfolio site for yourself? In one word – the SCOPE. The scope outlines the general aims and goals of any project. So, what is the scope of designer’s portfolio? WHAT TO KEEP IN MIND WHEN DESIGNING YOUR PORTFOLIO WEBSITE THE “HUMAN FACTOR” How new are you to the design? How large is your portfolio?