Fractal: Built with / example site

[eknowles]

I've looked but I'm finding it tough to find an actual real world public example of fractal in action.

So far I've only found http://bits.24ways.org/. I'm sure there are much more out there waiting to be discovered.

I propose we allow project owners a way of adding some metadata to their own www build which will allow other sites to index them and build a catalogue similar to http://builtwithbootstrap.com/ on which designers, developers and UX people can view, understand, admire and learn from other examples.

Metadata may include a simple JSON file in the root alongside index.html (generated by fractal if the user wants)

{
  "name": "My Companies Style-Guide",
  "description": "MyCo. UI Framework",
  "version": "0.1.0",
  "fractalVersion": "1.0.8",
  "theme": "mandelbrot",
  "repository": "https://github.com/myco/myfractal",
  "author": [
    {"social": "github", "handle": "eknowles"},
    {"social": "twitter", "handle": "nedknowles"},
  ]
}

Anyone can then visit builtwithfractal.com (for example) and submit a url to be indexed.

This would also allow authors to sign in and add more detail such as blog posts, company information etc.

I'd be happy to build the backend if someone wants to help design the front end?

[0x6a68]

ref #174

[allmarkedup]

@eknowles I like this idea very much! So the idea is that the site would need to have a web-accessible JSON file (i.e. at mysite.com/fractal.js) which could then get indexed? And are you talking about adding this to the sites themselves or the public-facing component library, if one exists? I guess it could be applicable for both.

Is there some sort of standard or set of best practices for implementing this type of thing? I.e. schema etc? It would be interesting to look into how other people are doing this sort of thing.

But details aside, some sort of catalogue of fractal-based sites/component libraries for people to be able to browse would be fantastic.

[eknowles]

We can do both.

1. META TAG. Have users webmasters include a meta tag in the head of the document.
   This will allow a site to crawl the top 1000 sites, which give us a list of domains that have used fractal. Helpful for social proof and statistics.

<meta name="fractal-lib" content="http://patterns.mysite.com">.

I suggest, once the schema is agreed and the builtwith site built (anyone know a designer?) we can collect emails addresses from people that have starred the project and let them know of the update and how they can help us.

1. JSON FILE patterns.mysite.com/properties.json. Include a JSON file in the fractal build and server so sites (builtwithfractal) can generate a profile page for that library.

---

The schema can be agreed by us (my first comment is a good start), what data is important to designers, project manager etc. Finding dimensions would also be helpful for ordering component libs by theme, comments, alexa rank etc.

---

Also a list of sites I found by searching github.

GitHub | Fractal | WWW
------- | ------- | ---
18F/marigold | s3 | ?
jpolete/springboard | github.io | ?
severnbronies/severnbronies-2016 | ? | severnbronies.co.uk
teameight/ci-pattern-library | ? | childrenincorporated.org
adactio/TheSession-patterns | ? | thesession.org
CityOfBoston/patterns | herohu | boston.gov

There must be hundreds more, I just don't have the time to manually do this.

Here are some examples of 'example sites'

• https://expo.getbootstrap.com
• http://builtwithbootstrap.com
• http://www.awwwards.com

[shawnbot]

The U.S. Web Design Standards (18F/web-design-standards) uses Fractal here. Also, 18F/marigold is essentially deprecated.

[mikkelrom]

Hi guys.
I know it's not an entire buildwithfractal site, but I just created this simple list, because I thought it would be nice to have a collection somewhere. Feel free to add examples :)

https://github.com/mikkelrom/fractal-examples

Let me know if there is already another list of examples out there that you are aware of.
Thanks

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.