Forward - Blacklight with Bootstrap

[Eric Larson]

Hi all,

Jessie was asking us (the Wisconsin guys) about Blacklight with Bootstrap.  We're currently upgrading to Blacklight 3.2 and implementing my new UW-Madison themed, bootstrap-based, design on top.

I don't have any code to share, but here are my screenshots of the new design:
https://mywebspace.wisc.edu/ewlarson/web/forward/

You can see places where the bootstrap media-grid (now thumbnails), buttons and button groups really help polish the application.  We'll be live with this design as soon as possible.  We'll also be customizing the header/footer for some other UW-System schools, too.

Let me know if you have any questions.

Cheers,
- Eric

[James Stuart]

I definitely think we should talk about this next conference call.

> --
> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.
> To post to this group, send email to blacklight-...@googlegroups.com.
> To unsubscribe from this group, send email to blacklight-develo...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
>

[Sean Hannan]

I love it.

For a period, we were discussing having the ability to do "themes" (whatever that means) by having separate gems. I was talking to cbeer today about it, and he said that it seems possible, but as of yet, no one's really taken in on. I think such a thing would be a huge boon to adoption (particularly for the non-library world).

Is there any chance that you could try to package this up (maybe a branding-less version?) to help us get moving on the theme front?

-Sean
________________________________________
From: blacklight-...@googlegroups.com [blacklight-...@googlegroups.com] on behalf of Eric Larson [ela...@library.wisc.edu]
Sent: Wednesday, February 08, 2012 4:20 PM
To: Blacklight Development
Subject: [Blacklight-development] Forward - Blacklight with Bootstrap

Hi all,

Cheers,
- Eric

--

[Jonathan Rochkind]

I'd be in favor of the bl default styling being based on what forward has done. Especially if the change is just CSS and doesn't require Dom changes.

CSS themes is still something to shoot for, but probably still have a variety of rough edges to be smoothed making that route take more work than justbswitching our built in theme. Plus, our built in default theme should be as awesome as we can!
________________________________________
From: blacklight-...@googlegroups.com [blacklight-...@googlegroups.com] on behalf of James Stuart [james....@gmail.com]
Sent: Wednesday, February 08, 2012 4:32 PM
To: blacklight-...@googlegroups.com
Subject: Re: [Blacklight-development] Forward - Blacklight with Bootstrap

[Eric Larson]

Thanks for the compliments everyone.

There are quite a few Dom changes here -- Bootstrap is basically a "do things our way and profit" approach to markup and styling.  I still have two good weeks of work to integrate this design into Forward, and afterwards I could attempt to create an unbranded BL theme for it.

If things are as Jonathan describes, that process could at least help flush out the woes for BL template developers.

Cheers,
-EL

[Jonathan Rochkind]

Hmm, even our basic theming ideas didn't cover major DOM changes as part
of a 'theming'.

There's no great way to do major DOM changes other than overriding the
relevant views -- meaning essentially 'forking' the views locally.
Which is not a great thing to support as a 'theme', as it'll likely
break when BL evolves.

So, I dunno. I would still potentially be in favor to actually changing
BL to be bootstrap-based as the out of the box, meaning making those DOM
changes in BL core, if there's time/interest.

[Simon Lamb]

Hi,

Just been researching the use of Bootstrap within Blacklight and came up with this thread. I must say, I'm really impressed with the work done with the Wisconsin Forward site.  It's definitely the sort of direction that I would like to go with the production version of the Hull University Blacklight instance.   

I noted from the thread that there was interest in producing a vanilla blacklight-bootstrap ui, perhaps using http://search.library.wisc.edu/ as a starting point.  Did this discussion progress any further? If not, Eric would you be happy for me to contact you directly asking for advice about how best to integrate bootstrap into Blacklight? The thing I'm really impressed with is the responsive design functionality of forward, its definitely something I'd like to provide with our instance of blacklight@hull.  

Many thanks and once again, great work!

Simon Lamb

University of Hull

  

   

On Tuesday, February 14, 2012 3:40:20 PM UTC, Jonathan Rochkind wrote:

Hmm, even our basic theming ideas didn't cover major DOM changes as part
of a 'theming'.

There's no great way to do major DOM changes other than overriding the
relevant views -- meaning essentially 'forking' the views locally.  
Which is not a great thing to support as a 'theme', as it'll likely
break when BL evolves.

So, I dunno. I would still potentially be in favor to actually changing
BL to be bootstrap-based as the out of the box, meaning making those DOM
changes in BL core, if there's time/interest.

On 2/8/2012 7:19 PM, Eric Larson wrote:
> Thanks for the compliments everyone.
>
> There are quite a few Dom changes here -- Bootstrap is basically a "do things our way and profit" approach to markup and styling.  I still have two good weeks of work to integrate this design into Forward, and afterwards I could attempt to create an unbranded BL theme for it.
>
> If things are as Jonathan describes, that process could at least help flush out the woes for BL template developers.
>
>
> Cheers,
> -EL
>
>
>
>
> On 02/08/12, Jonathan Rochkind   wrote:
>> I'd be in favor of the bl default styling being based on what forward has done. Especially if the change is just CSS and doesn't require Dom changes.
>>
>> CSS themes is still something to shoot for, but probably still have a variety of rough edges to be smoothed making that route take more work than justbswitching our built in theme. Plus, our built in default theme should be as awesome as we can!
>> ________________________________________

>> From: blacklight-development@googlegroups.com [blacklight-development@googlegroups.com] on behalf of James Stuart [james....@gmail.com]

>> Sent: Wednesday, February 08, 2012 4:32 PM

>> To: blacklight-development@googlegroups.com

>> Subject: Re: [Blacklight-development] Forward - Blacklight with Bootstrap
>>
>> I definitely think we should talk about this next conference call.
>>
>> On Wed, Feb 8, 2012 at 1:20 PM, Eric Larson<ela...@library.wisc.edu>  wrote:
>>> Hi all,
>>>
>>> Jessie was asking us (the Wisconsin guys) about Blacklight with Bootstrap.  We're currently upgrading to Blacklight 3.2 and implementing my new UW-Madison themed, bootstrap-based, design on top.
>>>
>>>
>>> I don't have any code to share, but here are my screenshots of the new design:
>>> https://mywebspace.wisc.edu/ewlarson/web/forward/
>>>
>>>
>>> You can see places where the bootstrap media-grid (now thumbnails), buttons and button groups really help polish the application.  We'll be live with this design as soon as possible.  We'll also be customizing the header/footer for some other UW-System schools, too.
>>>
>>>
>>> Let me know if you have any questions.
>>>
>>>
>>> Cheers,
>>> - Eric
>>>
>>> --
>>> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

>>> To post to this group, send email to blacklight-development@googlegroups.com.
>>> To unsubscribe from this group, send email to blacklight-development+unsub...@googlegroups.com.

>>> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
>>>
>> --
>> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

>> To post to this group, send email to blacklight-development@googlegroups.com.
>> To unsubscribe from this group, send email to blacklight-development+unsub...@googlegroups.com.

>> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
>>
>> --
>> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

>> To post to this group, send email to blacklight-development@googlegroups.com.
>> To unsubscribe from this group, send email to blacklight-development+unsub...@googlegroups.com.

[James Stuart]

I think there's some serious talk of spending some time on a major UI revamp of blacklight, based most likely around the bootstrap framework, with an emphasis on mobile first.

It's unclear what the time frame is, but hopefully it'll be within the next few months.

To view this discussion on the web visit https://groups.google.com/d/msg/blacklight-development/-/lipLpC1NIfUJ.

To post to this group, send email to blacklight-...@googlegroups.com.
To unsubscribe from this group, send email to blacklight-develo...@googlegroups.com.

[Simon Lamb]

Thanks for the update James.  

Simon

>>> To unsubscribe from this group, send email to blacklight-development+unsubscri...@googlegroups.com.

>>> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
>>>
>> --
>> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.
>> To post to this group, send email to blacklight-development@googlegroups.com.

>> To unsubscribe from this group, send email to blacklight-development+unsubscri...@googlegroups.com.

>> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
>>
>> --
>> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.
>> To post to this group, send email to blacklight-development@googlegroups.com.

>> To unsubscribe from this group, send email to blacklight-development+unsubscri...@googlegroups.com.

>> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
>
>

--
You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

To view this discussion on the web visit https://groups.google.com/d/msg/blacklight-development/-/lipLpC1NIfUJ.

[Eric Larson]

Hi Simon,

Thanks for the compliments on Forward's new design. We were given a green light to redesign the site before our official launch at UW-Madison (this May 21st), and Ryan Freng and I decided to shoot for the "responsive" moon. I'm certainly glad we took on the challenge. After I finished up our new design in static HTML+Bootstrap, Ryan took the lead on implementing the responsive design in our Blacklight install. I don't believe he's on the blacklight-development list, so I'm copying him here. Ultimately, there's a lot of fluid CSS work and JavaScript DOM manipulation to keep everything happy between media break points.

I think there is still interest in the blacklight-bootstrap UI. At Wisconsin, we're rolling almost all our Blacklight views locally, so our effort to redesign Forward doesn't easily map back into vanilla Blacklight. However, we hope things will settle down after our launch, so we can help contribute some of our work and ideas back into the project.

Ryan and I would be happy to chat more in depth about our experience using Bootstrap and how we're doing the responsive bit. But, don't count on hearing from us much until after our launch.

Cheers,
- Eric 

> > >> From: james....@gmail.com(javascript:main.compose('new', 't=blacklight-...@googlegroups.com')" target="1">blacklight-...@googlegroups.com [blacklight-...@googlegroups.com] on behalf of James Stuart [blacklight-...@googlegroups.com

> > >> Subject: Re: [Blacklight-development] Forward - Blacklight with Bootstrap
> > >>
> > >> I definitely think we should talk about this next conference call.
> > >>
> > >> On Wed, Feb 8, 2012 at 1:20 PM, Eric Larson<ela...@library.wisc.edu> wrote:
> > >>> Hi all,
> > >>>
> > >>> Jessie was asking us (the Wisconsin guys) about Blacklight with Bootstrap. We're currently upgrading to Blacklight 3.2 and implementing my new UW-Madison themed, bootstrap-based, design on top.
> > >>>
> > >>>
> > >>> I don't have any code to share, but here are my screenshots of the new design:
> > >>> https://mywebspace.wisc.edu/ewlarson/web/forward/
> > >>>
> > >>>
> > >>> You can see places where the bootstrap media-grid (now thumbnails), buttons and button groups really help polish the application. We'll be live with this design as soon as possible. We'll also be customizing the header/footer for some other UW-System schools, too.
> > >>>
> > >>>
> > >>> Let me know if you have any questions.
> > >>>
> > >>>
> > >>> Cheers,
> > >>> - Eric
> > >>>
> > >>> --
> > >>> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

> > >>> To post to this group, send email to blacklight-...@googlegroups.com.
> > >>> To unsubscribe from this group, send email to blacklight-develo...@googlegroups.com.

> > >>> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
> > >>>
> > >> --
> > >> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

> > >> To post to this group, send email to blacklight-...@googlegroups.com.
> > >> To unsubscribe from this group, send email to blacklight-develo...@googlegroups.com.

> > >> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
> > >>
> > >> --
> > >> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

> > >> To post to this group, send email to blacklight-...@googlegroups.com.
> > >> To unsubscribe from this group, send email to blacklight-develo...@googlegroups.com.

> > >> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
> > >
> > >
> >
> >
> >
> >
> >
> >
>
>
>
> --
> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

> To view this discussion on the web visit <a href=).
> To post to this group, send email to blacklight-...@googlegroups.com.
> To unsubscribe from this group, send email to blacklight-develo...@googlegroups.com.

[Simon Lamb]

Hi Eric,  

Many thanks for the reply and information.  

We are still pretty early on with the visual revamp of Blacklight at Hull, therefore it may be prudent to see what direction the vanilla Blacklight UI goes.  Having said that, I'm very interested in getting a great mobile experience for users, so may well start investigating bootstrap into Blacklight sooner.  

One quick question, how did you find designing the site in static HTML+Bootstrap first? I can imagine it's great from a design point of view, as it gives you a free reign, but obviously more headaches when integrating with Blacklight.  Would you recommend that methodology? 

Many thanks for the offer of help in the future, much appreciated. I'll keep the group posted with our developments.  

Good luck with the official launch! 

Simon 

> > >> From: james....@gmail.com(javascript:main.compose('new', 't=blacklight-development@googlegroups.com')" target="1">blacklight-devel...@googlegroups.com [blacklight-development@googlegroups.com] on behalf of James Stuart [blacklight-development@googlegroups.com

> > >> Subject: Re: [Blacklight-development] Forward - Blacklight with Bootstrap
> > >>
> > >> I definitely think we should talk about this next conference call.
> > >>
> > >> On Wed, Feb 8, 2012 at 1:20 PM, Eric Larson<ela...@library.wisc.edu> wrote:
> > >>> Hi all,
> > >>>
> > >>> Jessie was asking us (the Wisconsin guys) about Blacklight with Bootstrap. We're currently upgrading to Blacklight 3.2 and implementing my new UW-Madison themed, bootstrap-based, design on top.
> > >>>
> > >>>
> > >>> I don't have any code to share, but here are my screenshots of the new design:
> > >>> https://mywebspace.wisc.edu/ewlarson/web/forward/
> > >>>
> > >>>
> > >>> You can see places where the bootstrap media-grid (now thumbnails), buttons and button groups really help polish the application. We'll be live with this design as soon as possible. We'll also be customizing the header/footer for some other UW-System schools, too.
> > >>>
> > >>>
> > >>> Let me know if you have any questions.
> > >>>
> > >>>
> > >>> Cheers,
> > >>> - Eric
> > >>>
> > >>> --
> > >>> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

> > >>> To post to this group, send email to blacklight-development@googlegroups.com.
> > >>> To unsubscribe from this group, send email to blacklight-development+unsub...@googlegroups.com.

> > >>> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
> > >>>
> > >> --
> > >> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

> > >> To post to this group, send email to blacklight-development@googlegroups.com.
> > >> To unsubscribe from this group, send email to blacklight-development+unsub...@googlegroups.com.

> > >> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
> > >>
> > >> --
> > >> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.

> > >> To post to this group, send email to blacklight-development@googlegroups.com.
> > >> To unsubscribe from this group, send email to blacklight-development+unsub...@googlegroups.com.

> > >> For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.
> > >
> > >
> >
> >
> >
> >
> >
> >
>
>
>
> --
> You received this message because you are subscribed to the Google Groups "Blacklight Development" group.
> To view this discussion on the web visit <a href=).

> To post to this group, send email to blacklight-development@googlegroups.com.
> To unsubscribe from this group, send email to blacklight-development+unsub...@googlegroups.com.

[Eric Larson]

Hi again Simon,

Actually, I prefer to design web apps using the web stack: HTML / CSS / JS and I would highly recommend that workflow.  This is especially true for responsive sites, as you can better "feel" how the block elements will jostle and shift between break points.  We even used the HTML mockups during design team staff meetings and guerilla usability testing, to ensure the overall design was headed in the right direction.

I find a lot of mockups done in Photoshop / Illustrator end up bending towards the realities of HTML anyway when you port the design.  Plus working in HTML / CSS / JS means when a design is finalized, implementing the design is easier because so much of the markup headache has been done already.  You can even mock up JS behaviors and demo them to staff -- here's how we'll do form validation.

If you've never tried HTML first design, give it a shot soon.  For me, it just clicks.

Cheers,

- EL

To view this discussion on the web visit https://groups.google.com/d/msg/blacklight-development/-/fbTaZgb5Cq4J.
To post to this group, send email to blacklight-...@googlegroups.com.
To unsubscribe from this group, send email to blacklight-develo...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/blacklight-development?hl=en.

--

Eric Larson

Digital Library Consultant
UW Digital Collections Center

ela...@library.wisc.edu

Connect with us on…
•The Web: http://uwdc.library.wisc.edu
•Facebook: http://digital.library.wisc.edu/1711.dl/uwdc-fb
•Twitter: http://twitter.com/UWdigiCollec
•RSS: http://uwdc.library.wisc.edu/News/NewsFeed/UWDCNews.xml

[Eric Larson]

Should add I'm not the only one who feels this way:

http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do

Saw that one on Flipboard the other day.

- EL