[VUFIND-994] Bootstrap 3 Feedback Created: 23/Jun/14 Updated: 25/Aug/14 Resolved: 25/Aug/14 |
|
| Status: | Closed |
| Project: | VuFind® |
| Components: | User Interface |
| Affects versions: | None |
| Fix versions: | 2.4 |
| Type: | Improvement | Priority: | Major |
| Reporter: | Chris Hallberg | Assignee: | Chris Hallberg |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | bootstrap | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original estimate: | Not Specified | ||
| Description |
|
Since I hogged the comments over at my roadmap at Fork: https://github.com/crhallberg/vufind/tree/bootstrap3 Bootstrap 3 will be the first official IE9+ and JS-first theme for VuFind. What will that enable us to do that we haven't before? Potential New Functionality - Siblings popover in breadcrumbs - Redesigned VuDL - PLEASE COMMENT Other topics: - LESS vs SCSS vs BOTH |
| Comments |
| Comment by Götz Hatop [ 04/Jul/14 ] |
|
Congratulations for the great work ! Looks very promising, and also nice to see that font awesome comes into play ! -- Götz |
| Comment by Chris Hallberg [ 07/Jul/14 ] |
| Do you still have a question about icons.css? To be clear, icons.css is overriding certain font awesome icons with silk image icon to match the blueprint theme. |
| Comment by Götz Hatop [ 08/Jul/14 ] |
|
Yes, the question would be why the awesome icons are overwritten ? I have startet to use fa icons in bootstrap2 and have come to the solution to provide an empty icon.css for boostrap3 such that I can have the fa icons (and I dont have to modify templates any longer). Will I loose functionality with that approach ? |
| Comment by Chris Hallberg [ 09/Jul/14 ] |
|
The icons.css is only for the Bootprint themes, it does not affect the Bootstrap theme. You won't lose any functionality, and any icons you use that aren't named in the icons.css file are going to be the FA icon. Icons.css was the solution I came up with to introducing graphical Silk icons (http://www.famfamfam.com/lab/icons/silk/preview.php) to Bootprint. If you want your theme to be based off Bootprint, but have the default FA icons, removing icons.css from your theme.config or deleting it are both valid options that won't break anything. It would only convert the icons that I replaced graphically back to the Font Awesome icons. If you're switching to the latest Font Awesome in the Bootstrap 2 theme, you'll have to replace the word "icon" with the letters "fa" everywhere in icons.css in Bootprint 2 if you want to keep the Silk icons. |
| Comment by Götz Hatop [ 10/Jul/14 ] |
|
Thanks for the explanation ! |
| Comment by Chris Hallberg [ 14/Jul/14 ] |
|
I'd like to argue for the removal of SCSS support in favor of only LESS as a next-gen CSS development/optimization tool. Some reasons: - Better support for LESS (and caching) in PHP than SCSS - The many similarities between the two - Lack of knowledge about benefits of SCSS over LESS. Please advise if ye have knowledge of the dark art of SCSS. |
| Comment by Markus Mächler [ 31/Jul/14 ] |
|
Hey Chris We appreciate the decision on chosing LESS over SCSS. What we are currently missing until we really can use LESS is an inheritance mechanism for less files. (or we have not figured out the right way to do so yet) We have such a setting: themes/[our base theme]/less/colors.less themes/[our base theme]/less/base.less themes/[our child theme]/less/colors.less Now what we would like to have is an inheritance mechanism as it is working for phtml files. We would like that [our child theme] uses its own colors.less file in combination with the base.less file from the [our base theme]. The problem is that the LESS compiler can not share variables across multiple files unless you use the @import statements in the file. Solution scratch: We thought about a solution. If vufind could merge all the less files that are configured in the theme.config.php and take care that colors.less file in the child theme is overwritting the colors.less file in the base theme, then the less compiler would just receive one fully merged file and the sharing of variables would not be a problem. So the inheritance takes place before the compilation and not after. This would simply generate one css file. What do you think? |
| Comment by Chris Hallberg [ 31/Jul/14 ] |
|
That was my thinking behind the compiled.less file. Getting theme inheritance overwriting and LESS variables to play nicely was a big challenge, so here's the structure I came up with. In the Bootstrap 3 theme.config, you'll see that only compiled.less is there. All that compiled.less contains is an @import "bootstrap", pointing to the bootstrap.less file that includes the Bootstrap library and some custom theming. compiled.less --> bootstrap.less Now in the Bootprint 3 theme.config, you'll also see only a compiled.less, which overwrites the parent's compiled.less. It also contains only and @import for bootprint.less, but then bootprint.less @imports the parent theme. bootstrap.less ^ | compiled.less --> bootprint.less --> variables.less The Bootprint 3 theme also contains a variables.less (@imported into bootprint.less) that overwrites some variables (colors, padding) in the Bootstrap library, and this works just fine because LESS variables are lazy-loaded. What I'm going to test right now is putting a custom variables.less in a child of Bootprint 3 and make sure that it overwrites the parent. You idea of putting all the files together would work if we're careful. The main thing that the compiled.less method is supposed to prevent is ending up with a copy of the Bootstrap library for every layer down a child theme is. Also, as you said, having one CSS file is the ideal goal for compiled CSS, it gives the best loading performance by far. Will get back to you after the test. Let me know how the current compiled.less method suits you, I apologize for the scarcity of documentation at this stage of development. |
| Comment by Chris Hallberg [ 31/Jul/14 ] |
|
There is indeed a bug in the inheritance code. I'm having a hard time getting this setup (overwriting just variable) to work. Will fix. bootprint: - compiled.less - variables.less child: - (no compiled.less) - variables.less |
| Comment by Markus Mächler [ 31/Jul/14 ] |
|
I am not fully aware of the process behind the inheritance implementation, but I do not see a possibility to do this with an @import statement since their always relative to the file. That is why we thought of merging the files instead of importing them with @import. However, maybe you see a way to do so. Anyway, thank you for having a look at it! |
| Comment by Demian Katz [ 05/Aug/14 ] |
| Apparently the library we are using for LESS offers the option to set an import path stack to search multiple locations. Chris spent some time experimenting with this, but he didn't finish before leaving on vacation. Hopefully he'll have more input on this in a couple of weeks when he returns. |
| Comment by Chris Hallberg [ 19/Aug/14 ] |
| I was unable to trick the Less compiler into pulling from parent files, having a compiled.less is going to be an essential to any Less theme for the time being. However, I'm still looking into an error on CSS embedded images not loading properly. |
| Comment by Chris Hallberg [ 19/Aug/14 ] |
| Images are fixed, I will continue to be open to other parent behavior, but for now it going to be required to have a compiled.less which imports the parent and custom less files or (preferably) its own custom less file, which calls the parent. |
| Comment by Chris Hallberg [ 25/Aug/14 ] |
|
I created pages for Bootstrap migration (https://vufind.org/wiki/bootstrap_migration) and Using LESS (https://vufind.org/wiki/using_less) on the wiki. Thank you all for the feedback! Since we're so close to release we'll be handling Bootstrap 3 issues and requests as normal, separate tickets from now on. |
| Comment by Chris Hallberg [ 25/Aug/14 ] |
| Moving to regular, multi-ticket handling to prevent overburdening this ticket. |