I did some breaking and re-making of twitter bootstrap’s navbar. I love how convenient everything in twitter bootstrap is with all the pre-defined classes etc but it does take some time to customize bootstrap components and make them a little less bootstrappy…. [codepen_embed height=”568″ theme_id=”21518″ slug_hash=”WrxqVE” default_tab=”result” user=”Kauress”]See the Pen <a href=’http://codepen.io/Kauress/pen/WrxqVE/’>Transparent Twitter Bootstrap NavBar</a> by Kauress (<a href=’http://codepen.io/Kauress’>@Kauress</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed] Here’s the HTML
Code a full width header video AirBnB style
I recently did a tutorial on coding a full width header video like on airbnb. I love how they’ve used a video in their header, it really does alot for their page and branding. The project itself isn’t hard to do, all you really need to know is how to use the video tag fromt HTML5 and incorporate it into twitter bootstrap’s framework
5 cool & useful HTML5 tags
<contentditable = “true”> lets the reader edit content within the div <video> directly embeds a video on a page, no plugins, iframes etc <small> presents small text, great for styling <header> & <footer> pretty self explanatory
Barbie codes
The internet recently fixed Matel’s Barbie “I can be a computer engineer” book. Check out more cartoons from The Verge ,someone also deployed a Heroku app for people to make their own!
Another Bootstrap Video Header
Another day in the life of a twitter bootstrap project. This one involved a video header. The header scales down to an image on phones. Modified a bit from a blog along the way. Here’s an explanation from another blog View the completed project at http://kauress.github.io/goappzone/ https://gist.github.com/Kauress/521f3c237643f6d2af51 https://gist.github.com/Kauress/ad6461c01f0db114bc39
Full Webpage Video Background in Twitter Bootstrap
Check this out pretty cool: http://kauress.github.io/MooseFrye/ Done with Twitter Bootsrap 3 , change media queries to show a background pic on phones. Code for it is: <div class =”section”> <div class=”text-vertical-center”> <video autoplay loop poster=”img/bg.png” id=”bgvid”> <source src=”vid/1.webm” type=”video/webm”> <source src=”vid/2.mp4″ type=”video/mp4″> <source src=”vid/3.ogg” type=”video/ogg”/> </video> </div> I modified it just a bit from the original source (launchrocket). A boot snipp is also
Twitter Bootstrapping it in a day
Twitter Bootsrap ( aka TB if that wasn’t already a sickness!) is great to use. I’ve been experimenting with it for the past 1 and a half weeks. Literally you can put up a landing page in a dy (less if you’re a tb ninja…). Here’s one day bootstrap mockups for a few competitions: Some Twitetr bootstrap projects up here: A cool trick for TB,
Unix OS Infographic
An infographic made from a couple of lectures worth on Unix
- « Previous Page
- 1
- …
- 4
- 5
- 6