tag (css)

archive

adding paths to the lessc compiler Jul
06 1
2

So you need to compile your less files but you've put the files somewhere else in your directory structure and need to add paths for lessc to search.

There is an undocumented option include-path that does just this. The source code looks like:

        case 'include-path':
            options.paths = match[2].split(os.type().match(/Windows/) ? ';' : ':')
                .map(function(p) {
                    if (p) {
                      return path.resolve(process.cwd(), p);
                    }
                });
            break;

which if you read it carefully tells you it can accept one or more directories separated by ":" or ';' if you're on windows. So, to include new paths for lessc to search you can pass in the directories like so:

lessc --include-path="/path/to/directory/" styles.less
lessc --include-path="/path/to/directory/:/path/to/another/directory/" main.less > styles.css

comments

css3 border radius May
18 1
0

I keep having to look up the definitions for CSS border radius when it comes to supporting the Mozilla and Webkit specific styles. I'm pasting this here for easy reference.

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;

-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;

border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 4px;

comments

anchoring a footer to the bottom of the html page using css Apr
03 1
0

It's a common need to anchor a footer to the bottom of your web page. It's a tricky problem because you need to account for both large and small content. I've seen people suggest ass-backward ways of doing this with JavaScript. You can achieve this strictly with HTML and CSS with minimal bloat to your markup. All you need is a container div.

Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest the footer with position: absolute, bottom: 0;

/* css */
html, body {
    height: 100%;
}

#container {
    position: relative;
    min-height: 100%;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

You might want to add some padding to the bottom of the container so that your content won't run under the footer.

comments