The first tutorial ever right here on CSSIsEasy.com is a follow-up to a question posted by Jitrenda Vyas on my blog. The timing is perfect because it allowed me to showcase the latest feature in Blueprint: inline forms. It also allowed me to demonstrate how you can next columns to build complex layouts. Watch the video, or view the demo page.
You can also view the final web page: Tutorial #1 Demo Page
Body markup:
<div class="container">
<div class="column span-12 append-6 prepend-6 last">
<form method="get" action="#" class="inline">
<div class="column span-4">
<label for="input1">Label:</label>
</div>
<div class="column span-8 last">
<input type="text" name="input1" id="input1">
</div>
<div class="column span-4">
<label for="input2">Longer Label:</label>
</div>
<div class="column span-8 last">
<select name="input2" id="input2">
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="column span-4">
<label for="input3">Even Longer Label:</label>
</div>
<div class="column span-8 last">
<input type="text" name="input3" id="input3">
</div>
<div class="column span-4">
<label for="value">One More Label:</label>
</div>
<div class="column span-8 last" id="radio_inputs">
<input type="radio" name="value" value="1"> Value 1<br>
<input type="radio" name="value" value="2"> Value 2
</div>
<div class="column span-8 prepend-4 last">
<button>Primary Action</button>
</div>
</form>
</div>
</div>Custom CSS (after Blueprint):
#radio_inputs { line-height:1.5; padding-top:.5em; padding-bottom:.5em; } label { color:#555; display:block; padding-right:1em; /* text-align:right; */ } #input2 { width:13.5em; }
so it’s need a custom css .
Not quite. The custom CSS I wrote is just to make it look a bit nicer. The whole example can be built with Blueprint alone. Once the video finishes processing / review by Revver, you’ll see what I’m talking about.
Yay – TextWrangler!
Thanks for the tut – and your continued work on Blueprint.
Video not working
OK guys here’s the deal. I finally found a website that allows me to upload screencasts in good quality for free, but it turns out that the monthly transfer limit is 2 GB and that’s not nearly enough for a public website. So the only solution is for me to publish my videos on Youtube. That’s the only site that will allow me unlimited transfer. The only problem is I need to re-record my video to be 10 minutes, so I’ll try to take care of that ASAP. Eventually, eventually I’ll be rolling!
So um, I finally uploaded a copy to Youtube, which looks great in HD, and what do you know? Youtube is down!
Did you check the demo page for this awsome tutorial before posting? Did you check with IE(7) for instance?
My advice: get to the point and use the 10 minutes wisely. It gets boring to watch some bla bla-ing. Wanna chat? Alone?
CSS is easy but I didn’t find any CSS basics here. Would you like to start from the middle?
There are more but I’m gonna leave the others tell you, I really don’t want to be a criticist.
Good luck with what you’re doing.
Markus,
> Did you check the demo page for this awsome tutorial before posting? Did you check with IE(7) for instance?
No.
> get to the point and use the 10 minutes wisely. It gets boring to watch some bla bla-ing. Wanna chat? Alone?
Some people don’t like tutorials that lack context. They wonder, “why is this tutorial relevant? What gave you the idea to explain this particular method? Where do I begin?” That’s what the introduction is for. If you want to skip ahead, Youtube makes that easy. Also, no, I don’t want to chat alone with you.
> CSS is easy
That’s why the site is cssiseasy.com
> but I didn’t find any CSS basics here. Would you like to start from the middle?
CSS basics are covered thoroughly in my livelesson, CSS Fundamentals, which is currently in editing/post-production and is due to launch soon. I’ll have details on how to purchase this when it hits store shelves. Until then, I’m not going to re-tread the basics on this site. So yes, I would like to start from the middle.
> I really don’t want to be a criticist.
The word is “critic” and everyone is a critic.
> Good luck with what you’re doing.
Thanks!
Hi! I am not a critic ,I think. But I like what you are doing it is what I need to learn custom or not basics as well middle or beginning doesn’t matter.
I already have a website. need to get better at formatting and setting up my pages in a way that I am not chained to some specific production language and so on,,,..
I found you on Show me do got me interested. I have room on my site or I know of a place where you may be able to place your Videos without these limits if that is a problem .
Let me know. My contact is a Huge Open source supporter. I can ask. Don’t see a problem . Let me know and i’ll connect you.
He may ask for a donations box somewhere but that is to pay the electric bill.