5 ms·

Bitcss - a centralized CSS repository powered by github

40 points by jaequery 15y ago

lukeholder 15y ago
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/ http://foundation.zurb.com/
- jaequery 15y ago
  So I'm thinking kind of like a SaaS model like Typekit / Google Fonts ... to let you drill down to what you need.
- xnxn 15y ago
  > You would need a consistent html structure for common components. Alternatively, a snippet of HTML could be supplied along with every CSS component.
  - jaequery 15y ago
    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 ...
sgdesign 15y ago
While this is a very interesting idea, I don't know how practical it would be… The first step would be using consistent markup for things like tabs, carousels, etc. But previous initiatives like jQuery UI's themes never really took off for some reason. 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.
- jaequery 15y ago
  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.
- AtTheLast 15y ago
  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.
BillSaysThis 15y ago
I could be missing something since I don't see a link to the Github repo in your post.
- jaequery 15y ago
  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.
- kodablah 15y ago
  https://github.com/jaequery/bitcss https://github.com/jaequery/bitcss
miles_matthias 15y ago
I like this idea and I'd love to contribute to it! When you get the repo set up, be sure to re-post.
- jaequery 15y ago
  thanks miles, well stay tuned! follow me on @jaequery for updates.
zwass 15y ago
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/attacksignatures/detail.jsp?asid=21750 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).
- jaequery 15y ago
  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 15y ago
[deleted]
giberson 15y ago
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 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.
- jaequery 15y ago
  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.
phzbOx 15y ago
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.
- Raphael 15y ago
  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>.
audionerd 15y ago
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 https://github.com/kneath/kss http://www.alistapart.com/articles/writingainterfacestyleguide/ http://www.alistapart.com/articles/writingainterfacestylegui... http://www.engineyard.com/blog/2011/front-end-maintainability-with-sass-and-style-guides/ 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 https://github.com/stubbornella/oocss/wiki Principles of separating the "structure" from the skin"; and separating "container" from "content".
- jaequery 15y ago
  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.

40 points by jaequery 15y ago

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/ http://foundation.zurb.com/

jaequery 15y ago
So I'm thinking kind of like a SaaS model like Typekit / Google Fonts ... to let you drill down to what you need.
xnxn 15y ago
> You would need a consistent html structure for common components. Alternatively, a snippet of HTML could be supplied along with every CSS component.
- jaequery 15y ago
  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 ...

sgdesign 15y ago

While this is a very interesting idea, I don't know how practical it would be… The first step would be using consistent markup for things like tabs, carousels, etc. But previous initiatives like jQuery UI's themes never really took off for some reason. 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.

jaequery 15y ago
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.
AtTheLast 15y ago
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.

BillSaysThis 15y ago

I could be missing something since I don't see a link to the Github repo in your post.

jaequery 15y ago
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.
kodablah 15y ago
https://github.com/jaequery/bitcss https://github.com/jaequery/bitcss

miles_matthias 15y ago

I like this idea and I'd love to contribute to it! When you get the repo set up, be sure to re-post.

jaequery 15y ago
thanks miles, well stay tuned! follow me on @jaequery for updates.

zwass 15y ago

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/attacksignatures/detail.jsp?asid=21750 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).

jaequery 15y ago
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 15y ago

[deleted]

giberson 15y ago

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 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.

jaequery 15y ago
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.

phzbOx 15y ago

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.

Raphael 15y ago
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>.

audionerd 15y ago

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 https://github.com/kneath/kss http://www.alistapart.com/articles/writingainterfacestyleguide/ http://www.alistapart.com/articles/writingainterfacestylegui... http://www.engineyard.com/blog/2011/front-end-maintainability-with-sass-and-style-guides/ 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 https://github.com/stubbornella/oocss/wiki Principles of separating the "structure" from the skin"; and separating "container" from "content".

jaequery 15y ago
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.