About design and nearby

Responsive DHTMLX Grid Table

Posted: January 22nd, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | 2 Comments »

If you ever worked with DHTMLX library and it’s implementation in responsive design.. then you know what I’m talking about :)

By default (if there is not enough width for data grid) a scroll at the bottom of your table appears after page resizing and all your efforts for perfect responsibility are broken.

I solved this issue with a couple of lines of jQuery:

  1. $(window).resize(function () {
  2. if ($(window).width() < 900) {
  3. $(".gridbox").css("width", "100%");
  4. }
  5. });

The idea is to set the width of ‘div’ with id=”gridbox” (where our DHTMLX table is loaded) width:100% after resizing of window (at the code above the window should be resized up to 900px to make it works).

Standalone example: view the Responsive DHTMLX Grid Table in action >>

Related post:
You could be interested to read about jqGrid: How to Make it Responsive (with Twitter Bootstrap).

How to Work with Adobe Color CC (Adobe Kuler) to Enhance your Designs

Posted: November 11th, 2014 | Author: | Filed under: Creative Process, Tips and Tricks | Tags: , , , , , , , | 4 Comments »

I love to use Adobe Color CC app to create color schemes for my designs. That’s pretty easy – a little creativity and modern technology help to save a lot of time generating themes for a project.

The rules for the app are based on a color wheel representation, or how colors arranged according to their chromatic relationship. You can design the theme based on analogous, monochromatic, triad, complementary, compound colors, shades or develop a palette according to your custom rules, which let you add swatches in whichever order.

To start working with Adobe Color CC app you should have an Adobe ID.
After signing in you can check the most popular themes in Adobe community or develop a new one. Well, the last is more interesting as for my mind.

There are a lot of ways to create your own theme, let me share with you my favorite one.

Firstly – being a photographer – I like to work with images :) The second reason is that sometimes you have a particular image that should be used as a major part of the overall look and feel. By using colors from that photograph you create a sweet cohesive color palette that works well.

I use this photo for the tutorial:

'Two boats'

Read the rest of this entry »

A Sweet Decoupage Project

Posted: November 2nd, 2014 | Author: | Filed under: Creative Process, Design and Decorations | Tags: , , | No Comments »

Sometimes is the best way to get rested is to change your occupation. Oh no, I’m not about stop being a web designer.. I’m about being a designer, but not web-related :)
I like to spend time doing little sweet things – like the one below. So let me tell you about decoupage.

Decoupage can be deceptive. By looking at a finished project, you could think that the process is complicated, but it isn’t. All that you need – paper, white glue, paints and an object where to apply your creativity. If you are able to cut and paste, you already know 50% of the techniques involved.

Here is what I started with:

How to decoupage a bottle

Read the rest of this entry »

How to Set Equal Height of Elements

Posted: October 8th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | 1 Comment »

Creating elements with equal height is not as easy as it may first seem. Once I was playing with Twitter Bootstrap 3 layouts trying to make two div elements the same height in the row and do not loose responsibility.

The problem is that I had two columns each with different amount of content. And every column background color stretches only as far down as the height of the content it contains.

There are a lot of proposed CSS solutions (based on height:100%; of all nested elements or on display:table; properties, even smart solution with relative & absolute positioning.. but neither of above didn’t work for me and Bootstrap 3).

So I decided to stick to Javascript:

  1. $( document ).ready(function() {
  2.  
  3.  var heights = $(".inner-page").map(function() {
  4.         return $(this).height();
  5.     }).get(),
  6.  
  7.     maxHeight = Math.max.apply(null, heights);
  8.  
  9.     $(".inner-page").height(maxHeight);
  10.  
  11. });

Read the rest of this entry »

How to Add a Dynamic PHP Copyright Notice in WordPress

Posted: August 21st, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

It’s pretty simple to display a dynamic date in your WordPress site (I do that into the footer area) usually, you just need to add a line of code to your theme (according to WordPress Codex):

  1. < ?php the_date( $format, $before, $after, $echo ); ?>

How to add a dynamic copyright date

So simple php solution in our case to print the current year the code is

  1. < ?php echo date('Y'); ?>

You can modify a little the copyright notice by adding your website’s start year:

  1. &copy; Copyright 2009 < ?php echo date('Y'); ?> All rights reserved

Or even more – start with the website name:

  1. < ?php bloginfo('name'); ?> &copy; Copyright 2009 < ?php echo date('Y'); ?> All rights reserved

Once I found more elegant way to generate a dynamic copyright date based on the published date of your earliest and latest posts (suggested by Philip M. Hofer (Frumph) for a ComicPress WP theme). If your site is less than a [current] year old, then this function will display the current year only.
Read the rest of this entry »

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now