Bitcss - a centralized CSS repository powered by github(jaequery.tumblr.com)
jaequery.tumblr.com
Bitcss - a centralized CSS repository powered by github
http://jaequery.tumblr.com/post/14221433588/bitcss-a-centralized-css-repository-powered-by-github
9 comments
That's a great idea. Use bootstrap as a starting point and go from there. You already have a community forming around bootstrap that you could leverage.
thanks sacha, good point about practicality. i know it ain't going to be easy and if it's just me that contributing, i think it still great. but atleast we can get something like this going, think it'll be great for developers all around.
There's something I'm often wondering why it doesn't exist: A standard, community-based document specifying a protocol for commons html/css constructs. For instance, specifically saying what is a header, what's the best html structure for it and a couple css examples.
Some might think it's stupid or impossible, but I don't think so. How many simple header/2 columns/footer websites are they? Why are they all differently constructed.. Some uses #contents, others #main-container, others #wrapper, others #wrap, etc etc.
With a great specification for common patterns, it would be possible to document a HTML document by saying, for instance, this page respect the design #18. By that, you could clearly see the doc and it'd show a clear header/3 columns/footer page with all ids and classes used.
It'd make it easier for designers to submit design for project (Think Zen Css for instance). A css could be shared with different websites that use the same 'patterns'.
Think a little bit like the Gammas pattern; some love them, some have them, but we can't deny their usefulness when communicating or documenting a page. For instance, it's way easier to say: I've used the visitor and composite pattern for this tree of blabla rather than describing all the inner details. (Please, don't reply how Gamma patterns are in fact anti-patterns or lack of features of the language, I'm just stating that as example as what I mean by protocol, interface or pattern.)
Finally, it would just plainly make html, css (and maybe even Javascript) code less randomly hacked and easier to maintain. It'll be even easier for beginners to get started. (Take the html code of the pattern #18 and choose a css file from the list associated to the #18) - Dang, a righly constructed 3 columns html page, compliant which work out of the box.
Some might think it's stupid or impossible, but I don't think so. How many simple header/2 columns/footer websites are they? Why are they all differently constructed.. Some uses #contents, others #main-container, others #wrapper, others #wrap, etc etc.
With a great specification for common patterns, it would be possible to document a HTML document by saying, for instance, this page respect the design #18. By that, you could clearly see the doc and it'd show a clear header/3 columns/footer page with all ids and classes used.
It'd make it easier for designers to submit design for project (Think Zen Css for instance). A css could be shared with different websites that use the same 'patterns'.
Think a little bit like the Gammas pattern; some love them, some have them, but we can't deny their usefulness when communicating or documenting a page. For instance, it's way easier to say: I've used the visitor and composite pattern for this tree of blabla rather than describing all the inner details. (Please, don't reply how Gamma patterns are in fact anti-patterns or lack of features of the language, I'm just stating that as example as what I mean by protocol, interface or pattern.)
Finally, it would just plainly make html, css (and maybe even Javascript) code less randomly hacked and easier to maintain. It'll be even easier for beginners to get started. (Take the html code of the pattern #18 and choose a css file from the list associated to the #18) - Dang, a righly constructed 3 columns html page, compliant which work out of the box.
Well, HTML5 is fixing this problem by making new elements. So instead of arbitrary CSS classes, there is a standard element, such as <article> or <header>.
I think you could probably improve the usefulness and ease of use (and therefore success) of this project with a little extra leg work.
First, add an additional requirement to contributing--require each sub folder to the project contain a manifest (json format) that describes some key information about the contribution: [{ author: 'giberson', name: 'pixel button', descripton: 'classic pixel outlined button', template: pbutton.html, stylesheet: 'pbutton.css', type: 'layout|widget', version: 1 }]
Second, actually build a site similar in functionality to Google's font site, the content generated by parsing the main trunk contribution folders. (see http://www.google.com/webfonts)
This way users can browse the contributed content with inline examples.
You can also provide the user with a "quick use" button that produces the stylesheet href link, and the html code to insert into their page to use the style.
Notes on the manifest entries:
The main object of the manifest is an array, allowing for multiple components to be housed in a single contribution folder.
"template" is the html markup to be styled via css.
"stylesheet" is the stylesheet to be included by the page.
"type" is either layout or widget to represent if the styling/template are meant to replace your html or be inserted into it. Which will help the directory site determine best method to display preview, via an inline div or a popup div or some other creative mechanism.
"version" represents the manifest version, it allows you to upgrade the site and filter out contributions that have been updated with new required/optional manifest field properties or formats to work with new site features.
First, add an additional requirement to contributing--require each sub folder to the project contain a manifest (json format) that describes some key information about the contribution: [{ author: 'giberson', name: 'pixel button', descripton: 'classic pixel outlined button', template: pbutton.html, stylesheet: 'pbutton.css', type: 'layout|widget', version: 1 }]
Second, actually build a site similar in functionality to Google's font site, the content generated by parsing the main trunk contribution folders. (see http://www.google.com/webfonts)
This way users can browse the contributed content with inline examples.
You can also provide the user with a "quick use" button that produces the stylesheet href link, and the html code to insert into their page to use the style.
Notes on the manifest entries:
The main object of the manifest is an array, allowing for multiple components to be housed in a single contribution folder.
"template" is the html markup to be styled via css.
"stylesheet" is the stylesheet to be included by the page.
"type" is either layout or widget to represent if the styling/template are meant to replace your html or be inserted into it. Which will help the directory site determine best method to display preview, via an inline div or a popup div or some other creative mechanism.
"version" represents the manifest version, it allows you to upgrade the site and filter out contributions that have been updated with new required/optional manifest field properties or formats to work with new site features.
thank you, this is really the type of thing i wanted to hear, as i really want to support manifest files but afraid that devs, mainly the front-end devs, would be hesitant to dealing with manifest files. so my best guess is, to make it optional, but if found, it'll get indexed by the database.
I really like this idea, and it's one I wish I had time to work on myself. I think there's a real need for something like this.
I've come to the conclusion that a project like this would only be successful if contributors are expected to document WHY the code used is written as it is.
Without documentation (an example UI style guide, like the homepage of Twitter Bootstrap) it's difficult to see both the big picture and the purpose of the small details.
Twitter Bootstrap had a great home page right from the start – it served as documentation for the project, as well as a marketing demo influencing you to try it.
So imagine if the contributors to your repo were simply asked to follow a few guidelines, documenting their contributions (say, providing example HTML and using KSS to markup their CSS).
https://github.com/kneath/kss
http://www.alistapart.com/articles/writingainterfacestylegui... http://www.engineyard.com/blog/2011/front-end-maintainabilit...
Maybe ask them to follow a few of the "Object Oriented CSS" principles, so that it's easier to mix and match parts from different folders:
https://github.com/stubbornella/oocss/wiki
Principles of separating the "structure" from the skin"; and separating "container" from "content".
I've come to the conclusion that a project like this would only be successful if contributors are expected to document WHY the code used is written as it is.
Without documentation (an example UI style guide, like the homepage of Twitter Bootstrap) it's difficult to see both the big picture and the purpose of the small details.
Twitter Bootstrap had a great home page right from the start – it served as documentation for the project, as well as a marketing demo influencing you to try it.
So imagine if the contributors to your repo were simply asked to follow a few guidelines, documenting their contributions (say, providing example HTML and using KSS to markup their CSS).
https://github.com/kneath/kss
http://www.alistapart.com/articles/writingainterfacestylegui... http://www.engineyard.com/blog/2011/front-end-maintainabilit...
Maybe ask them to follow a few of the "Object Oriented CSS" principles, so that it's easier to mix and match parts from different folders:
https://github.com/stubbornella/oocss/wiki
Principles of separating the "structure" from the skin"; and separating "container" from "content".
thanks for this, kss is something i've skimmed over a few days ago but i think it really is the key to this whole thing.
You would need a consistent html structure for common components. Twitter bootstrap is not the only one of it's type also, check out zurb's foundation [0].
I would be more interested in a webservice to serve up common UI elements including html and css. I propose this would be based off something like backbone views, and Handlebars templates.
[0] http://foundation.zurb.com/
I would be more interested in a webservice to serve up common UI elements including html and css. I propose this would be based off something like backbone views, and Handlebars templates.
[0] http://foundation.zurb.com/
> You would need a consistent html structure for common components.
Alternatively, a snippet of HTML could be supplied along with every CSS component.
Alternatively, a snippet of HTML could be supplied along with every CSS component.
yes i think that is the best approach for now. just have a single html file that have both the css and html structure.
so if i have a landing page i want to contribute, i'd add:
/users/jaequery/landing1/index.html /users/jaequery/landing1/images
and push to the repo.
along the lines, i'm thinking of you adding something like a README file that the system can read and process on the database to allow ability to search/sort/etc ...
so if i have a landing page i want to contribute, i'd add:
/users/jaequery/landing1/index.html /users/jaequery/landing1/images
and push to the repo.
along the lines, i'm thinking of you adding something like a README file that the system can read and process on the database to allow ability to search/sort/etc ...
So I'm thinking kind of like a SaaS model like Typekit / Google Fonts ... to let you drill down to what you need.
You should know that Norton warns me of an attempted attack every time I load your page. It claims the "HTTP MS IE VML Fill Method BO" (http://www.symantec.com/business/security_response/attacksig...) attack was attempted from hosted.by.qudranet.com (This host has no DNS record as far as I can tell).
that is really strange, i'd have to double check that. it could be one of the widgets i'm loading up on tumblr which i'll remove once i find it.
[deleted]
I could be missing something since I don't see a link to the Github repo in your post.
I have to admit this post was a bit pre-mature as there is nothing set up to support this yet. I just wanted to collect some feedback around this idea to hear what others think. I will have a follow-on post once I have something in action so follow me @jaequery if you want to keep tabs on the project.
I like this idea and I'd love to contribute to it! When you get the repo set up, be sure to re-post.
thanks miles, well stay tuned! follow me on @jaequery for updates.
Maybe a simpler approach would be building a library of Twitter Bootstrap themes, since Bootstrap is already used across a lot of sites, covers most UI elements, and their markup is pretty standard.