[Esug-list] [vwnc] BootStrapLight

Maarten Mostert maarten.mostert at stakepoint.com
Thu Oct 11 09:56:32 EDT 2018


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

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> 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/
>> <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

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.esug.org/pipermail/esug-list_lists.esug.org/attachments/20181011/fcc1b765/attachment-0001.html>


More information about the Esug-list mailing list