MyFreeWeb in English

float: both;

CSSPrefixer

Well, there is eCSStender, a solution for keeping your CSS code clean. And it sucks.

It sucks because it doesn't work without Javascript and because it's a big, slow client-side script. And, of course, an extra HTTP request (unless you combine it with your code - and browsers will re-download it when you'll update your code).

I like the idea of keeping stylesheets clean, so I made a server-side thingy. Meet CSSPrefixer!

This awesome Python app rewrites your stylesheets, adding vendor-prefixed versions of CSS3 rules. It's based on cssutils, so it works only with valid CSS. But cssutils works fine with popular hacks, so it's OK.

Creating scalable CSS circles

Everybody loves circles (mostly script.aculo.us). But these circles have their width and height defined in pixels. That sucks!
You thought you can't make the circles without exact sizes in px? You can.
Picture_1
We'll use a little jQuery trick — it will set width == height.

wh = $('.circle').css('height');
$('.circle').css({ width: wh });​

And the CSS:
.circle {
    text-align: center;
    border-radius: 9000em;
    -webkit-border-radius: 9000em;
    -moz-border-radius: 9000em;
    
    font: normal normal bold 4em Helvetica;
    background: black; color: lime;
}​
Test it here.
Ok, we can zoom in — everything will be OK. It will be perfect with different font sizes.

But there's two problems now: changing font sizes on the fly and zooming before opening the page. We'll use the excellent jQEm plugin to solve the first problem. Let's put the trick in a function and call it on the emchange event:

function yaycircles () {
    wh = $('.circle').css('height');
    $('.circle').css({ width: wh });
}
yaycircles();

$('.circle').bind('emchange', function () {
    yaycircles();
});​

It rocks now :) I don't know how to solve the second problem, but I think that no one will zoom before opening the page.

Designing an iPad web application with jQTouch and Invisible CSS

If you know jQuery and iPhone, you must know jQTouch. It's a very awesome plugin for iPhone web apps. It supports animation, geolocation, swipes... well, everything. And these apps (made with jQT) aren't limited to iPhone — I can use them on my Windows Mobile phone with Opera 10 :)

So imagine that we need a to-do app. But first you must know the difference between iPhone and iPad applications.

iPhone ones can display only one screen — list of items or one of these items.

iPad ones can display both at the same time. Just because of the biiiiig screen! (we're focusing on landscape mode right now)

Let's design this app. Just one screen with no functionality — I said «design».

oooooooooooooooo

<!DOCTYPE html>
<html>
<head>
  <title>iPad To-do</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="http://krosswordr.ru/site_media/i/jqtouch/jqtouch.min.css" /> 
  <link rel="stylesheet" href="http://krosswordr.ru/site_media/i/themes/apple/theme.min.css" /> 
</head>
<body>
  <div id="main" class="current">
    <div class="toolbar"><h1>iPad To-do</h1></div>
    <ul class="rounded">
      <li class="arrow">Inbox</li>
      <li class="arrow">Today</li>
      <li class="arrow">Tomorrow</li>
      <li class="arrow">Scheduled</li>
      <li class="arrow">All tasks</li>
    </ul>
  </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://krosswordr.ru/site_media/i/jqtouch/jqtouch.min.js"></script>
<script type="text/javascript">
  $(window).load(function(){
  $.jQTouch();
  });
</script> 
</body>
</html>

Well, it was easy. If you want to make an app for iPhone, you should add another screen now. But we want it for the iPad, right? My latest creation, Invisible CSS Framework comes right there. We'll make two columns instead.

this code! fork it!

That's right. It's awesome! Now it's your job to add functionality and make a better design ;) And follow me on Twitter.

Why I don't like CSS grids

Hey, man! CSS grid systems is fixed layouts. Elements' size in px - so 2002! I can't zoom in normally (and just read) - I need to scroll more. I can't make the window smaller (and just read) - I need to scroll more. Why?

So let me show an alternative. The... Invisible CSS framework!
Picture_2
I've been using resizeable layouts for a long time, so I decided to strip out the base. Don't Repeat Yourself, right?
<aside class="sideleft">
My cool sidebar.
</aside>
<section class="withls"> <!-- that means "with left sidebar" -->
Lorem ipsum dolor sit amet...
</section>
As you see, it's easy to use.
But don't think that you can't create something complex with it. Look:
Picture_1
Invisible contains a reset, font settings, some base margins, 50/50 and classic 2/3-column layouts.
It is modular and written in CleverCSS - the Pythonic CSS. Yeah, compiled with pake.
Download? Get it and use it - it's public domain! Also you can check out the source ( bzr branch lp:invisible ) and compile it by yourself - for example, with less modules. But you need clevercss and cssutils for that.