Just finished the first draft of my very own little front-end framework, which I am calling Happy Cupcake.
It was inspired by the latest version of Twitter Bootstrap, which is a great framework but very over-used these days. I’m planning on expanding my framework to include features for easily setting up image galleries, and taking some ideas from other front end frameworks (such as Foundation and Gumby).
- CSS Reset
- Form Styles
- Responsive Grid
- Responsive Navbar
- Modal Widget
Making a grid with pure CSS positioning is just too easy – nobody should ever have to resort to using a table to create a basic grid layout.
I just finished a demo with two approaches, which were painted using some #BADA55 CSS colors:
In the jsfiddle version I had to add
font-size: 0px; to the parent div to completely fix the spacing issues caused by
inline-block. Oddly enough, in my initial version (an html page that can be opened locally in the browser), this wasn’t necessary. The full version with separate files for html and css is posted on github, along with some of my other css and html demos.
Layout Without Hacks?
While both of the approaches shown above avoid using tables for layout, both also involve using a hack. With
inline-block, you have to eliminate whitespace from the HTML and use
font-size: 0px; on the parent element. With
float, the clear-fix hack is required to keep the parent element from collapsing.
Once browsers start supporting the flexbox model, it will be GREAT to finally have layout without hacks.
I’m pleased to have finished App Academy, and honored to be staying on as a Teaching Assistant for the next cohort of Student Software Engineers. The transition from student to teacher happened suddenly, so I have been quite busy even though my cohort “graduated” a week or so ago. While things have been quiet on this blog, I posted a storm of entries during App Academy that can be read on “App Academy Hacker”.
While I don’t see myself teaching in the long-term, it is a fantastic opportunity to continue learning and work with intelligent, highly skilled people. My first priority is to be around people who hold themselves to the highest standards, and that is essential for anyone attempting or teaching at App Academy.
I hope to start blogging here again. My first tidbit to share after so long;
I just wrote up a template for generating a Rails App with RSpec and FactoryGirl set up. I may tweak this to get the last piece to happen automatically, instead of outputting a reminder to the user, but aside from that it works like magic!
The template section of the Generators Rails Guide made setting this up as easy as pie. Glad a student pointed this feature out to me!
I can hardly contain my excitement about attending App Academy.
Ok- I guess I can’t contain it:
In preparation I have started a Tumblr Blog titled “Hacking at App Academy”, which I will use for all App Academy related posts, including my continued preparation and studying.
I have about 7 solid days left to hack, and then I’ll be either packing boxes, saying ‘Goodbyes’, or on the road. I will make the most of the time that is left.
Consider the blog at Flarnie.com on hold for the moment: I’m going on an adventure!
I recently updated this blog/portfolio with a new WordPress theme that is responsive and mobile-friendly. Hooray!
Details below the cut~
Hitting ‘submit’ triggers the deferred operation, which changes the cupcake color and adds sprinkles based on the form input. Notice that you can only perform the operation once.
You can find more examples of jQuery Deferred in the jQuery documentation.
A quick demo of how easy it is to create a “fluid layout” with responsive image gallery, inspired by Ethan Marcotte’s article “Responsive Design” in A List Apart. Resize the window! The little aliens will rearrange themselves to fit any size space.
How To Make a Responsive Image Gallery
- Images should either be the same size, or be contained in divs of the same size, to naturally form a grid.
- Wrap gallery in a div and float all inner images/elements to the left.
- Clear the gallery with a clearfix or other method.
Large scale example beneath the cut. (The images, though small, will need to load!)
After working on it as a side project for some time, I am going to consider Arcadia Fairytales (.com) launched and move on to other projects.
Please visit the site, enjoy some stories, and report any bugs to me!
Creating this site was a fun way to learn Django, and I hope it will be a useful resource for learning and enjoying folklore and fairytales. At the moment I have uploaded public domain stories from 6 countries, and hope to eventually add many more.
Using skills demonstrated in this starter guide, I made a little ‘Angry Birds’ fan-art:
Full Disclosure: I volunteered as a technical editor for this mini-ebook and received a free copy of the finished text.
- The only book currently published that will teach you Raphael JS
- Concise and accurate
- Up to date- published January 2013
- Very fast read- 47 pages to get you up and running with Raphael JS.
- Visual and Hands-on- includes code snippets and screenshots on nearly every page