Twitter Bootstrap

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

Twitter Bootstrap

Janko Mivšek
Dear all,

In Aida 6.5 there is Twitter Bootstrap CSS framework present, in
BootstrapLibrary under Aida-Libraries. It would be very nice if we
redesign default Aida style (look&feel) under this CSS framework,
because its design is nice and fresh.

More about Twitter Bootstrap:
http://twitter.github.com/bootstrap/

How to use it in Aida:

 - make new style class by sublcassing WebStyle
 - call 'BootstrapLibrary ensure' from some layout method, like well
   known #pageFrameWith:title:
 - use Bootstrap CSS classes in your elements, like:

        e table class: #'table-striped'.


Have someone some time to start such a redesign?

Best regards
Janko


--
Janko Mivšek
Aida/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Gastón Dall' Oglio
Hi Juanko.

One sugestion, IMHO is a good idea wrapping css classes into extension methods, like "e table beStriped" or "e table tbBeStriped" (Tb for TwitterBootstrap). First, TB developers can to change named of css classes then you decrease the impact  needed in the image to adapt. Second, you can used autocomplete in the image to find these wrapped methods.

#beStriped
   self class: #'table-striped'

my 2 cents.

Regards.

PS: I have not had time to take a look at yet to Aida and Scribo.

2012/10/15 Janko Mivšek <[hidden email]>
Dear all,

In Aida 6.5 there is Twitter Bootstrap CSS framework present, in
BootstrapLibrary under Aida-Libraries. It would be very nice if we
redesign default Aida style (look&feel) under this CSS framework,
because its design is nice and fresh.

More about Twitter Bootstrap:
http://twitter.github.com/bootstrap/

How to use it in Aida:

 - make new style class by sublcassing WebStyle
 - call 'BootstrapLibrary ensure' from some layout method, like well
   known #pageFrameWith:title:
 - use Bootstrap CSS classes in your elements, like:

        e table class: #'table-striped'.


Have someone some time to start such a redesign?

Best regards
Janko


--
Janko Mivšek
Aida/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida


_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Janko Mivšek
Hi Gastón,

Dne 17. 10. 2012 14:05, piše Gastón Dall' Oglio:

> One sugestion, IMHO is a good idea wrapping css classes into extension
> methods, like "e table beStriped" or "e table tbBeStriped" (Tb for
> TwitterBootstrap). First, TB developers can to change named of css
> classes then you decrease the impact  needed in the image to adapt.
> Second, you can used autocomplete in the image to find these wrapped
> methods.

Good idea! Such methods already got useful in my recent AidaMobile work
where jQuery Mobile is used. This framework namely uses CSS class and
'data-*' attributes extensively. Without covering them with Smalltalk
methods the code would be really ugly.

One more question: where to put them, as an extension/override of
WebElement in BootstrapLibrary? WebElement has too many methods already,
it would be really good to put them somewhere else.

Naming is another question: #beStripped or just #stripped? twBeStripped
or tbStripped seems too ugly to me .... I'm actively avoiding such
namespacing for classes, so I really don't like to make the code even
more dirty with namespacing the methods too.

>
> #beStriped
>    self class: #'table-striped'
>
> my 2 cents.
>
> Regards.
>
> PS: I have not had time to take a look at yet to Aida and Scribo.

So we will to the best that Aida will be even more worth trying when
you'll have time ;)

Best regards
Janko


>
> 2012/10/15 Janko Mivšek <[hidden email]
> <mailto:[hidden email]>>
>
>     Dear all,
>
>     In Aida 6.5 there is Twitter Bootstrap CSS framework present, in
>     BootstrapLibrary under Aida-Libraries. It would be very nice if we
>     redesign default Aida style (look&feel) under this CSS framework,
>     because its design is nice and fresh.
>
>     More about Twitter Bootstrap:
>     http://twitter.github.com/bootstrap/
>
>     How to use it in Aida:
>
>      - make new style class by sublcassing WebStyle
>      - call 'BootstrapLibrary ensure' from some layout method, like well
>        known #pageFrameWith:title:
>      - use Bootstrap CSS classes in your elements, like:
>
>             e table class: #'table-striped'.
>
>
>     Have someone some time to start such a redesign?
>
>     Best regards
>     Janko

--
Janko Mivšek
Aida/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Gastón Dall' Oglio
One more question: where to put them, as an extension/override of
WebElement in BootstrapLibrary? WebElement has too many methods already,
it would be really good to put them somewhere else.

I guess that in WebElement and their subclasses is the natural side from user perspective, indeed I don't know the Aida's internal implementation. Sure somebody know more than me this answer.
 

Naming is another question: #beStripped or just #stripped? twBeStripped
or tbStripped seems too ugly to me .... I'm actively avoiding such
namespacing for classes, so I really don't like to make the code even
more dirty with namespacing the methods too.


Yes, I know than namespaces are avoided in methods, and since that you rarely adding methods to WebElement whereas you are developing an app (generating a collision of names), omiting namespace seem good. And omit "be" too :)
 
>
> #beStriped
>    self class: #'table-striped'
>
> my 2 cents.
>
> Regards.
>
> PS: I have not had time to take a look at yet to Aida and Scribo.

So we will to the best that Aida will be even more worth trying when
you'll have time ;)


:) 

Best regards
Janko


>
> 2012/10/15 Janko Mivšek <[hidden email]
> <mailto:[hidden email]>>
>
>     Dear all,
>
>     In Aida 6.5 there is Twitter Bootstrap CSS framework present, in
>     BootstrapLibrary under Aida-Libraries. It would be very nice if we
>     redesign default Aida style (look&feel) under this CSS framework,
>     because its design is nice and fresh.
>
>     More about Twitter Bootstrap:
>     http://twitter.github.com/bootstrap/
>
>     How to use it in Aida:
>
>      - make new style class by sublcassing WebStyle
>      - call 'BootstrapLibrary ensure' from some layout method, like well
>        known #pageFrameWith:title:
>      - use Bootstrap CSS classes in your elements, like:
>
>             e table class: #'table-striped'.
>
>
>     Have someone some time to start such a redesign?
>
>     Best regards
>     Janko

--
Janko Mivšek
Aida/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida


_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Geert Claes
Administrator
In reply to this post by Janko Mivšek
I like the idea too :)

One thought, since the creators of Bootstrap have just left twitter, it may be a good idea to make it easy to switch to alternatives like Zurb's Foundation
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Gastón Dall' Oglio
mmm responsive tables, interesting!!! TwitterBootstrap lack of this characteristic if I remember correctly:

... but I don't end to learn Twitterbootstrap yet :(

2012/10/17 Geert Claes <[hidden email]>
I like the idea too :)

One thought, since the creators of Bootstrap have just left twitter, it may
be a good idea to make it easy to switch to alternatives like Zurb's
Foundation



--
View this message in context: http://forum.world.st/Twitter-Bootstrap-tp4651278p4651734.html
Sent from the AIDA/Web mailing list archive at Nabble.com.
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida


_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Geert Claes
Administrator
In reply to this post by Janko Mivšek
Could you create a little sample?  Maybe something like a system browser?
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Geert Claes
Administrator
I noticed that there are a number of libraries in WebMethodLibrary and was wondering if someone could explain in simple terms how the WebMethodLibrary and WebMethodLibImporter works?  Like, how do you upgrade Bootstrap, how do you add a Foundation library, how do you add another library like HighCharts etc and of course how do you use them for a simple web app?
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Janko Mivšek
Dne 19. 10. 2012 14:57, piše Geert Claes:

> I noticed that there are a number of libraries in WebMethodLibrary and was
> wondering if someone could explain in simple terms how the WebMethodLibrary
> and WebMethodLibImporter works?  

Let we look at class side of BootstrapLibrary for instance:

- every original resource is saved in separate method in 'resources'
category. Directory path and file extension is 'encoded' in method name,
like method #cssBootstrapMinCss for css/bootstrap.min.css

- mapping between urls/file paths and methods is in method
#urlToMethodMap, which looks like:

 ^MapCache := Dictionary new
   at: '/css/bootstrap.min.css'
   put: #(cssBootstrapMinCss 'text/css');
   yourself.

MIME content type is also added in that map. Text resources are saved in
methods as text (UTF8 also supported!), while binarires like images are
saved as literal byte array.

Note also method #baseUrl, where base or root part of library's URL is
saved, like '/bootstrap' for Twitter Bootstrap library. This one is
important to know and set up correctly to separate different libraries
among them. Together we get a complete URL for above resource:

        /bootstrap/css/bootstrap.min.css

> Like, how do you upgrade Bootstrap, how do
> you add a Foundation library, how do you add another library like HighCharts
> etc and of course how do you use them for a simple web app?

To upgrade some existing library you go to its class comment when you'll
find a script of last upgrade. For Bootstrap:

WebMethodLibImporter default
 baseUrl: '/bootstrap';
 library: 'BootstrapLibrary';
 package: 'Aida-Libraries';
 import:
  'http://twitter.github.com/bootstrap/assets/bootstrap.zip' 
                                   "v2.1.0, imported aug12"

As you can see you can import/upgrade directly from the internet and
from .zip files.

Class WebMethodLibImporter is there to care about all importing and
upgrading tasks. So far finished only on Visualworks, help here to make
it workable on Squeak/Pharo is welcomed!

So, to prepare and import HighCharts, create HighChartsLibrary as
subclass of WebMethodLibrary and prepare proper import/upgrade script in
class comment. Then just evaluate it and library will be filled with
proper resource methods and a map.

To ensure proper link in page header you also need to provide an #ensure
method, which is then called from your app code before using the library:

   MyApp>>viewMain
      BootstrapLibrary ensure.
      ...
      e class: #'table-such-and-such' "Bootstrap CSS class"


This is how Bootstrap #ensure method currently looks like:

   BootstrapLibrary class>>ensure

     "ensure Bootstrap resources in page header"
     "Just CSS for now!"
     | page |
     page := self context page.
     self ensure: '/bootstrap/css/bootstrap.css' onPage: page.



All this is explained also on:

        http://www.aidaweb.si/method-libraries


Hope this helps a bit!
Janko


--
Janko Mivšek
Svetovalec za informatiko
Eranova d.o.o.
Ljubljana, Slovenija
www.eranova.si
tel:  01 514 22 55
faks: 01 514 22 56
gsm: 031 674 565
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Janko Mivšek
In reply to this post by Geert Claes
Dne 17. 10. 2012 21:57, piše Geert Claes:
> I like the idea too :)
>
> One thought, since the creators of Bootstrap have just left twitter, it may
> be a good idea to make it easy to switch to alternatives like Zurb's
> Foundation

What are the differences between those twoo? Can they use the same CSS
classes? If so, it would be preety simple to use, just #ensure the other
library and a whole CSS frameworks will change for your app!

Janko

--
Janko Mivšek
Svetovalec za informatiko
Eranova d.o.o.
Ljubljana, Slovenija
www.eranova.si
tel:  01 514 22 55
faks: 01 514 22 56
gsm: 031 674 565
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
Reply | Threaded
Open this post in threaded view
|

Re: Twitter Bootstrap

Geert Claes
Administrator
Janko Mivšek wrote
What are the differences between those two? Can they use the same CSS classes? If so, it would be preety simple to use, just #ensure the other library and a whole CSS frameworks will change for your app!
Difference, well they are competing solutions.  Mind you, both are not just CSS as they rely on some JavaScript too and Zurb's Foundation uses the CSS3 extention Sass or SCSS which looks better than standard CSS.

Not sure how Aida does it but I know Bootstrap places the JavaScript files at the end of the files to speed up loading.