Symphony.

This may be a little off topic, but it was Craig Zheng who was kind enough to share some of his ideas about the grid system used to build the Symphony CMS site and another site he designed for Public Culture. I’ve extended his ideas to develop a semantic page template as part of a standard Markup Library to which I hope to continue adding open source markup patterns that can be used in everyday web development efforts, and specifically for site development with Symphony.

Please let me know if this idea would be something that people would be interested in supporting or contributing to. The source code is free to download, clone or fork on GitHub. If you would like to add to the library, fork the repo and send a pull request.

Very nice Stephen!

Great work Stephen, I can’t wait to meet you in person at the June event :)

Looks like an exciting project, Stephen, great work! I’m hoping I’ll get to meet you in London as well.

Thanks, Allen and Craig. I’m definitely looking forward to meeting the two of you in London. That’s great news that both of you are planning to attend! The fact that we’ll be holding a mini conference has my head spinning around ideas of how we can best use that time.

Which lead to the idea of the Markup Library as a collaborative project. Hopefully this is just the beginning of the Markup Library. Craig, I’m glad you’re excited about this, especially since your ideas inspired the first addition to the library.

You may have noticed that I’m a little scattered as far as which open source license to use: MIT, GPL, Creative Commons. I’m wondering whether I should be simply stating that it is all in the public domain. Or should I use the Creative Commons CC0 license? If I am going to be inviting submissions from any and all contributors, it doesn’t seem right to use the MIT license that assumes an individual copyright owner. If you have any ideas in this area, please let me know.

Here’s what I have in mind to add to the library:

• Code Standards (similar to those that Nathan Smith is curating for Fellowship Technologies) which I am in the process of adapting for use in our development process at Domain7
• Documentation (starting with the grid system)
• A blog, forum and issues tracker using Symphony CMS, of course. This may be included in the repository as a submodule.

The idea is that the entire site code base will be open source, so that anyone can reproduce the site on any web server, either as a download or as a Git repository. The only assumption will be that the hosting environment can serve web content: XML, HTML and XSLT files. I’m using Git to deploy the site to the server, and I’m loving it. All files use relative URLs, so the repository can be dropped into any directory on a server and be viewed from that directory.

If anyone would like to contribute to this collaborative project or has any ideas about how to organize the library or structure the site, I’d love to hear your thoughts. I’m pretty much making it up as I go along. Sort of a “necessity is the mother of invention” kind of project, but also an idea to help build a more collaborative environment for Symphony CMS designers and developers, especially with the London Symphony Meetup soon approaching.

That’s some interesting work you have going on there. It’s an idea I have been throwing around myself, to have easily repeatable design patterns. One thought or suggestion I have is to use class names based on the new semantic elements in HTML5. That way it can be easily turned into full HTML5 fairly easily, and its already a bit documented. Just from my quick look through, it won’t replace everything, but it will create a little lower barrier to entry.

Thanks, @bitfyre. I was thinking of starting with HTML5, but thought that XHTML would be a better starting point. But playing around with HTML5 would definitely be one of the main use cases for this library.

To attract the largest possible audience for the project as potential contributors, I wanted to keep the focus on generally accepted best practices for web development. (I was actually quite surprised that the markuplibrary.org and markuplibrary.com domain names were available, so I snapped them up yesterday morning.)

Another reason that I avoided using HTML5 elements was the use of more presentational element names. This is a sort of proposal to use different element names than “header” and “footer”. To me, these elements are still referring to the presentation rather than meaning of the content. Andy Clarke had proposed using id values such as “branding” and “site_info” instead. For the time being, I have settled on “site” and “site-info” as divisions of content that will be commonly used throughout the site. I’m not sure that I love it yet, but I think it works. (Although, maybe I should shorten “site-info” to “info”, but I thought it might be too generic.)

But, since this is a collaborative project, I’m definitely open to suggestions. If everyone is using “header” and “footer”, we might as well stick to the convention, rather than the ideal, I suppose, especially when the HTML5 Draft Specification is gaining traction.

Which lead to the idea of the Markup Library as a collaborative project. Hopefully this is just the beginning of the Markup Library.

This is a cool project and definitely an interesting topic for the London meet-up.

I understand where you are coming from, but I do think those conventions are catching on. Also with HTML5 it is about assign a semantic meaning, and it isn’t necessarily at the page level. If you look at the explanations of the Footer Element and the Header Element, the could technically be used more than once on a page. Even before HTML5, most of the people I was working with where using them for class or id names. So it’s worth considering.

I did notice that you already used Section, which is a new HTML5 semantic element. Your usage might be different slightly different than the Working Groups Definition, but I think its a good start. The other elements I was thinking you might make use of as class names are the Article element and the Aside element.

With site and site-info, I think there are other semantic terms that can be applied. Starting within the site-info, your usage here would seem to be a prefect example of where the Redefined Small Element should be used. It is still an considered inline/phrasing element, but depending on how you approach it div.copyright.area might be superfluous. For site, you also might look at the Hgroup Element. It may not make sense in your current implementation, but when you have a tagline – which may sites I work with do – it could make sense.

Over all I think its a fantastic discussion to be having. The more we can have mutually beneficial design patterns, the more we can focus on other areas and details to better meet our needs and/or our clients needs. I love that I am seeing more discussions about this kind of stuff on the web again.

Hopefully in the near future I’ll have some time to fork this and share some of the above thoughts via code.

On dealing with the intellectual property, based on your stated goals and directions, I would suggest going with the Creative Commons CC0 license. That way anyone can do what they please with it, and imposes the fewest restrictions.

Thanks, @bitfyre.

• I have changed the license to the Creative Commons CC0 LIcense.
• A demo of the grid system has been added to the templates library

You could also release it under the WTFPL.

You could also release it under the WTFPL.

Ha. A colleague suggested that already. Maybe a dual license then: CC0/WTFPL. ;-)

I have added a Symphony Intranet ensemble to the Markup Library to demonstrate ways to use Symphony for interactive prototyping. In this case, I’ve built the templates to output relative URLs instead of using the usual absolute URLs generated by the $root parameter.

It also uses a stylesheet switcher that maintains the theme preference for the application. The layout is based on Nicole Sullivan’s OOCSS. Grab the source from GitHub.

Just be aware that the ensemble uses only two data sources: a navigation data source and a static calendar XML data source. (Actually, I’ve just discovered a bug with viewing these data sources, so I’ll need to clear that up before I post this to the Downloads page.) There are no events or sections to manage any of the data. This is merely a prototype.

I have plans to add functionality to the application, but this could take some time. This could make a good collaborative project, though, if people find this useful.

Thanks for sharing, bauhouse. Looking great.

I have plans to add functionality to the application, but this could take some time. This could make a good collaborative project, though, if people find this useful.

For an upcoming project I’m going to implement some parts of your prototyped functionality. For one thing I have something to play/start with, for another thing I will have something to support the project.

bitfyre, here’s my first kick at creating a page template and grid system using HTML5. Like Less Framework, it uses media queries to switch stylesheets, but, unlike Less Framework, the layout can be fluid. This will be the basis of a collaborative Symphony project that should be released sometime soon.

Now that the Forum ensemble is near completion, I have finally found some time to build on my original experiments with media queries. I first wanted to figure out the basic framework, with a style guide to define typography, colour, grids, forms and content modules. Next, I would like to build an ensemble to use this layout framework.

Then, I'd like to start building a library of markup, styles and scripts that can be added as content modules to this layout framework, similar to these design patterns.

I was thinking this would be a great starting point for a collaborative community project. I'd love to revive @phoque's ideas for a bug tracker. Then we can integrate the Members extension and the Forum into a working agency or freelance CRM.

Plus, with XPathr also waiting on the sidelines for some attention on the UI redesign, I'd also like to revive work on this tool to generate markup that could possibly feed right into the Markup Library.

To help with the project, I'll be open sourcing my work on our agency intranet, but replacing the front end with the Markup Library content. Then we should have lots to talk about at the Symphony Developer Conference.