For the longest time, I’ve been using Adobe Dreamweaver and Notepad++ in developing the front-end of websites (and I remember trying out PageMill long ago and resorted to Notepad).
I’m looking into one of Adobe’s projects: Brackets.
A photo of the Brackets screen in Windows 7.
Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.
…you’re translating all the features and functions of all software combined into styles and you’re making the browser a mashup of those software.
One day, Photoshop will have an “export to HTML and CSS” function wherein the lens flare filter I dearly love would be a bunch of vector shapes rendered by the browser.
And whenever I see the need to make the lens flare in my image more awesome, I could easily tweak it:
By then, writing the stylesheet might become as easy as spelling my name in binary code due to its vast properties and values.
Then we’ll be back to GUIs again.
The browser unifies content. It forces us to adhere to standards.
Imagine a time wherein your doodles in Paper could be opened and edited freely in Illustrator then shared instantly on the web–all these would be possible if they would be speaking in discernible language.
Sounds like booger? Nope, it’s what’s been brewing in browsers and hopefully it becomes a standard. The basic syntax is:
[code lang=”css” title=”CSS”]
div {position:sticky;}
[/code]
We already have position:fixed and it sticks!
Well, if you’re familiar with the CSS propety-value position:fixed, it fixes the position of an element relative to the viewport (and not its parent element)–so that when you scroll the screen, the element stays where you tell it to. That’s one of its caveats: it escapes any parent and becomes relative to the viewport or in other words, it escapes the layout.
position:fixed sticks but we don’t have much control over it like if we want the element to be contained to its parent element. On the other hand, position:sticky is more like position:absolute (the power of being relative to its parent) + position:fixed (the power to stay where you tell it to).
An illustration of elements with different position property values.
What’s more to sticky?
The proposal is that you could define its top, right, bottom, and left values to be detected relative to the viewport–and this is the time when sticky will be activated. For example:
[code lang=”css” title=”CSS”]
div {
position:sticky;
top:10px;
}
[/code]
Wherever this div is located, when you scroll the screen and this element is exactly 10px from the top of your viewport, it will become sticky so that when you scroll farther away, that element stays in your view (you can do this to position:fixed but with the help of JS for the activation part).
One last thing, I propose it be named, stick as in, position:stick.
One way to set the height of an element to 100% is to absoultely-position it yet you needed a max-width for it to follow (instead of a simple width) for layout reponse purposes.
The solution is to simply set its width to 100% and set the max-width to your desired value. For example:
Hey, remember that time when you switched from the table layout to div layout?
This is the time to be “out with the old and in with the new”.
We’ll be leaving behind the contraption that alleviate the pains of the CSS box model.
Just to refer to that contraption, familiar with this?
[code]
<div class="module">
<div class="module-container">
<div class="module-content">
Content
</div>
</div>
</div>
[/code]
To not worry about computing widths, we apply it to module-container and the paddings, borders, and margins to module-content.
You have a paragraph with a URL in it–chances are the boundaries might wrap or cut your URL into two lines.
Notice that it is an actual URL in the form of http://[address] and not just a linked bunch of text.
[code lang=”html” gutter=”false”]<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi ante, hendrerit sed pretium id, fermentum sed tellus. Integer venenatis, turpis in tempus cursus, odio sapien tincidunt mi, in iaculis nibh nisl eget metus. Proin ultrices elit non nisl vehicula suscipit <a href="#">http://www.double-u-double-u-double-u-dot-wawawa.com</a>. Suspendisse interdum nisl ac risus consectetur ut hendrerit tellus aliquam.</p>[/code]
Why don’t we like that? Because it’s supposed to be in one unit.
So, add a class to the anchor tag:
[code]
<a class="url" href=""#">[URL]</a>
[/code]
and tell CSS to:
[code lang=”css”]
.url {white-space:nowrap;}
[/code]
