CMS styles, front-end frameworks and guiding CSS principles

295 views
Skip to first unread message

Paul Clarke

unread,
Dec 22, 2015, 11:20:03 PM12/22/15
to SilverStripe Core Development
I thought I would get this conversation underway in the hope that early next year some decisions can be made about certain directions we go in for the build up to 4.0.

I feel like the CMS could do with some huge improvements to clean up some of the styles and make them more consistent. There are many ways we could go with this but I would like see what others think in regards to an approach.

How do people feel about front-end frameworks or adhering to a specific methodology, and if so which ones would you suggest?

What do you need to be guided during the development of modules and interface changes to core?

It would be great to hear what people think, cheers




Jonathon Menz

unread,
Dec 23, 2015, 1:26:03 PM12/23/15
to SilverStripe Core Development
I think using a front-end framework could be a good idea for the CMS. It's sort of like getting a style-guide for free because you can check out the framework documentation to see what components are available and know that if you add the right markup, you probably won't need to add much in the way of CSS. We could build a custom theme (bootstrap example) so all the components have a unique SilverStripe flavour, but they still observes the basic structure defined by the framework.

I haven't used a front-end framework for anything before but the CMS seems like the right place to use one as it would provide a structured and documented base to build upon. This should make contributing to interface development a lot more accessible, which is important if we want to attract CMS contributions from a wide variety of people.

As to which framework I don't have a strong opinion because I'm not overly familiar with any of them. Bootstrap with a custom theme might be good because of sheer popularity, many developers are already familiar with it and it's likely to be maintained for a long time yet. V4 is due out soon so that could be a good starting point.

Zenmonkey

unread,
Dec 23, 2015, 1:56:29 PM12/23/15
to SilverStripe Core Development
With the possible move to React.js it may also be a good idea to modularize the design of the backend as well.  I’d also like to see the scss for the backend a little more customizable, where we could replace a few variables and re-brand the backend. Using a framework will also make it easier for developers to create custom module designs since there’s an established structure underlying the design that’s already well documented.

I do realize it adds an extra dependancy and that has been a concern in the past, but we now have choice in strong, highly supported frameworks. Personally I’m a fan of Foundation as framework since it’s a little more “neutral” than Bootstrap out the box, but I try to remain tool agnostic.

The only real major issue I think there is, if finding a way to make the grid field more customizable, but I’m pretty sure that’s already on the roadmap. I also would like to see the return of the old popup admin for dealing with simpler data objects, a screen change seems like overkill, and inline edition is often too limiting

Paul Clarke

unread,
Jan 19, 2016, 6:42:57 PM1/19/16
to SilverStripe Core Development
Thanks for your input guys. I'm going to keep this conversation going in the next few weeks and start creating a list of possible directions with pros and cons so that we can make more of an educated decision around this.

A few things to consider:
How things integrate with React (the CSS framework would be used on the Files area where React is being used)
Should Flexbox / Grid Layout or other layout system be used and if so would this replace jLayout
What parts of a CSS framework would be most useful for us (can we use only parts of one rather than the whole thing)

I'll post back some findings over the next week but I welcome any contributions or opinions on this mater.


Mike

unread,
Jan 19, 2016, 9:30:41 PM1/19/16
to SilverStripe Core Development
Methodologies come and go, so long as there is clear documentation and the existing methodology is adhered to, I can't see much of a problem with whatever one is chosen.


"Should Flexbox / Grid Layout or other layout system be used and if so would this replace jLayout"
I guess it depends on browser support and rendering of existing CMS structure?


"What parts of a CSS framework would be most useful for us"
I think it would be better to include only the JS and CSS from a framework that is needed for the render. How that is done will need thought and discussion. It would be good to be able to specify includes (just like css/js includes on the frontend) though either js or the SilverStripe framework to determine what is loaded.

Being mobile first should also be a must.

David Craig

unread,
Jan 19, 2016, 11:46:15 PM1/19/16
to SilverStripe Core Development
The CSS framework I've had much experience with is Bootstrap, so I don't really have anything to compare, I've found it good though. Easy to pick up and create responsive layouts with, plus it's well documented.

I'm not sure how useful the JavaScript components of a framework like Bootstrap will be in a React context. I've seen examples of people wrapping jQuery based UI in React components... There are also React implementations of popular frameworks like Bootstrap. Something we need to keep in mind is SilverStripe UI components need to be extendible, you need to be able to write GridField extensions for example, so the extendibility of any thirdparty React components we pull in have to be evaluated. So the trade-off is saved effort in not building components from scratch versus how customisable the components are.

I think at a minimum we should use a framework's grid system, I have no strong feeling on which one. Then pull in more of the framework's features as it makes sense. 

Anselm Christophersen

unread,
Jan 20, 2016, 12:29:47 AM1/20/16
to silverst...@googlegroups.com
I’m a strong proponent of ZURB Foundation, and am currently working with the latest version (6) on two new SilverStripe projects - one of them using React.
On the React based project we’re trying to skip using the jQuery based javascript alltogether, but it’s a little hard to disentangle it.

I’ve been using Bootstrap several times as well though, and think it’s a great tool. I’m especially looking forward to the Sass based Bootstrap 4.
I think for Apps like the SilverStripe CMS, Bootstrap is not a bad choice at all. Here it’s also nice to be able to leverage the billions of code written for it.

Another interesting point for Bootstrap - when going with React - is this toolset: https://react-bootstrap.github.io - it seems to be fairly popular. That would save a lot of time writing React components.


My 5 cents - as mentioned earlier, I’m really excited SilverStripe is considering going with React


--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to silverstripe-d...@googlegroups.com.
To post to this group, send email to silverst...@googlegroups.com.
Visit this group at https://groups.google.com/group/silverstripe-dev.
For more options, visit https://groups.google.com/d/optout.

Ingo Schommer

unread,
Jan 20, 2016, 4:41:10 AM1/20/16
to SilverStripe Core Development
Really looking forward to see the CMS CSS cleaned up, that's been bugging me for years! :)
We're looking at WordPress Calypso as an example of a large React app, and they have implemented some interesting patterns.
Specifically, React makes it easy to cleanly separate out UI components. I think we can also benefit from extending this approach to styling.
Each component should have minimal dependencies on global styles, get properly namespaced classes (BEM?),
and can be documented as a standalone entity in terms of both behaviour and styling.

Ralph Slooten

unread,
Jan 20, 2016, 1:04:00 PM1/20/16
to silverstripe-dev

With all these proposed changes to the cms, has there been any thought (with the future in mind) of supporting mobile devices/tablets?

I fully understand the complications this brings, as well as the limitations it sets, but with this idea of literally rebuilding the entire cms it seems like a good time to seriously look at the options.

I feel that it is the elephant in the room that developers tend to ignore. Maybe this is maybe the wrong thread?

Regards,
Ralph

--

Zenmonkey

unread,
Jan 20, 2016, 2:20:06 PM1/20/16
to SilverStripe Core Development
I'm a big fan of Foundation as well. Traditionaly it has s been much more "nuetral" than Bootstrap, however what I've seen of new version of bootstrap they seem be moving more to a mixin based system than in the past.

I saw mention of potentially moving to flexbox. While I've been using it some live sites, I don't know it's fully ready for prime time. Even with MS dropping support for pre-11 browsers it will tiprobably be some time before we start seeing widespread adoption and even IE 11 is buggy with it, not to mention that Safari only recently dropped vendor prefix. Any code weight you save by moving to flexbox, you gain back in adding vendor prefixing.

Founadtion 6 has done a lot to clean up bloat in the framework so even the raw version has gotten considerably smaller. Plus it does have an option flexbox build if you really want to play with it.

As I've mentioned before, I'd like to see CSS move to using more advanced features of SASS so that customziation is easier using a variables file.

Conrad Dobbs

unread,
Jan 20, 2016, 4:11:20 PM1/20/16
to SilverStripe Core Development
I've been trying out bourbon and neat (http://neat.bourbon.io/, http://bourbon.io/). Very similar to compass which provides familiarity, but more light weight and no need to install gems etc.

clarkepaul

unread,
Jan 20, 2016, 5:30:15 PM1/20/16
to SilverStripe Core Development
I think going forward we will need to keep mobile in mind when implementing the front-end, perhaps even developing it in sync with the desktop version but just not giving it the polish to be released—maybe that could be a community project to get it over the line?

Unfortunately full responsiveness isn't on the cards for 4.0 Alpha but there are UI improvements which are going in the direction for allowing the UI to be more responsive. The main one being the updates to TinyMCE so that the main editing panel can go smaller (currently has a min-width of 660px or something?)

Ian Herbert

unread,
Jan 26, 2016, 11:08:24 PM1/26/16
to SilverStripe Core Development
I've worked with Foundation a few times and think it is really good, it's more flexible than Bootstrap (though I'm sure Bootstrap 4 will be excellent - can we wait for that??).  Either one really will make it easy for people to jump in.  I do like the way both of these frameworks add semantics into the HTML for setting up the Grid etc... but that's just my preference.

I don't have much else to compare it to, but found BEM excellent to use for conventions, and ITCSS a good way to structure the code.

Paul Clarke

unread,
Jan 27, 2016, 8:09:51 PM1/27/16
to SilverStripe Core Development
After doing a fair bit of comparisons I think there are two main candidates to consider—Foundation and Bootstrap.

As time will be limited for introducing a framework, I'm thinking its better to go with one which offers us a decent range of functionality and exclude the things we don't need (opposed to using something minimalistic and adding to it as we go, e.g. something like Pure, Skeleton or using Compass as a base). Bootstrap and Foundation seem to be both about the same size depending on how you use them, and both are easy to work with and good docs. Most people are familiar with one at least one of them so it should be fairly easy for the community to adapt to the change. Not very surprising but they have become very similar, in fact I'm finding it hard to point out major differences which could influence us either way. Foundation has improved accessibility wise, Bootstrap has improved size wise, and feature wise they are pretty much like for like.

Bootstrap 4
+ Hot off the press code (still being pressed)
+ Biggest community base and the most resources typically
- Still in Alpha which might cause us some headaches if things change in parallel as we develop (there is no date as yet as to when this might be stable or BETA that I have seen).
note: React-Bootstrap doesn't work with Bootstrap 4 yet

Bootstrap 3
+ Stable
+ Biggest community base and the most resources typically
+ Has React-Bootstrap
- Old, feels wrong to use
- Bloated compared to other options

Foundation 6
+ This is a recent release (Nov 2015)
+ Stable
note: Foundation also has a framework for specifically for Web Apps (2014) which looks decent but only uses flexbox and uses Angular, although there is a React components version

A few requirements for this choice have been:
  • a preference of SCSS
  • must work with IE9 (but an easy migration path to flexbox for the future)
  • good docs
  • popularity—a solid community base which wont all of a sudden disappear
  • big enough framework so that people will have guidance when creating modules or new elements
  • file size vs choice
  • component based
  • license
  • needs to be adapted to work with and without React so it can be transitioned to be used throughout the whole CMS

I would still like to consult the guys implementing the React stuff to see how big of an impact this decision will make on them but I'm thinking we either take a slight hit with Bootstrap 4 or go with the safer option Foundation 6. There are ways to integrate things like BEM into the CSS structure but would require a bit more documentation, it could work to our advantage knowing what is custom to the CMS (using BEM) and what is default framework.

Paul Clarke

unread,
Jan 27, 2016, 9:52:07 PM1/27/16
to SilverStripe Core Development
This is the best comparison I've found so far between the latest Bootstrap and Foundation but I think Bootstrap has progressed a bit further than what the table shows. http://responsive.vermilion.com/compare.php

Anselm Christophersen

unread,
Jan 28, 2016, 6:56:56 AM1/28/16
to silverst...@googlegroups.com
We’re currently working on a web app based on Foundation 6 and React.
I love that combination, but there’s one big BUT. We started out implementing Foundation’s Javascript plugins to the React app, but figured out that’s just not a good idea. Things get pretty messy, and jQuery plugins and React are just 2 different philosophies, so we’re currently in the process of refactoring everything to get rid of the Foundation Javascript. We stick with the CSS though, which works great.

Based on my experience with this topic, I propose:

1. If going with Foundation 6
Only use the CSS, and either rewrite the needed Javascript or just use other components.

2. If going with Bootstrap
Go with the Sass-version of Bootstrap 3 (https://github.com/twbs/bootstrap-sass) and use React-Bootstrap for components.
I propose staying with the well proven Bootstrap 3 for SilverStripe 4, with the plan to upgrade to Bootstrap 4 once it’s stable (which could be for SilverStripe 5). The upgrade path shouldn’t be that steep.



My preference would be to go with the conservative option of Bootstrap 3 and React-Bootstrap, as that way we can leverage a battle tested system and get lots of ready-to-use React components out of the box.
From an architectural point of view I’d probably prefer to go with Foundation 6 and create own React components for it, I just don’t think the extra time needed would be worth it, as I expect it to be MUCH more time consuming.


Anselm

Note that I don’t think Foundation for Apps should be an option. It’s old, based on Angular, and the React port neither seems to be complete nor actively maintained.


Mike

unread,
Jan 28, 2016, 3:36:37 PM1/28/16
to SilverStripe Core Development
I'd be inclined to agree with Anselm. Although Bootstrap would be my choice, it might be hard to use Bootstrap 4 without the React components and might take extra time to implement which isn't the best.


On Wednesday, 23 December 2015 17:20:03 UTC+13, Paul Clarke wrote:

Paul Clarke

unread,
Jan 28, 2016, 4:04:39 PM1/28/16
to SilverStripe Core Development
Cheers for that anselmdk, I can imagine that with the time pressure Bootstrap 3 is looking more favourable purely because of the React components. There has been a start to react components for Foundation but it only has two components currently unfortunately.

Paul Clarke

unread,
Feb 1, 2016, 11:14:35 PM2/1/16
to SilverStripe Core Development

Hey guys, I've written up a bit of an summary of our thoughts, with the following proposal...

With SilverStripe 4 on the horizon we have begun early stage planning and development. As the CSS and HTML hasn’t been a main focus of past releases we have been thinking about about ways we can increase the quality and flexibility of the CMS to its users and developers. The CMS needs to be flexible enough to take on new directions, new features and be pliable to a whole heap of new ways of presenting information and user flows.


As we have limited time to craft our own tailored front-end framework we have decided on using a front-end framework. We hope that this will jumpstart the development process somewhat and provide a solid base and guidance for the SilverStripe community, their contributions, and allow easier customisation of the CMS and modules.


We feel that the integration of a framework will be a long-term commitment, and we want something that will be able to last at least the next few years without a major upgrade or a dying community base.




Why we chose to use a front-end framework?


Plug in and play—you don’t need to be an expert to use them, with some basic HTML/CSS knowledge and well documented examples you can build some pretty amazing things.


Minimizes the time and effort—we can spend more time on making the user experience better, and spend more time on developing features which really matter.


There is already documentation written to help our community write code in a consistent way. The developer community will be able to build modules which have a consistent codebase with the framework/cms and have the advantage of pre-built components which are ready to use and adapt.


Because of the popularity that ready-to-use frameworks have, you can rely on help from the community in the form of articles, tutorials, and framework add-ons and extensions.


Stable and well-tested code—because there is a lot of people already using this code in production you can be sure that the majority of bugs are already known about and there are probably workarounds that have been shared. This means that your website will look and behave properly on all browsers that the framework supports.


We get regular updates with bug fixes and new features for the framework.




Which Frameworks have been considered?


We considered many frameworks both big and small, we could have used a small framework as a base and spent time building it out to get to the point where we have a tailored solution but unfortunately we felt that there is a good chance we won't have the time or resources that this type of solution needs to be done well.


We have looked at many frameworks including and not limited to: Bootstrap, Foundation, Foundation-apps, Semantic-UI, Pure, Skeleton, Bourbon, Element-UI…  and a multitude of others.




What are we looking for?


  • Our CMS must work with IE9 for at least the next major release cycle. Although it would be good if there was an easy migration path to flexbox for future releases of the framework.

  • Good documentation.

  • We have a preference of a framework which is ready to use in SCSS.

  • Popularity—a solid community base which won’t suddenly disappear and big enough so that people will have guidance when creating modules or new elements.

  • Variety of functionality but at the same time we need to consider framework file size.

  • A component based structure so we can easily and gradually integrate them with React when needed to improve the overall experience. (if there are already pre-built React components available then even better).

  • A suitable license that can be easily shared and allow adaption.



The main contenders


Bootstrap 3

+ Stable

+ Biggest community base and the most resources typically

+ Has React-Bootstrap

- Oldish, could need updating sooner than we would like

- Bloated compared to other options


Bootstrap 4

+ Hot off the press code (still being pressed)

+ Biggest community base and the most resources typically

- Still in Alpha which might cause us some headaches if things change in parallel as we develop (there is no date as yet as to when this might be stable or BETA that I have seen).

note: React-Bootstrap doesn't work with Bootstrap 4 yet


Foundation 6

+ This is a recent release (Nov 2015)

+ Stable

- Harder to customise the javascript for React

note: Foundation also has a framework for specifically for Web Apps (2014) which looks decent but only uses flexbox and uses Angular, although there is a React components version



We are proposing…  Bootstrap 4!


After reviewing the many options out there we are proposing to use the latest version of Bootstrap which is currently in development. This decision hasn’t been an easy one as there there have been plenty of great options out there. This version of Bootstrap still has a fair bit of work needed before it is stable but it does fulfil a lot of the requirements mentioned above. We are conscious that there will be teething issues to some degree as things can change over the following months but at the same time we don’t need the full framework to be perfect just yet.


Once this framework is integrated into the CMS it should be good for a few years at least and the SilverStripe community will have a larger thriving community to feed off. One major benefit with Bootstrap is that as part of version 3 there is a great example of how React components can be used with the framework. We aim to leverage this knowledge to support the development of our own custom React components when they are needed. There are a multitude of options available for advanced components like date pickers, advanced select dropdowns compatible with Bootstrap so we feel we won’t be short of choices.


With our own custom look and feel applied, we hope the community of developers and users of the CMS will benefit the most from this decision. We have already received some pretty good feedback, and a huge factor in making this move has been based on input from the community.

Anselm Christophersen

unread,
Feb 2, 2016, 2:46:11 AM2/2/16
to silverst...@googlegroups.com
I support the choice of Bootstrap 4.
If implemented properly I can see contributing to and customizing the CMS UI becoming much easier.
And best of all, you won't have to learn yet another way of doing things. It'll be based on technology you probably already know, and/or are eager to learn more about.
That's always been why I've been happy staying with SilverStripe. Some of my early arguments were that I could improve my Object Oriented PHP skills instead of having to dig into some custom Wordpress/Typo3/Drupal-World. SilverStripe then adapted Sass early on, have pushed git, and composer, and are now proposing React. I’ve followed along with each of these technology decisions, and have to say I’m very happy I did. These are all technologies, that I’m now applying in my day-to-day work.
Based on thinking of this trajectory, and the arguments laid out by Paul, I support and even prefer (contrary to my precious arguments of staying w. Bootstrap 3) the idea of wanting to go cutting edge, and assume that this could win over quite a few new people.

Also, as I understand it, you're considering to not fully move to React in SilverStripe 4?
That is, third party components using jQuery and Entwine would still be supported?
Thinking about it, I think it would make sense to keep on supporting jQuery and Entwine based modules in SilverStripe 4, and phase that support out for SilverStripe 5.
That would allow for gradually moving to React, and giving module maintainers time to accommodate to those changes.
Talking technically, I'm not sure how that would work with a Flux-based architecture (Redux), but to my knowledge, Facebook built React exactly for this use case.

All in all, I'm excited that SilverStripe keeps on doing informed decisions, and I'm happy to keep on following along.


Paul Clarke

unread,
Feb 2, 2016, 5:36:13 PM2/2/16
to SilverStripe Core Development
That's exactly right anselmdk, our main aim at the moment to rebuild the Assets area which will be using React. The rest of the CMS will keep using the existing tech for the time being and we will work through things step by step or area by area (which ever makes more sense), this approach will be similar to swapping out the CSS (starting just in the Assets area).

Ingo Schommer

unread,
Jun 13, 2016, 6:02:41 PM6/13/16
to SilverStripe Core Development
We're making progress on this, see https://github.com/silverstripe/silverstripe-framework/issues/5677 for an overview of where we're at!

Michael van Schaik

unread,
Jun 14, 2016, 12:15:55 AM6/14/16
to silverstripe-d.
A bit late, as SSv4 is already in alpha by now, but I'd like to confirm that I think the decision for Bootstrap 4 is a good one. 

I was a bit surprised initially that BS was picked over Foundation but after having worked with Foundation again on a few projects recently, I cannot help but conclude that the whole 'most advanced responsive front-end framework in the world' is a little over-stated (or maybe it's just not what we're looking for in a framework).

For example we've found it still quite involved to get up & running (eg IDE crashing on 110MB of node modules being pulled in). Also the JS modules seem to need some work in some places, like plugin-options simply not being implemented correctly or at all, or plugins needing a very strict markup. And tweaking the SCSS can give some unexpected results on seemingly unrelated areas (eg try customizing navigation styling). Overall my impression of F6 was that it may be a bit too 'most advanced' for a client facing framework.

Generally, I think the larger community and continuous battle-testing of Bootstrap will make for a better choice for a CMS & Framework.

Reply all
Reply to author
Forward
0 new messages