28 Jan 09 Blueprint CSS Framework
I downloaded the Blueprint CSS framework and checked out the docs and read the source files. Wow, this was easier than I thought. My concerns and confusion about getting some decent initial CSS for the site just evaporated. After about 15 minutes of reading and playing around I had something that was better than I had ever come up with before. And since CSS “cascades”, it will be very easy to customize the default styles and typography. I highly recommend using a CSS framework if CSS isn’t your strength and/or you need to do quick prototyping. Thanks Blueprints CSS, this is exactly what I needed!
Tags: blueprints, css
16 Jan 09 CSS problems at bay for now…
I reworked the CSS on the test site by following this Jina Bolton tutorial at Sitepoint. My crazy div problem disappeared, which was my main goal. I consider this an interim step. I need something that looks like a semi-realistic website while I am developing. It helps me visualize what I am doing. I decided to leave the colors in the tutorial as-is rather than spend a lot of time tweaking them. Again, this is just a framework to get me going further. Hopefully I can enlist some of the folks on SG101 to assist with the final CSS and design.
The tutorial was very good. Since I’m not a designer, it was interesting to read how a good one works. And I learned a few things about CSS that should really help me in the future.
Speaking of cool CSS tricks, I found this tuturial on the web over lunch today. It is making me re-think how to markup the comments on my site. Semantically, perhaps I should display them as a list of blockquotes. Very interesting stuff!
Here is a screenshot of the test site with the borrowed CSS design.
14 Jan 09 Update on Comments and CSS Woes
I’ve made good progress on the comments system, and I’m glad I took the time to roll my own. I have a nice AJAX style commenting system integrated with the markItUp! editor. I’m allowing comments to be marked up with Markdown, and I’m very happy with it. Having the ability for users to easily post links and images will be a big improvement from the existing site’s commenting systems. I need to cut the private messages application over to markItUp instead of TinyMCE. I think TinyMCE is a bit overkill for anything except news stories. I also added the ability for users to “flag” comments for spam or abuse.
The markItUp editor is very nice, and I was even able to add a drop-down menu for my smiley system. Now one can click on a smiley from the editor and get it added to the comment! The markItUp editor has a slick preview system, which can use AJAX to post what the user has typed so far and get an HTML response. The only drawback is I can’t easily clear or hide the preview pane once the comment has been posted by AJAX. So you are left with a blank editor ready for the next comment, but the preview pane is still showing whatever you previewed last. This is minor, I think, and I’ve already made the author aware of this issue. He told me he will look into it for the next release. I highly recommend markItUp.
And finally I took a cue from Malcom Tredinnick’s blog (the Django source is available for study – Thanks Malcom!). I added a field to the comments table to store the rendered HTML for each comment. This field is updated on each comment object’s save. This will save processing time to convert the Markdown markup to HTML. Since comments are viewed many, many times compared to how often they are edited, this seemed like a sensible optimization at the expense of some disk space.
I need to add comments to the other parts of the system I have developed already (news, polls, etc.). However I’m being distracted at the moment by a problem I am having with CSS. This has been bugging me for months now. I don’t know why it happens, but I’m seeing <div> tags in a left floating <div> affect <div> tags in my main content area. Large gaps get created. It seems that I may be trying too hard to duplicate the PHP-Nuke blocks, and nesting lots of divs seems to be very fragile. I think I might have to investigate a different CSS layout and redo my base template. I’m googling various CSS layout tutorials in my spare time. I don’t want to become an expert in this, but I need something simple that looks decent. I wish I had a web designer to help me out with this part.
Tags: comments, css, markitup, sg101