[Esug-list] [vwnc] BootStrapLight

Johan Brichau johan at inceptive.be
Thu Oct 11 14:04:44 EDT 2018


Hi,

Just a pointer to related stuff: http://seafox.seasidehosting.st <http://seafox.seasidehosting.st/>

cheers,
Johan

> On 11 Oct 2018, at 15:56, Maarten Mostert <maarten.mostert at stakepoint.com> wrote:
> 
> Hello Esteban,
> Thank you for the Seaside snipet 😊
> Now first of all the main difference is formatting right ! There is maybe a different way to do it but evaluating your snipet came out with no formatting at all ?? 😳
> So now if I do the following:
> 
> esteban:=Seaside.WAHtmlCanvas builder render: [:html |
>  html div
>    class: 'text-center';
>    with: [
>      html heading
>        level2;
>        class: 'h4';
>        with: [
>          html text: 'Timline yes'.
>          html span
>            class: 'g-color-primary g-ml-5';
>            with: '#02  yes yes '
>        ]
>    ]
> ].
> 
> maarten := ((Div class: 'text-center g-mb-50')
> 				addChild: ((H2 class: 'h4' text: 'Timline yes')
> 						addChild: (Span class: 'g-color-primary g-ml-5' text: '#02  yes yes ')))
> 					resolve.
> ———————-
> 
> 
> 
> endEsteban := (Article class: 'g-pos-rel g-bg-gray-light-v5 g-pa-30' comment:'Estaban''s way')
> 				addChild: esteban;
> 				addChild: (H3 text: 'French classes' class: 'g-font-weight-300');
> 				resolve.
> 
> endMaarten := (Article class: 'g-pos-rel g-bg-gray-light-v5 g-pa-30' comment:'Maarten''s way')
> 				addChild: maarten;
> 				addChild: (H3 text: 'French classes' class: 'g-font-weight-300');
> 				resolve.
> 
> 
> I get for you:
> 
> <!-- Estaban's way -->
> <article class="g-pos-rel g-bg-gray-light-v5 g-pa-30">
> 	<div class=« text-center"><h2 class="h4">Timline yes<span class="g-color-primary g-ml-5">#02  yes yes </span></h2></div
> 	<h3 class="g-font-weight-300">French classes</h3>
> </article>
> <!-- End Estaban's way -->
> 
> End for me:
> 
> <!-- Maarten's way -->
> <article class="g-pos-rel g-bg-gray-light-v5 g-pa-30">
> 	<div class="text-center g-mb-50">
> 		<h2 class="h4">Timline yes
> 			<span class="g-color-primary g-ml-5">#02  yes yes </span>
> 		</h2>
> 	</div
> 	<h3 class="g-font-weight-300">French classes</h3>
> </article>
> <!-- End Maarten's way -->
> 
> As you can see even if the Seaside rendering comes without formatting the end results remains somewhat readable which makes copying and pasting way more easy to verify.
> 
> Now maybe the better question is how you guys work ???
> 
> Lets take the example of this template I acquired some time ago:  https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697 <https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697>
> 
> It has over 1750 reusable components and this is why it has some many funny css classes as you noticed.
> 
> If you want to rebuild the entire template into seaside code you probably have for over a year of work, and I can’t really believe anyone does that ?
> 
> On my pages basically 90% of the code is copied and then modified and adapted, which means that verifying combining formatting and readability really is a major issue.
> 
> Doing so and using bootstrap consistency it is actually not so complicated to create some good looking pages in a couple of hours.
> 
> However maybe the real time saver would be to actually parse existing html into compiled smalltalk methods 😉  html is a kind of xml ins’t it ? And we do have a very nice XML parser in VW 😇
> 
> Regards,
> 
> Maarten,
>  
> PS1  I’ll see what I do about the name 😅 
> 
> PS2. You said
> 
>> ……… and also imported a lot of utilities and
>> helpers directly from their js/css (DataTables, FontAwesome, Dragtable
>> and other jQuery plugins).
> 
> 
> 
> Why do you have the need to do so ?
> 
> For many things I need I just declare the required javascript libraries and css files in the header part of AppeX isn’t it like this it is supposed to work ?.
> 
> 
> 
> 
>> Le 10 oct. 2018 à 18:45, Esteban A. Maringolo <emaringolo at gmail.com <mailto:emaringolo at gmail.com>> a écrit :
>> 
>> Hi Maarten,
>> 
>> I wouldn't call it Boostrap because what you're doing is creating HTML
>> classes for each tag and manually assigning css classes (which doesn't
>> seem to be Bootstrap 3/4 classes either).
>> 
>> You could use Seaside's WAHtmlCanvas directly if you simply want to
>> render HTML without serving requests, callbacks, etc.
>> 
>> Seaside.WAHtmlCanvas builder render: [:html |
>>  html div
>>    class: 'text-center';
>>    with: [
>>      html heading
>>        level2;
>>        class: 'h4';
>>        with: [
>>          html text: 'Timline yes'.
>>          html span
>>            class: 'g-color-primary g-ml-5';
>>            with: '#02  yes yes '
>>        ]
>>    ]
>> ]
>> 
>> Of course to do that you'd need to load only the core Seaside classes,
>> which currently is not possible, because the Seaside-All.pcl it's an
>> all-or-nothing way of loading Seaside.
> 
> 
>> 
> 
> 
> 
> 
>> 
>> 
>> Regards,
>> 
>> 
>> On 10/10/2018 13:25, Maarten Mostert wrote:
>>> Hello everyone,
>>> 
>>> Notice that I just started and published a small package
>>> (BootStrapLight) that does the following
>>> 
>>> 
>>> ^((Div class: 'text-center g-mb-50')
>>> addChild: ((H2 class: 'h4' text: 'Timline yes')
>>>         addChild: (Span class: 'g-color-primary g-ml-5' text: '#02  yes
>>> yes '))) resolve.
>>> 
>>> 
>>> Which returns:
>>> 
>>> <div class=« text-center g-mb-50">
>>>                   <h2 class="h4">Timline yes
>>>                                     <span class="g-color-primary
>>> g-ml-5">#02  yes yes </span>
>>>                   </h2>
>>> </div>
>>> 
>>> 
>>> You can also mix smalltalk with html like:
>>> 
>>> ^(Li class: 'col-md-12 g-mb-40' comment: 'Timeline Content')
>>> addChild: ((Div class: 'row')
>>> addChild:  ‘<div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
>>> <i class="d-block g-width-18 g-height-18 g-bg-blue g-brd-around g-brd-3
>>> g-brd-gray-light-v5 rounded-circle"></i></div>’)
>>>          resolve
>>> 
>>> Which will resolve into:
>>>  
>>> 
>>> <!-- Timeline Content -->
>>> <li class="col-md-12 g-mb-40">
>>>                   <div class="row">
>>>                                     <div class="g-hidden-sm-down
>>> u-timeline-v2__icon g-top-35">
>>>                                     <i class="d-block g-width-18
>>> g-height-18 g-bg-blue g-brd-around g-brd-3 g-brd-gray-light-v5
>>> rounded-circle"></i>
>>>                                     </div>
>>>                   </div>
>>> </li>
>>> <!— End Timeline Content -->
>>> 
>>> 
>>> This package is obviously for those of you who don’t use Seaside,
>>> Seabreeze or other complexe frameworks and basically end up copying and
>>> pasting their websites with strings out of commercial themes before
>>> bringing them to live with AppeX and javascript.
>>> 
>>> I did what I published this weekend right, so it is not complete the API
>>> is not graved into marble. There are however some tests and you can run
>>> and you can of course encourage me or tell me what you think 😅🎶🤣
>>> 
>>> Regards, …
>>> 
>>> 
>>> Maarten MOSTERT
>>> 
>>>  
>>> 
>>>  
>>> 
>>> 4 rue de laCollinette
>>> 83320 Carqueiranne, France
>>> +33 676411296 
>>> http://stakepoint.com/ <http://stakepoint.com/>
>>> <https://urldefense.proofpoint.com/v2/url?u=http-3A__stakepoint.com_&d=DwMFaQ&c=OCIEmEwdEq_aNlsP4fF3gFqSN-E3mlr2t9JcDdfOZag&r=u6rr5DIR9wJre3Zrj6PTtQ&m=t7AX3mEbcfY7SkdLHDLI_r-X541e1iRzklf2qbkqO-o&s=GKgb3EaFK0ygLzt29rYQi5rHOLDpYXpWKO3_uzfoXLY&e= <https://urldefense.proofpoint.com/v2/url?u=http-3A__stakepoint.com_&d=DwMFaQ&c=OCIEmEwdEq_aNlsP4fF3gFqSN-E3mlr2t9JcDdfOZag&r=u6rr5DIR9wJre3Zrj6PTtQ&m=t7AX3mEbcfY7SkdLHDLI_r-X541e1iRzklf2qbkqO-o&s=GKgb3EaFK0ygLzt29rYQi5rHOLDpYXpWKO3_uzfoXLY&e=>>
>>> 
>>>  
>>> 
>>> Now the most popular Project Management Tool on MacOS
>>> 
>>> 
>>> 
>>> 
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>>> 
>>>  
>> 
>> -- 
>> Esteban A. Maringolo
> 
> _______________________________________________
> Esug-list mailing list
> Esug-list at lists.esug.org <mailto:Esug-list at lists.esug.org>
> http://lists.esug.org/mailman/listinfo/esug-list_lists.esug.org <http://lists.esug.org/mailman/listinfo/esug-list_lists.esug.org>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.esug.org/pipermail/esug-list_lists.esug.org/attachments/20181011/7022e248/attachment-0001.html>


More information about the Esug-list mailing list