
👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
Bloat the stylesheet and not the HTML markup.
Everybody agree?
HTML:
[code lang=”html”]
<p class="big">Tell me now, is it so<br>
Don’t let me be the last to know<br>
My hands are shaking<br>
<span class="red">Don’t let my heart be breaking</span></p>
[/code]
CSS:
[code lang=”css”]
.big {font-size:2em;}
.bigger {font-size:3em;}
.red {color:red;}
.green {color:green;}
[/code]
Isn’t that pretty? If you want to make the paragraph’s font size bigger, you only need to change its class to “bigger” and the red line could be green in no time.
But no. Like the title said, grow up CSS kids. CSS spoonfeeding stops here.
HTML:
[code lang=”html”]
<p class="lyrics">Tell me now, is it so<br>
Don’t let me be the last to know<br>
My hands are shaking<br>
<span class="ouchy">Don’t let my heart be breaking</span></p>
[/code]
CSS:
[code lang=”css”]
.lyrics {font-size:2em;}
.ouchy {color:red;}
[/code]
When you’re working on HTML markups, set aside the stylesheet. All you have to do is name your HTML tags for what they are and not for what you want them to appear.
Like in the example above, that paragraph contains lyrics and not some random big texts so name it “lyrics”.
Think about this: if the developers kidnap your HTML file and all you have is the stylesheet, it would look stupid to have a “red” class name but appears to be in a different color (if the client tells you to make it green).
In case that you need to test your website in your mobile device, just connect to your PC IP address (given that you’re using XAMMP).
Here are the steps:
So how really do you get the height of the longer div and apply it to another so that they would have equal height?
Simple. By JS! I’m not in a master-level when it comes to jQuery or JavaScript; I still run to Stack Overflow and jQuery documentation to get a general knowledge of which does what.
Assuming you’re using jQuery in your little web page, follow me on this short walkthrough:
[code lang=”js”]
$(document).ready(function() {
var $longerDiv = $(‘#long-div’).height();
$(‘#short-div’).css(‘min-height’, $longerDiv+"px");
});
[/code]
This line creates a variable named “$longerDiv” and it gets the pixel height of the #long-div element in your HTML mark-up.
[code lang=”js”]var $longerDiv = $(‘#long-div’).height();[/code]
And this one applies that number (without the “px”) into the css property, “min-height” and we add “px”.
[code lang=”js”]$(‘#short-div’).css(‘min-height’, $longerDiv+"px");[/code]
Check out the demo on jsFiddle: http://jsfiddle.net/8WDWf/
There might be a better way in doing this — hit up the comments!
—
Other code-testing sites on CSS-Tricks: http://css-tricks.com/seriously-just-make-a-jsfiddle/
It is the fifth day I’ve come back with my toolbox to continue building again.
Today, we’re going to look at how typography and link color/behavior could greatly affect the look of a site.
I’m planning to customize the link color and remove the default underline and also experiment on the webfont (maybe use Open Sans?).
But who ever said it is? Splash pages/screens in web and apps are useful while the homepage/screen is loading. One could also use an animation when exiting from the splash.
So be creative on those splash now.
Due to clumsiness, I lost a Photoshop file I was working on last Friday. It was an Android “mock-app” and prior to working on it, it was supposed to be a template file so the file name was something like “android-app_template_1a.psd.
Now, it’s Monday and it’s back to work, I was looking for the file with the project file name in mind. So, tough luck for me finding it.
I know, I could have looked up files modified by Friday but Windows 7 Search thinks you could just describe what you’re searching for in the Search field.
I never had this “difficulty’ in Windows XP. Makes me miss Benny the dog whom we shooed away far too many times. *sniff*
Since we can’t do anything about it, might as well memorize operators, keywords, and wildcards for Windows 7 Search.