Thoughts to record and share

It took me a long time to think about a name

CSS Diary Day One - Overview of Basic CSS Layout

position Property

As the name of this property, position specify the behavior of how to locate the element on the document. There are six different values you can assign to position:

1

position: static|absolute|fixed|relative|initial|inherit;

Static

static is the default value of position. Any element has a position value of static is considered as unpositioned. In this situation property like topor float will be automatically ignored.

Any element has a position value other than static will be considered as positioned

Absolute

An absolutely positioned element is placed relative to it’s closest positioned ancestor, which is the closest parent element whose position value is not staic. If there is no such an element found. Then it will be relative to <body>.

Relative

The element is positioned relative to its normal position. For example, a relatively positioned element with left: 20px; will be added 20 pixels to its left.

If you do not specify any of top, bottom, left, right or float property, relative behaves like static but the element is still considered as positioned.

It is a common trick to use relatively positioned container element with absolutely positioned child elements to layout a page.

display Property - block and inline

The difference between these two is block will take as much horizontal space as possible and have a new line before and after it, while inline will only take the space it need and not have new lines.

Other tips

Remove underline of a hyperlink:

1
2
3

a:link, a:visited {
    text-decoration: none;
}

1
2
3
4
5
6
7
8
9

/* Applys to all descent li's */
li li {
    ...
}

/* Applys to only successor li's */
li > li {
    ...
}

Further Reading

display|CSS-Tricks

Avoid Duplicate CSS Code With Multiple Classes

Today I’ve been trying to re-write a multi-level vertical navigation menu like this one.

My goal is to make a set of vertical bars whose children divs lie on the same level horizontally. The way I did it first was to specify height for each divs explicitly:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<li class="dropdown-submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More options 1</a>
    <div class="dropdown-menu sub-0">Hello</div>
</li>
<li class="dropdown-submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More options 2</a>
    <div class="dropdown-menu sub-1">I'm</div>
</li>
<li class="dropdown-submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More options 3</a>
    <div class="dropdown-menu sub-2">Your</div>
</li>
<li class="dropdown-submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More options 4</a>
    <div class="dropdown-menu sub-3">Dropdown Menu</div>
</li>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.dropdown-submenu > .sub-0 {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    height: 200px;
    width: 400px;
}

.dropdown-submenu > .sub-1 {
    top: -26px;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    height: 200px;
    width: 400px;
}

.dropdown-submenu > .sub-2 {
    top: -52px;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    height: 200px;
    width: 400px;
}

.dropdown-submenu > .sub-3 {
    top: -78px;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    height: 200px;
    width: 400px;
}

As you can easily find out that’s a lot of duplicate code. And over the experience of following MOOC courses with Coursera and Code School, I’ve learnt two sentences – Can you better? and Don’t repeat your self. So after two minutes of thinking, I came up with a better solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.dropdown-submenu > .dropdown-menu {
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    height: 200px;
    width: 400px;
}

.dropdown-submenu > .sub-0 {
    top: 0;
}

.dropdown-submenu > .sub-1 {
    top: -26px;
}

.dropdown-submenu > .sub-2 {
    top: -52px;
}

.dropdown-submenu > .sub-3 {
    top: -78px;
}

Class dropdown-menu takes care of the gereral rules apply to all divs, the other one just handles the specific height that make each of them lies on the same level.

Organizing my CSS code has always been a nightmare to a noob like me. And this exmaple gives me a good starting place to rethink about how to structure CSS more elegantly, and the goodies of using mulitiple, meaning-oriented class names.

I shall admit that this is an ridiculously easy example. However during my no-even-long career as a developer, I have seen many examples where developers with years of experience don’t pay too much attention about code duplication, which sometimes, will fall into such situation.

How I Setup My First Octopress Blog and Create My First Post

After playing around with Octopress’ official documentation. I finally got this blog setup and found this Octopress blogging tool is so awesome that fits all needs for a lazy developer like me. It gives me full control of all the source files in such an easy way(unlike Wordpress). And the deployment process is ridiculously easy:

1
2

rake generate
rake deploy

So if you would like to find an easy-to-use blogging system and you have some basic familarities with unix command line, Octopress is highly recommended.

Octopress’ official guideline is definitely quite helpful. However I still got some problems that’s not covered from their doc while I was going through.

I am on OSX terminal, after cloning the repo and typing in the following command:

1

gem install bundler

I got the following error

1
2

ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

So I saw a stackoverflow question that solves this problem. The answer recommended a way to install tool that controls the ruby version. I spent like an hour but did not get my problem solved. And it was actually one of the comment under the question that solved my problem:

1

sudo gem install bundler

I am not quite sure about what sudo means, but right now, to me, it’s just like providing administrative access, and solves my access denied error.

After setting up all the requirements, the deployment process went pretty easy. I was deploying to Git pages. If this is the first time you are using git hosting service, you might need to wait for a few minutes for your blog to be available on Github’s server.

And, if you type in:

1

rake preview

You should be able to view your blog at localhost:4000

Furthermore, take a look at LiveReload if you got an extra monitor and would like to enjoy some cool stuff done by the real geeks.