Jump to content


Photo

HTML Components

html component wesite building

  • Please log in to reply
16 replies to this topic

#1 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 31 March 2017 - 05:48 PM

I've built a suite of new HTML Components, targeted for quick and easy building of websites

 

To test, I re-built the main pages of my own website using these components

See www.lynkfs.com

 

The good thing about these components is that they do not use the visual RTL objects at all, so are nice and light.

The home page (index.html) for instance compiles to just 11K

 

Most if not all of these components are composite, they are built up of multiple elements

which means that page creation is a breeze

The home page f.i. consists of just 5 components : a menu, a header, a product section in 3 columns, a contact form and a footer

Doesn't take long to string these together

 

There are no external dependencies, no additional js or css files

(with the exception of Frow, which is a light weight css framework built around flex, and temporarily the menu component.

The idea is to eliminate these in possible future updates).

 

At the moment I've created the following components

JNxHero
A header featuring a hero image which fills 80% of the available screen-height with a 
title or business name, a sub-title and a call-to-action button.
 
JNxHeaderTID
A header featuring a title, a single image and a description.
 
JNxFooter
A footer featuring a title or business name, a sub-title and 5 social media buttons.
 
JNxDivider
A simple divider which can be used to visually separate other sections
 
JNxMenu
A fully responsive menu from desktop to mobile hamburger. Based on the lux-bar project.
 
JNxSlider
An image slider. Current element has the repeat set to once and takes 3-5 images.
 
JNxProduct2
This ribbon features 2 columns where each column is an image and a description.
 
JNxProduct3
This ribbon features a title, an image and 3 columns where each column features a description.
 
JNxContact
This ribbon is a contact form with a name, email and question section to grow contact list.
 
JNxReviews
This ribbon is a section to display product reviews or quotes with a description and author.
 
JNxBlog
This ribbon is a section to display blog entries - coming.
 
JNxBuyNow
This ribbon is a component to buy products. Paypal, debit and credit cards supported.

JNxDonate
This ribbon is a component to donate money. Paypal, debit and credit cards supported.

 
with some more in the pipeline.

  • ielite, BobLawrence and Igor Savkic like this
Nico Wouterse

#2 ielite

ielite
  • Members
  • 704 posts

Posted 31 March 2017 - 08:41 PM

How do we get a hold of these?  

 

 

I've built a suite of new HTML Components, targeted for quick and easy building of websites

 

To test, I re-built the main pages of my own website using these components

See www.lynkfs.com

 

The good thing about these components is that they do not use the visual RTL objects at all, so are nice and light.

The home page (index.html) for instance compiles to just 11K

 

Most if not all of these components are composite, they are built up of multiple elements

which means that page creation is a breeze

The home page f.i. consists of just 5 components : a menu, a header, a product section in 3 columns, a contact form and a footer

Doesn't take long to string these together

 

There are no external dependencies, no additional js or css files

(with the exception of Frow, which is a light weight css framework built around flex, and temporarily the menu component.

The idea is to eliminate these in possible future updates).

 

At the moment I've created the following components

JNxHero
A header featuring a hero image which fills 80% of the available screen-height with a 
title or business name, a sub-title and a call-to-action button.
 
JNxHeaderTID
A header featuring a title, a single image and a description.
 
JNxFooter
A footer featuring a title or business name, a sub-title and 5 social media buttons.
 
JNxDivider
A simple divider which can be used to visually separate other sections
 
JNxMenu
A fully responsive menu from desktop to mobile hamburger. Based on the lux-bar project.
 
JNxSlider
An image slider. Current element has the repeat set to once and takes 3-5 images.
 
JNxProduct2
This ribbon features 2 columns where each column is an image and a description.
 
JNxProduct3
This ribbon features a title, an image and 3 columns where each column features a description.
 
JNxContact
This ribbon is a contact form with a name, email and question section to grow contact list.
 
JNxReviews
This ribbon is a section to display product reviews or quotes with a description and author.
 
JNxBlog
This ribbon is a section to display blog entries - coming.
 
JNxBuyNow
This ribbon is a component to buy products. Paypal, debit and credit cards supported.

JNxDonate
This ribbon is a component to donate money. Paypal, debit and credit cards supported.

 
with some more in the pipeline.

 



#3 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 01 April 2017 - 02:32 AM

Tossing up whether or not to make this into a saleable product.

 

Don't know yet so for the time being I'll make this available free of charge, on an 'as-is' basis

During the month of April anyway

 

If anyone is interested send me an email (http://www.lynkfs.co...ex.html#contact) and I'll send a download link back


Nico Wouterse

#4 ielite

ielite
  • Members
  • 704 posts

Posted 01 April 2017 - 02:37 AM

too late, i already sent you paypal donation  :)

 

 

Tossing up whether or not to make this into a saleable product.

 

Don't know yet so for the time being I'll make this available free of charge, on an 'as-is' basis

During the month of April anyway

 

If anyone is interested send me an email (http://www.lynkfs.co...ex.html#contact) and I'll send a download link back



#5 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 01 April 2017 - 02:43 AM

Thanks ielite

much appreciated

 

and yes, the voluntary donate button is fully active ...


Nico Wouterse

#6 ielite

ielite
  • Members
  • 704 posts

Posted 01 April 2017 - 04:28 AM

link to download?

 

 

Thanks ielite

much appreciated

 

and yes, the voluntary donate button is fully active ...



#7 Igor Savkic

Igor Savkic
  • Members
  • 186 posts

Posted 01 April 2017 - 07:28 AM

Nice, thanks for sharing. I'm curious, do you have two projects, one for index and other for smartweb page or you'll able to handle two js creation from within one SMS project?



#8 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 01 April 2017 - 10:05 AM

Hi Igor

 

Could do both but in this case I opted for 1 page per project

Makes life a bit easier as don't have to handle the browsers backbutton etc

 

The original aim for this was to leverage as much of the functionality built into the browser rather than to duplicate things 

 

By the way

download link will be sent to anyone interested, just let me know


Nico Wouterse

#9 ielite

ielite
  • Members
  • 704 posts

Posted 01 April 2017 - 12:17 PM

I have sent you two emails through your website, private messaged,you, and asked here, requesting the download link each time. I even donated

#10 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 01 April 2017 - 12:36 PM

Hi Ielite

 

I did get your emails and responded 10 hrs ago :

 

"Hi

I'll send you a link for these components over the weekend latest Monday"
 
Obviously that email hasn't been delivered somehow or is in your spam folder
but now you've got it 
 
Cheers

Nico Wouterse

#11 ielite

ielite
  • Members
  • 704 posts

Posted 01 April 2017 - 04:13 PM

Got the link, thanks



#12 ielite

ielite
  • Members
  • 704 posts

Posted 02 April 2017 - 05:00 AM

What about input types?

 

e.g. Radio buttons, in  particular a list of radio buttons  with a default and a way to show which one was selected?

 

example

 

<input type="radio" name="new-england-states" value="mn">Main<br>
<input type="radio" name="new-england-states" value="vt">Vermont<br>
<input type="radio" name="new-england-states" value="ri">Rhode Island<br>
<input type="radio" name="new-england-states" value="cn">Connecticut<br>
<input type="radio" name="new-england-states" value="ri">Massachusetts<br>


$("#btn").click(function() {
   $('input[type="radio"]:checked').val();
});

  • Nico Wouterse and dymatrix like this

#13 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 02 April 2017 - 09:14 AM

very good

creating these components is not a difficult method

i'll make some, when i have a moment


  • ielite likes this
Nico Wouterse

#14 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 06 April 2017 - 04:26 PM

To get back to Igors remark previously in this thread on whether or not multiple pages or forms can be handled in the one project rather than splitting it up :

 

the answer is that that is definitely doable.

 

The difference with the standard visual rtl is that we don't have TObject based components here, so no TForms

Instead TElements are 'painted' directly on the "document.body" element, or on top of parent elements if it is a child.

 

Possibly we could sort of emulate the forms concept by having a master 'form-div' which would act as a parent and we could slide that element on- and offscreen so that it would look like a form.

The other way of doing this is to simply wipe the document.body clean and re-build it with new elements whenever we need a new 'form'

 

The following code checks to see if there is at least one element on the document, and if so deletes it.

Until everything is wiped clear.

while browserapi.document.getElementsByTagName("body")[0].firstChild do begin
    browserapi.document.getElementsByTagName("body")[0].removeChild(browserapi.document.getElementsByTagName("body")[0].firstChild);
end;
 

A 'Form' could then have it's own unit and look something like this

unit Form1;
 
interface
 
uses W3C.HTML5, W3C.DOM, W3C.CSS, W3C.Console, JElement, Form2;
 
Procedure JForm1;
 
implementation
 
Procedure JForm1;
begin
 
while browserapi.document.getElementsByTagName("body")[0].firstChild do begin
    browserapi.document.getElementsByTagName("body")[0].removeChild(browserapi.document.getElementsByTagName("body")[0].firstChild);
end;
 
//NxHero
//-----------------------------------------------------------------------------
  props['image']    := 'assets/img/hero.jpg';
  props['title']    := 'ADK';
  props['subtitle'] := 'adirondacs tracks';
  var a := NxHero.Create(props);
  a.OnClick(JForm2);
//-----------------------------------------------------------------------------
 
end;
 
end.
 

with the simplest of invocations :

uses W3C.HTML5, W3C.DOM, W3C.CSS, Form1;

JForm1;

You can see this in action here

 

Note : the data in this demo is loosely based on the description of the app ielite has been working on.

The second and third form is work in progress on some more html components.

They display databased data through a non-js table and a non-js clickable treeview

They may become possible additions to the html component suite a bit later on

(after some better styling)


  • ielite and dymatrix like this
Nico Wouterse

#15 ielite

ielite
  • Members
  • 704 posts

Posted 07 April 2017 - 03:02 AM

Nice!



#16 ielite

ielite
  • Members
  • 704 posts

Posted 04 June 2017 - 07:11 PM

Nico,

 

any other new components ?

 

 

has anyone build a listbox yet?  

 

I still need a scrolling list that works with an image on left and text to right of image.  That also allows selecting or clicking an item. 

 

And works with mobile

 

:)



#17 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 07 June 2017 - 01:35 PM

find below a 

-- multi-page

-- databased

-- multilevel-drilldown

-- listbox-lookalike

-- mobile-responsive

demo project

-- built with HTML-Components

 

demo  http://www.lynkfs.com/mountain5

 

source http://www.lynkfs.co...in5/index.sproj

 

 

 

(by the way, page navigation is implemented using webworkers 

not really necessary, just a little add-on experiment)

 

cheers

 

Nico


Nico Wouterse





Also tagged with one or more of these keywords: html, component, wesite, building

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users