Moving FSharp.org to Twitter Bootstrap

[John Fair]

Hello all,

I'd like to get a discussion going about moving fsharp.org to a more extensible/maintainable framework like Twitter Bootstrap.  There are several advantages around doing this:

• Twitter Bootstrap is an open source framework, so it's in keeping with our open source mission statement
• TB is very well documented (as you can see from the first link above)
• This makes it very easy for new people, or non-web-developers, to contribute to fsharp.org on GitHub.  
• It provides a very robust HTML/CSS/JavaScript framework that is under continual development by the OSS community
• TB provides a responsive design element that allows it to scale to the device (Tablet, Phone, Desktop, etc)
  
• There are a plethora of Twitter Bootstrap Templates available on the web (as well as many folks, such as myself, who've been creating TB-based sites for awhile now)

I am bringing this up now while the site is still in its infancy.  Getting the TB scaffolding in place will take a deft hand considering the integration that will need to happen with Jekyll.  I know that there are a few people I can count on to help out with the transition, but I wanted to get the group's consensus before moving forward.  It will be a heavy lift upfront in order to save us the headache when the site is built out further.  

I welcome any and all feedback (including competing scaffolds/frameworks such as Foundation, etc).  I'd like to get started on this as soon as I can!  Please keep in mind that the site uses a markdown-like compiler (Jekyll) and isn't run on an engine like IIS.  This makes using tools like WebSharper challenging (if not impossible).

Thanks,

John

P.S. Silence is acceptance.  If you don't have an opinion, or just don't respond, then I assume you're fine with me doing this.  :)

[Jack Pappas]

Hi John,

I think this is a good idea -- perhaps it would make sense to use one of the Bootstrap forks or themes styled along the Metro UI guidelines:

• https://github.com/aozora/bootmetro
• https://github.com/TalksLab/metro-bootstrap

There's also a nice CSS3 theme which provides Metro-styled buttons:

• https://github.com/ace-subido/css3-microsoft-metro-buttons

Thanks for pitching in to help get the F# Foundation going!

Cheers,

Jack

[Tomas Petricek]

Hi,

Thanks very much for the enthusiasm!

 

One of the goals of the foundation is to show that F# is not just Microsoft – it runs well on Linux and Mac, mobile devices etc. The foundation is not trying to be a new F# initiative – it is trying to be a stable, independent and fairly coservative backing for F#.

 

This also motivated the current design – we did not want the site to be connected to Microsoft and we wanted to have something simple that could last for a long time. That’s why the design is so simple and it mainly just consists of text.

 

So, I think using Metro UI style would be a bit unfortunate, because that would make it look like Microsoft-affiliated site (c.f. http://preview.tryfsharp.org). I also think making the design too trendy might give a wrong impression – we don’t want to look like a cool startup (that is exciting, but not stable).

 

That said, I think there is a lot of possible improvements – but we should first discuss the goals before choosing a technology or visual style. Some improvements might be:

 

·         Fluid layout – the site will probably look really poor on mobile devices, so improving that would be great.

·         Better templating? (I think using Jekyll with Markdown, integrated with GitHub, is really simple to use, so I do not think this is an issue)

·         Changing visual look? (I think we need to keep it simple, but minor styling improvements might make it nicer)

 

Please suggest other things that could be improved! It looks like Bootstrap might be a good way to get e.g. fluid layout. I just think the look should be simple to align with the goals of the foundation.

 

Tomas

 

From: fsharp-o...@googlegroups.com [mailto:fsharp-o...@googlegroups.com] On Behalf Of Jack Pappas
Sent: Saturday, November 10, 2012 6:24 PM
To: fsharp-o...@googlegroups.com
Subject: Re: Moving FSharp.org to Twitter Bootstrap

 

Hi John,

I think this is a good idea -- perhaps it would make sense to use one of the Bootstrap forks or themes styled along the Metro UI guidelines:

• https://github.com/aozora/bootmetro
• https://github.com/TalksLab/metro-bootstrap

There's also a nice CSS3 theme which provides Metro-styled buttons:

• https://github.com/ace-subido/css3-microsoft-metro-buttons

Thanks for pitching in to help get the F# Foundation going!

Cheers,

Jack

On Saturday, November 10, 2012 8:59:50 AM UTC-5, John Fair wrote:

Hello all,

 

I'd like to get a discussion going about moving fsharp.org to a more extensible/maintainable framework like Twitter Bootstrap.  There are several advantages around doing this:

• Twitter Bootstrap is an open source framew            ork, so it's in keeping with our open source mission statement

• TB is very well documented (as you can see from the first link above)

• This makes it very easy for new people, or non-web-developers, to contribute to fsharp.org on GitHub.  

• It provides a very robust HTML/CSS/JavaScript framework that is under continual development by the OSS community
• TB provides a responsive design element that allows it to scale to the device (Tablet, Phone, Desktop, etc)
• There are a plethora of Twitter Bootstrap Templates available on the web (as well as many folks, such as myself, who've been creating TB-based sites for awhile now)

I am bringing this up now while the site is still in its infancy.  Getting the TB scaffolding in place will take a deft hand considering the integration that will need to happen with Jekyll.  I know that there are a few people I can count on to help out with the transition, but I wanted to get the group's consensus before moving forward.  It will be a heavy lift upfront in order to save us the headache when the site is built out further.  

 

I welcome any and all feedback (including competing scaffolds/frameworks such as Foundation, etc).  I'd like to get started on this as soon as I can!  Please keep in mind that the site uses a markdown-like compiler (Jekyll) and isn't run on an engine like IIS.  This makes using tools like WebSharper challenging (if not impossible).

 

Thanks,

John

 

P.S. Silence is acceptance.  If you don't have an opinion, or just don't respond, then I assume you're fine with me doing this.  :)

--
--
You received this message because you are subscribed to the Google
Groups "FSharp Open Source Community" group.
To post to this group, send email to fsharp-o...@googlegroups.com
To unsubscribe from this group, send email to
fsharp-opensou...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/fsharp-opensource?hl=en
 
 
 

[John Fair]

Hi Tomas,

You'll notice in my original post I didn't make mention (short of the plethora of TB templates available online) of the visual style at all.  My list of pros for TB consist of stability, maintainability, extensibility, etc.  For instance we get a responsive design for "free" when moving to Bootstrap.

What the overall visual design looks like is certainly up for debate.  However, making the transition over to Bootstrap involves quite a bit more than the visual state of the site.  For instance, we need to:

• Integrate the TB files (CSS, JS mostly)
• Implement HTML5 Boilerplate for the base Jekyll template (this provides us a very good base from which to start building the site)
• Identify the main and sub-sections of the site (such as left and right side navigational/informational elements)
• Once they're identified we determine what the overall fluid-column layout that we should use
• Rewrite the various areas of fsharp.org that already exists (i.e. Math)

How about I implement this and show you what it would look like from my fork?  That way you can pull down my fork, see what I'm talking about, and we can move forward with the visual-design conversation?  I have no horse in that race (UI design), so I'm happy to implement whatever design the people choose. :)

John 

[Chris Marinos]

I think it's a good idea. I agree with Tomas that a more "dated" look shows stability, but integrating with twitter bootstrap shows that open source F# doesn't go against the grain of other great open source technologies already in the ecosystem. I would also +1 the idea to NOT use metro style. F#'s is obviously always going to be tied to Microsoft, and for good reason- there are a lot of benefits. However, for driving open source adoption, I think it makes sense to show that F# is different than a lot of other Microsoft technologies (in a good way). I believe that using Metro UI would rub the open source community the wrong way. Just my 2 cents, though. :-)

John- let me know if you want help with this. I'm happy to meet up for a F#/web hack session.

-Chris

[John Fair]

Hey Chris,

I thought you were in Boston right now?  If not I'd be down for a hack-a-thon today :)

RIght now I'm just porting the site over to Initializr + Bootstrap and trying to figure out a navigational structure for the site.  Hopefully I'll have something I can show off this afternoon. 

In the mean time if anyone wants to Google search some Twitter Bootstrap Templates and make some non-Metro suggestions that would be awesome!

John

[Chris Marinos]

Yeah, I'm in Boston. I'll be back Tuesday, but that may be too late for the hack-a-thon :-)

[Tomas Petricek]

Hi,

I think moving to TB to make the site scale better is a great idea, as long as we can keep similar simplicity in the design and in how the site can be editted using GitHub.

 

As for the navigational structure, this should be simple for now. The site really consists of just two pages, although I think we can add sub-pages for stacks (like math, web, etc.) and for community (like user-group, tutorials, books, etc.), but again – this should grow organically only if the rest of the community is happy with using fsharp.org as the hub (otherwise we can just link other existing great resources).

 

I would like to keep these two things:

 

·         Simple design (if you can convert the current look to TB, that would be ideal – that would separate design from technical implementation and we can improve design later).

 

·         Simple contributions (I think GitHub + Jekyll work really well for this – people should be able to contribute just by editting Markdown files and submitting them as pull requests to github and I want to be able to merge them just by clicking the Merge button).

 

I think fluid layout is really the key benefit for me – if you can change it to show the middle column first when you’re on a small screen and the menus below that (on the homepage) or just the left menu below the main content (on other pages), that would be super.

 

I did not look at TB in details, but if the above is possible, then that would be excellent. I’m looking forward to your experiments!

 

Thanks!

T.

[John Fair]

Hi Tomas,

Right now I'm implementing a very very similar design to what we have on fsharp.org.  It's not 1:1 with the design, but I think you'll be happy with it anyway.  

I'm not entirely sure yet of the templating capacity of Jekyll yet, but I'm looking into it.  I'd like to make the pieces of the page (left nav, center content, right nav) more modular if possible.  That just falls on me getting more familiar w/ Jekyll.

Contributions will still work the way they do today, I'm still leveraging Jekyll for everything.  

As for the center content appearing above the left-hand navigation, on a mobile device, I'll have to look into that.  The default behavior of (most) responsive designs is to collapse a 3 column layout into a 1 column layout, so:

A | B | C

becomes

A

B
C

I can't promise anything there, but I will keep it in mind while implementing TB.

John

[John Fair]

Hello all,

The changes are done and up on my fork under the "Bootstrap" branch located here: https://github.com/botanist/fsfoundation/tree/Bootstrap

I haven't taken the time yet to test on all browsers, but baring any kind of unforeseen circumstance it's cross-device capable now.  I've tested the responsiveness of the design on OS X (Safari, Firefox, Chrome) with success.  There's still a few things I'd like to tweak, but I think this is a good start.

If you know how to run the site locally, please take a minute to pull down my branch and take a look at it.

Thank you,

John

[John Fair]

You can all see the changes here (without needing to pull the site down):  http://botanist.github.com/fsfoundation/

[Tomas Petricek]

Hi John,

I was just going to suggest that you could publish it like this so that others can see the results.

 

I have to say it looks really nice overall :-). There is a few things I’d maybe change, but I’d be quite happy with it, so I think we could go this way. But I’m not the only one who should decide this... I’m adding fsh...@fsharp.org (not sure how this will work). Can I ask more people to give some opinions on the new page created by John?

 

T.

 

From: fsharp-o...@googlegroups.com [mailto:fsharp-o...@googlegroups.com] On Behalf Of John Fair
Sent: Sunday, November 11, 2012 8:49 PM
To: fsharp-o...@googlegroups.com
Subject: Re: Moving FSharp.org to Twitter Bootstrap

 

You can all see the changes here (without needing to pull the site down):  http://botanist.github.com/fsfoundation/

--

[Chris Marinos]

Looks great to me. The links at the top of the page are broken though. Is that a known bug?

[John Fair]

Yes, unfortunately the site isn't meant to be hosted in a sub-directory.  This isn't like IIS/Apache where I can use relative root directories.  I've already got a few commits to undo (for things like this) so let me just go fix them all so that it works.

[Dan Mohl]

It looks great!

Thanks,

Dan

Sent from my iPhone

[7sharp9]

I agree that a metro style would be a mistake, a nice clean screen with clear description of whats available and what you want to achieve is the best way.  A lot of open source projects use boot strap and the information presented is nice clean and informative which is the way to go in my option..

Dave.

[Don Syme]

Looks great from a phone!

---

From: John Fair
Sent: 11/11/2012 13:30
To: fsharp-o...@googlegroups.com
Cc: fsh...@fsharp.org

[John Fair]

I just pushed a fix for the Foundation section (from Phone/Tablet).  I'm swapping out the Hero Unit so it only displays on Desktop resolutions.  This renders MUCH nicer on a mobile device (than Hero did).

[Jason McCampbell]

Hi all, the new rendition of the site looks very nice. I saw a tweet from Thomas looking for content contributions to the Software Stack section. Is there anything floating around describing what level of content is envisioned in those sections?  The foundation is a great idea and I'm going to see if I can find some extra time over the next couple of weeks to at least contribute a little bit.

Jason

[John Fair]

Hello all,

Quick status update:

• I have created a pull request for the Bootstrap changes: https://github.com/fsharp/fsfoundation/pull/12
• I will be removing the botanist/fsfoundation fork shortly
• Going forward I will be using the QuickenLoans/fsfoundation fork.  There are several others interested in contributing from our organization (Quicken Loans) so we'll be using a centralized fork.  I'm still an owner of this fork, and my commits still come from "botanist".
• We should try to standardize on how, and what, information we're going to display on the Foundation page for founding members.  
• For instance, some members have titles, or places they work at, while others are just a name
• Also, we're probably better off going to a table-based format if we're going to continue to add members as it'll keep things a bit cleaner (alternating lines, etc)

If you have any questions please feel free to ask.

Thank you,

John

[Fahad]

Just a heads up if someone wants an online designer to design pages with t-bootstrap, http://www.jetstrap.com/

 

-Fahad

[Tomas Petricek]

Hi John,

There were no objections against the new design, so I think everyone is happy with switching.

 

Here are some minor changes that I’d welcome:

 

·         I fetched your pull request and (if I’m correct) there is still a number of members missing. I will not accept any requests to add members for now, so please update it to the current state: http://fsharp.org/foundation.html#members

 

·         I’m not sure about member table. I think there should be some freedom in what people share (I like the idea that you can include affiliation to show the group diversity, but not everyone may be willing to share that). I think all of this – website, email, twitter, role, affiliation should be optional. I don’t think table makes this clear, because it will be quite sparse.

 

·         For now, can we hide "Math" from the top menu? (It needs to be properly written first!)

 

·         Can you add some whitespace between the logo and the "About" heading from the left menu? (Otherwise this looks a bit cramped (there is some space on the original site, which I think, looks better.)

 

·         I think the new main body font looks okay, but can you try using the heading font that was used originally? (I quite liked that one and it was something that could slightly distinguish the visual style of the page from other similar TB sites...)

 

If you’re happy with these then let me know when you update the pull request and I’ll merge it (and then we can accept new members again.)

 

Thanks!

[Tomas Petricek]

Hi Jason,

We do not have any good guideline yet – if you find some time to contribute, even a small amount of information, that would be great!

 

I think that perhaps the best example of how the content might look is the current Tools & Resources page on Try F#: http://www.tryfsharp.org/Tools.aspx (In fact, I think that copying some of the content from there to the foundation site & making it up-to-date would be really useful, because a future Try F# will not have that much info.) But we should probably ask first :-)

 

I created a sample page for Math Stacks that gives some outline: http://fsharp.org/math/. Some of the information for this page might come from http://msdn.microsoft.com/en-us/library/hh304368.aspx (which is perhaps a bit too long and also a bit outdated). So perhaps something similar, but shorter & more focused.

 

Another thing that I’d like to copy under fsharp.org is the site about teaching F#: http://functional-teaching.net/ I think this has roughly the right level of detail. (I wrote this content, so we can copy it just fine.)

 

Thanks!

T.

[John Fair]

Hi Tomas,

I've pushed a new commit to my existing pull request.  It adds the latest member, adds margin-bottom to the header row to create separation, removes the Math link from the main menu, and I was able to get the Orienta font back.

Thank you,

John

[John Fair]

Hi Tomas,

I see you merged my pull request, thanks! :)

Could I get added to the fsharp organization in GitHub?  I'd like to be able to contribute with pull requests, etc moving forward (if you're willing to allow me) on fsfoundation's repository.

Thanks,

John

[7sharp9]

Hi Guys, I noticed that the code in there is not exactly idiomatic Jekyll template usage, could we clean this up a bit with proper markdown files?   I know it will make things far simpler to update going forward.  

Cheers

Dave.

[John Fair]

Hi Dave,

I'm definitely all for it.  The more modular we can make the individual pages the faster we can implement changes (and simpler it is to do merge requests on content versus layout/design).

John

[Tomas Petricek]

Hi John,

That looks excellent, thanks! I did a few minor tweaks (mainly changed spacing for some <li> elements, used normal font for body and Orienta just for headings and made headings not bold). I think it looks really great now (but still quite simple).

 

I changed the list of members to a Markdown that can be more easily editted, but I left the option to specify other information: https://github.com/fsharp/fsfoundation/blob/gh-pages/foundation.md

 

Tomas

[Tomas Petricek]

Hi,

I’m not a Jekyll expert (and I probably just made it even less idiomatic with the new members list :-)).

I’m happy if you clean this up a little – what are the main things that should be changed?

 

T.

 

From: fsharp-o...@googlegroups.com [mailto:fsharp-o...@googlegroups.com] On Behalf Of 7sharp9
Sent: Monday, November 12, 2012 8:47 PM
To: fsharp-o...@googlegroups.com
Subject: Re: Moving FSharp.org to Twitter Bootstrap

 

Hi Guys, I noticed that the code in there is not exactly idiomatic Jekyll template usage, could we clean this up a bit with proper markdown files?   I know it will make things far simpler to update going forward.  

 

Cheers

Dave.

[John Fair]

Hi Tomas,

What are the chances that we name someone (or maybe 2 people) to be in charge of the design (HTML/CSS/JS) for the site? If we set a precedent that custom rules are the norm we'll have a maintenance nightmare on our hands shortly. My big concern is w/ the spacing of the logo/About section.  You've taken the padding off the row and added it directly to the div that contains About (and the rest) which means that the left-hand navigation no longer aligns with the right-hand navigation.  Ideally we need someone who's well versed in HTML/CSS/JS to be the gatekeeper for changes of this sort.  If that's not a concern then feel free to ignore me. :)  

We'll have to look into how best to manage content via Markup files.  Foundation probably should not be a page (i.e. foundation.html), but should be setup more like /Math is setup.  There are advantages to using Jekyll's built-in tagging system (which Dave is probably more qualified to speak to than I am).

Otherwise we're moving along!

John

[Tomas Petricek]

Hi John,

I’m happy to leave the design tuning and implementation of the site to you and Dave (who is interested in improving how we use Jekyll).

 

If you can improve the CSS I added to be match usual style used with Bootstrap, than that would be great. I’m not an expert, so I probably used a wrong method. However, I think that some things in the previous design did not look that good. If you can keep the current look, but make it more idiomatic CSS, that would be great.

 

Yes, I think aligning the menus on the home page does not look good. Either there is too less space below the logo (and it looks cramped) or there is too much (and it looks empty). I think a sensible alternative would be to align the first right heading ("Software stacks") with the top of the logo (and thus make the logo first thing in the left menu). I think that might look okay, so perhaps we can try that?

 

Anyway, I would not worry too much about the look and implementation details – it is really much more important to get useful content on the site!

 

T.