Share My Creation [UOENow] Create beautiful Bootstrap 4 Websites with Now UI Kit+BANano

Download

Hi there

UOENow is a wrap of the beautiful theme from Creative Tim to create Bootstrap 4 websites. UONow wraps the Now UI kit around BANano for one to create beautiful things with this theme.

The attached video is the generation of the theme directly from Creative Tim, done to ensure that everything works the same.


You can view the Creative Tim Now UI Kit here, https://www.creative-tim.com/product/now-ui-kit

The download is a an uncompiled lib that you can run and it will open up the example page to generate the page. The code has been simplified as much as possible and one can use BANano methods to set/get elements, styles etc.

 
Last edited:
Click to expand...

Mashiane

Expert
Licensed User
Longtime User
As usual, one creates a new BANano project. I have created a single page just like the Creative Tim Now UI Kit website. In the Main module..

B4X: 
'demo the components
Sub BANano_Ready()
    'create the app
    App.Initialize(AppName,ShortName,False)
    'pgComponents.Init(App)     
    pgIndex.Init(App)
End Sub

pgIndex is a code module that has been split into code regions for easy code navigation...
 

Mashiane

Expert
Licensed User
Longtime User
In the pgIndex code module, we initialize the page and then inject some css for a few things...

B4X: 
'Static code module
Sub Process_Globals
    Public App As UOENowApp
    Public Page As UOENowPage
End Sub

Sub Init(thisApp As UOENowApp)
    App = thisApp
    'initialized the page, the 'main' div name will be components
    Page.Initialize(App,"home",False,True,App.EnumThemes.Primary)
    'set up a few css
    App.InjectCSSMap(".invision-logo", CreateMap("max-width": "70px", "top":"-2px","position": "relative"))
    App.InjectCSSMap(".creative-tim-logo", CreateMap("max-width": "140px","top": "-2px","position": "relative"))
    App.injectcssmap(".brand .n-logo", CreateMap("max-width": "100px","margin-bottom": "40px"))
    App.InjectCSSMap(".brand .h1-seo", CreateMap("font-size": "2.8em","text-transform": "uppercase","font-weight": "300"))

The Page.Initialize methods creates the navigation bar skeleton, the side bar skeleton, the footer skeleton and also the page content skeleton so that one can add components to the page. There are some few css attributes that we need to set to ensure the header works as expected. The above css is applied to the header elements.

B4X: 
'clear the body of the page
    Page.Clear
    '*** NAVBAR
    'show the color of the navbar when one scrolls past 400 px
    Page.NavBar.SetColorOnScroll(400)
    ' the navbar should be transparent
    Page.NavBar.SetTransparent
    'add a tooltip for the brand element. All tooltips should be added before an element is added
    App.AddToolTip("uoenow",App.EnumPosition.bottom,"Designed by Invision. Coded by Creative Tim")
    ' we add the brand with a link
    Page.NavBar.AddBrand("uoenow","Now UI Kit","https://demos.creative-tim.com/now-ui-kit/index.html")
    ' we add the hamburgder`
    Page.NavBar.AddHamBurger
    ' the navbar should be fixed
    Page.NavBar.SetFixed
    ' we set the nav image, this gets shown on small devices in the automatic side bar
    Page.NavBar.SetNavImage("./assets/blurred-image-1.jpg")
    'the navbar buttons should be added on the right side of the navbar
    Page.NavBar.JustifyContentEnd
    'add buttons
    Page.NavBar.AddAnchor("btndownload","{NBSP}Download","javascript:void(0)","now-ui-icons arrows-1_cloud-download-93","",False,False,"",False)
    'add dropdown
    Dim dd As UOENowNavItemDropDown
    dd.Initialize(App,"navbarDropdownMenuLink1","now-ui-icons design_app","{NBSP}Components","","")
    dd.AddAnchor("","{NBSP}Add Components","./index.html","now-ui-icons business_chart-pie-36","")
    dd.AddAnchor("","{NBSP}Documentation","https://demos.creative-tim.com/now-ui-kit/docs/1.0/getting-started/introduction.html","now-ui-icons design_bullet-list-67","")
    Page.NavBar.AddDropDown(dd)
    Page.NavBar.AddAnchor("","{NBSP}Upgrade to PRO","https://www.creative-tim.com/product/now-ui-kit-pro","now-ui-icons arrows-1_share-66", _
    App.EnumTarget.blank,False,False,"btn btn-neutral",False)
    App.AddToolTip("twitter",App.EnumPosition.bottom,"Follow us on Twitter")
    App.AddToolTip("facebook",App.EnumPosition.bottom,"Like us on Facebook")
    App.AddToolTip("instagram",App.EnumPosition.bottom,"Follow us on Instagram")
    Page.NavBar.AddAnchor("twitter","{NBSP}Twitter","https://twitter.com/CreativeTim","fab fa-twitter",App.EnumTarget.blank,False,False,"",True)
    Page.NavBar.AddAnchor("facebook","{NBSP}Facebook","https://www.facebook.com/CreativeTim","fab fa-facebook",App.EnumTarget.blank,False,False,"",True)
    Page.NavBar.AddAnchor("instagram","{NBSP}Instagram","https://www.instagram.com/CreativeTimOfficial","fab fa-instagram",App.EnumTarget.blank,False,False,"",True)

We then clear the page, set up the navbar and then add the links and icons for social sharing as displayed and then also create the full page header of the page. The header has a background image with an orange like filter.

B4X: 
'**** HEADER
    Page.Header.SetFilterColor("orange")
    Page.Header.AddParallax1(0,0,"","./assets/header.jpg","")
    Page.Header.AddContainer(0,0, Advert)

As noted, there is no grid created on the page so all elements will be added at R0C0, this means that they are placed in sequence as they are added.

In the header, a container named Advert is added. This is created like this...

B4X: 
Sub Advert As UOENowContainer
    Dim a As UOENowContainer
    a.Initialize(App,"",True,"","")
    
    Dim b As UOENowContainer
    b.Initialize(App,"",False,"", "content-center brand")
    b.AddImage1(0,0,"","./assets/now-logo.png","",False,False,False,"n-logo")
    b.AddH1(0,0,"","Now UI Kit.","","h1-seo")
    b.AddH3(0,0,"","A beautiful Bootstrap 4 UI kit. Yours free.","","")
    
    Dim h6 As UOENowContainer
    h6.Initialize(App,"",False,"","category category-absolute")
    h6.AddText("Designed by ")
    Dim img As UOENowImage
    img.Initialize(App,"","./assets/invision-white-slim.png","","invision-logo")
    h6.AddAnchor1(0,0,"",img.ToString,"http://invisionapp.com/",App.EnumTarget.blank,False,"","")
    h6.AddText(". Coded by ")
    Dim imgx As UOENowImage
    imgx.Initialize(App,"","./assets/creative-tim-white-slim2.png","","creative-tim-logo")
    h6.AddAnchor1(0,0,"",imgx.ToString,"https://www.creative-tim.com",App.EnumTarget.blank,False,"","")
    a.AddContainer(0,0,b)
    a.AddContainer(0,0,h6)
    Return a
End Sub

And the resulting output is....

 

Mashiane

Expert
Licensed User
Longtime User
When one scrolls down the page with a mouse, the navbar background color changes from transparent to orange, orange being the primary color for this theme. The change in color is done by the .SetColorOnScroll. As one can decide not to have a hamburger menu / brand, we decided to leave these to the developer and thus are added with AddBrand and AddHamburger. JustifyContentEnd ensures that the navitems are added on the right of the navbar, removing this will ensure the buttons are on the left.

The next section of the screen has hero images. Each of the images is housed inside a container. A container with a grid is created with 1 row that has 1 single column sized 12 spaces.

B4X: 
Sub SectionImages As UOENowSection
    Dim si As UOENowSection
    si.Initialize(App,"","","section-images")
    
    Dim sic As UOENowContainer
    sic.Initialize(App,"",True,"","")
    sic.AddRows(1).AddColumns(1,12,12,12,12)
    
    Dim hic As UOENowContainer
    hic.Initialize(App,"",False,"","hero-images-container")
    hic.AddImage1(0,0,"","./assets/hero-image-1.png","",False,False,False,"")
    sic.AddContainer(1,1,hic)
    
    Dim hic As UOENowContainer
    hic.Initialize(App,"",False,"","hero-images-container-1")
    hic.AddImage1(0,0,"","./assets/hero-image-2.png","",False,False,False,"")
    sic.AddContainer(1,1,hic)
    
    Dim hic As UOENowContainer
    hic.Initialize(App,"",False,"","hero-images-container-2")
    hic.AddImage1(0,0,"","./assets/hero-image-3.png","",False,False,False,"")
    sic.AddContainer(1,1,hic)
    
    
    si.Section.AddContainer(0,0,sic)
    Return si
End Sub

Creating...

 

Mashiane

Expert
Licensed User
Longtime User
Next are some basic elements, these are buttons and inputs.



Shortcut methods have been created to ensure that one adds these elements easily. Whilst one can first define a component, then initialize it and then add it to the parent, using shortcuts ensure that ones skeleton is up an running in no time. From below the various components are themed and also some classes passed to them to ensure they look as expected.

B4X: 
#Region BasicElements
Sub BasicElements As UOENowSection
    Dim be As UOENowSection
    be.Initialize(App,"basic-elements","","section-basic")
    Dim cont As UOENowContainer
    cont.Initialize(App,"",True,"","")
    cont.AddTitle(0,0,"","Basic Elements")
    cont.AddH4(0,0,"","Buttons","","")
    '
    Dim bs As UOENowContainer
    bs.Initialize(App,"",False,"","")     
    bs.addcategory(0,0,"","Pick your style")
    bs.AddRows(1).AddColumns(1,10,10,10,10)
    bs.AddButton1(1,1,"","Default","","","","",False,False,App.EnumThemes.Primary,"","")
    bs.AddButton1(1,1,"","Round","","","","",False,True,App.EnumThemes.Primary,"","")
    bs.AddButton1(1,1,"","{NBSP}With Icon",App.EnumNucleo.ui_2_favourite_28,"","","",False,True,App.EnumThemes.Primary,"","")
    bs.AddButton1(1,1,"","",App.EnumNucleo.ui_2_favourite_28,"","","",True,False,App.EnumThemes.Primary,"","")
    bs.AddButton1(1,1,"","Simple","","","","",False,False,App.EnumThemes.Primary,"btn-simple","")
    cont.AddContainer(0,0,bs)
    '
    Dim bs1 As UOENowContainer
    bs1.Initialize(App,"",False,"","")
    bs1.AddCategory(0,0,"","Pick your size")
    bs1.AddRows(1).AddColumns(1,10,10,10,10)
    bs1.AddButton1(1,1,"","Small","","","",App.EnumButtonSize.small,False,False,App.EnumThemes.Primary,"","")
    bs1.AddButton1(1,1,"","Regular","","","","",False,False,App.EnumThemes.Primary,"","")
    bs1.AddButton1(1,1,"","Large","","","",App.EnumButtonSize.large,False,False,App.EnumThemes.Primary,"","")
    cont.AddContainer(0,0,bs1)
    '
    Dim be1 As UOENowContainer
    be1.Initialize(App,"",False,"","")
    be1.AddCategory(0,0,"","Pick your color")
    be1.AddRows(1).AddColumns(1,10,10,10,10)
    be1.AddButton1(1,1,"","Default","","","","",False,False,App.EnumThemes.Default,"","")
    be1.AddButton1(1,1,"","Primary","","","","",False,False,App.EnumThemes.Primary,"","")
    be1.AddButton1(1,1,"","Info","","","","",False,False,App.EnumThemes.Info,"","")
    be1.AddButton1(1,1,"","Success","","","","",False,False,App.EnumThemes.Success,"","")
    be1.AddButton1(1,1,"","Danger","","","","",False,False,App.EnumThemes.Danger,"","")
    be1.AddButton1(1,1,"","Neutral","","","","",False,False,App.EnumThemes.Neutral,"","")
    cont.AddContainer(0,0,be1)
    '
    Dim be1 As UOENowContainer
    be1.Initialize(App,"",False,"","")
    be1.AddCategory(0,0,"","Links")
    be1.AddRows(1).AddColumns(1,10,10,10,10)
    be1.AddButton1(1,1,"","Default","","","","",False,False,App.EnumThemes.Default,"btn-link","")
    be1.AddButton1(1,1,"","Primary","","","","",False,False,App.EnumThemes.Primary,"btn-link","")
    be1.AddButton1(1,1,"","Info","","","","",False,False,App.EnumThemes.Info,"btn-link","")
    be1.AddButton1(1,1,"","Success","","","","",False,False,App.EnumThemes.Success,"btn-link","")
    be1.AddButton1(1,1,"","Danger","","","","",False,False,App.EnumThemes.Danger,"btn-link","")
    be1.AddButton1(1,1,"","Neutral","","","","",False,False,App.EnumThemes.Neutral,"btn-link","")
    cont.AddContainer(0,0,be1)
    cont.AddDiv(0,0,"","","space-70")
 

Mashiane

Expert
Licensed User
Longtime User
Then another container is added so that we demo how the input controls are created.

B4X: 
Dim be1 As UOENowContainer
    be1.Initialize(App,"inputs",False,"","")
    be1.AddH4(0,0,"","Inputs","","")
    be1.AddCategory(0,0,"","Form Controls")
    be1.AddRows(1).AddColumns(5,12,6,3,3)
    be1.AddTextBox(1,1,"t1","","Regular","","","","","")
    be1.AddTextBox(1,2,"t2","","Success","","",App.EnumThemes.Success,"","")
    be1.AddTextBox(1,3,"t3","","Danger","","",App.EnumThemes.Danger,"","")
    be1.AddTextBox(1,4,"t4","","Left Fontawesome Icon",App.EnumFontAwesome.user_circle,"","","","")
    be1.AddTextBox(1,5,"t5","","Right Fontawesome Icon","",App.EnumNucleo.users_single_02,"","","")
    cont.AddContainer(0,0,be1)
    cont.AddDiv(0,0,"","","space-70")
    '
    Dim be1 As UOENowContainer
    be1.Initialize(App,"",False,"","")
    be1.AddRows(1).AddColumns(4,6,6,3,3)
    be1.AddCategory(1,1,"","Checkboxes")
    be1.AddCheckBox1(1,1,"c1","Unchecked","opt1","",False,False,False)
    be1.AddCheckBox1(1,1,"c2","Checked","opt2","",True,False,False)
    be1.AddCheckBox1(1,1,"c3","Disabled Unchecked","opt3","",False,False,True)
    be1.AddCheckBox1(1,1,"c4","Disabled Checked","opt4","",True,False,True)
    '
    be1.AddCategory(1,2,"","Radios")
    be1.AddRadio1(1,2,"rad1","","Unchecked","opt1","",False,False,False)
    be1.AddRadio1(1,2,"rad1","","Checked","opt2","",True,False,False)
    be1.AddRadio1(1,2,"rad","","Disabled Unchecked","opt3","",False,False,True)
    be1.AddRadio1(1,2,"rad","","Disabled Checked","opt4","",True,False,True)
    '
    be1.AddCategory(1,3,"","Toggle Buttons")
    be1.AddSwitch1(1,3,"sw1",False,"","","","")
    be1.AddBreak(1,3)
    be1.AddSwitch1(1,3,"sw2",False,"ON","OFF","","")
    '
    be1.AddCategory(1,4,"","Sliders")
    be1.AddSlider1(1,4,"sl1",0,10,100,App.EnumThemes.primary,"")
    be1.AddBreak(1,4)
    be1.AddRangeSlider1(1,4,"rs",30,60,0,100,App.EnumThemes.Warning,"")
    cont.AddContainer(0,0,be1)
    cont.AddDiv(0,0,"","","space-70")
  
    be.Section.AddContainer(0,0,cont) 
    Return be

Checkboxes and Radios can also be created to be inline. The switch can have own labels e.g. ON and OFF in this case and input boxes can have icons on either side. Two sets of icons are used in this UI Kit, FontAwesome and Nucleo Icons. Enumerations have been built right into UOENow for both.

 

Mashiane

Expert
Licensed User
Longtime User
Next inline are the navigation bars. These can have icons and text or rather text only. Another option to have a dropdown in a menu button also exists.



A container is created with two equal sides to demo both menus.

B4X: 
Dim d As UOENowContainer
    d.Initialize(App,"menu-dropdown",True,"","")
    d.AddRows(1).AddColumns(2,12,6,6,6)
    d.AddRows(1).AddColumns(1,12,12,12,12)
    d.AddH4(1,1,"","Menu","","")
    d.AddH4(1,2,"","Menu with Icons","","")
    '
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb",False,App.EnumPosition.top,App.EnumThemes.Primary,"")
    nb.AddBrand("","Menu","#")
    nb.AddHamburger
    nb.AddAnchor("","Link","#","","",False,True,"",False)
    nb.AddAnchor("","Link","#","","",False,False,"",False)
    '
    Dim dd As UOENowNavItemDropDown
    dd.Initialize(App,"dd","","Dropdown","","")
    dd.AddAnchor("","Action","#","now-ui-icons users_circle-08","")
    dd.AddAnchor("","Another Action","#","","")
    dd.AddAnchor("","Something Else","#","","")
    dd.AddDivider
    dd.AddAnchor("","Separated Content","#","","")
    nb.AddDropDown(dd) 
    d.AddNavBar(1,1,nb)
    'icons
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb1",False,App.EnumPosition.top,App.EnumThemes.Info,"")
    nb.AddBrand("","Icons","#")
    nb.AddHamburger
    nb.JustifyContentEnd
    nb.AddAnchor("","","#","now-ui-icons ui-1_send","",False,True,"",False)
    nb.AddAnchor("","","#","now-ui-icons users_single-02","",False,False,"",False)
    Dim dd As UOENowNavItemDropDown
    dd.Initialize(App,"dd","now-ui-icons ui-1_settings-gear-63","","","")
    dd.AddHeader("","Dropdown Header","")
    dd.AddAnchor("","Action","#","now-ui-icons users_circle-08","")
    dd.AddAnchor("","Another Action","#","","")
    dd.AddAnchor("","Something Else","#","","")
    dd.AddDivider
    dd.AddAnchor("","Separated Content","#","","")
    nb.AddDropDown(dd)
    d.AddNavBar(1,2,nb)
    d.AddH4(2,1,"","Navigation","","")
    n.Section.AddContainer(0,0,d)

The menu on the left demos buttons sitting on the left without icons and the other with icons but sitting on the right side. Each of the menus have a dropdown using Nucleo icons. Each item in the navbar is a nav-item even the dropdown. Using a divider, one can also separate the anchors.

The rest of the 5 navigation menus are themed per bootstrap themes, sitting on top of an image. To do this, a container is created and a background image set and then each of the navbars is added. Above we had demoed how to make the navbar transparent, so we see that again on the last navbar.

B4X: 
' other navigation
    Dim n1 As UOENowContainer
    n1.Initialize(App,"navbarx",False,"","")
    n1.SetBackgroundImage("./assets/bg7.jpg","740px")
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb",False,App.EnumPosition.top,App.EnumThemes.Primary,"")
    nb.AddBrand("","Primary Color","#")
    nb.AddHamburger
    nb.JustifyContentEnd
    nb.AddAnchor("","Discover","#pablo","now-ui-icons objects_globe","",False,True,"",False)
    nb.AddAnchor("","Profile","#pablo","now-ui-icons users_circle-08","",False,False,"",False)
    nb.AddAnchor("","Settings","#pablo","now-ui-icons ui-1_settings-gear-63","",False,False,"",False)
    n1.AddNavBar(0,0,nb)
    '
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb",False,App.EnumPosition.top,App.EnumThemes.Info,"")
    nb.AddBrand("","Info Color","#")
    nb.AddHamburger
    nb.JustifyContentEnd
    nb.AddAnchor("","Discover","#pablo","","",False,True,"",False)
    nb.AddAnchor("","Profile","#pablo","","",False,False,"",False)
    nb.AddAnchor("","Settings","#pablo","","",False,False,"",False)
    n1.AddNavBar(0,0,nb)
    '
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb",False,App.EnumPosition.top,App.EnumThemes.Success,"")
    nb.AddBrand("","Success Color","#")
    nb.AddHamburger
    nb.JustifyContentEnd
    nb.AddAnchor("","","#pablo","now-ui-icons objects_globe","",False,True,"",False)
    nb.AddAnchor("","","#pablo","now-ui-icons users_circle-08","",False,False,"",False)
    nb.AddAnchor("","","#pablo","now-ui-icons ui-1_settings-gear-63","",False,False,"",False)
    n1.AddNavBar(0,0,nb)
    '
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb",False,App.EnumPosition.top,App.EnumThemes.Warning,"")
    nb.AddBrand("","Warning Color","#")
    nb.AddHamburger
    nb.JustifyContentEnd
    nb.AddAnchor("","","#pablo","fab fa-facebook-square","",False,True,"",False)
    nb.AddAnchor("","","#pablo","fab fa-twitter","",False,False,"",False)
    nb.AddAnchor("","","#pablo","fab fa-google-plus","",False,False,"",False)
    nb.AddAnchor("","","#pablo","fab fa-instagram","",False,False,"",False)
    n1.AddNavBar(0,0,nb)
    '
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb",False,App.EnumPosition.top,App.EnumThemes.Danger,"")
    nb.AddBrand("","Danger Color","#")
    nb.AddHamburger
    nb.JustifyContentEnd
    nb.AddAnchor("","{NBSP}Facebook","#pablo","fab fa-facebook-square","",False,True,"",False)
    nb.AddAnchor("","{NBSP}Twitter","#pablo","fab fa-twitter","",False,False,"",False)
    nb.AddAnchor("","{NBSP}Pin","#pablo","fab fa-pinterest","",False,False,"",False)
    n1.AddNavBar(0,0,nb)
    '
    Dim nb As UOENowNavBar
    nb.Initialize(App,"nb",False,App.EnumPosition.top,"","")
    nb.AddBrand("","Danger Color","#")
    nb.AddHamburger
    nb.JustifyContentEnd
    nb.SetTransparent
    nb.AddAnchor("","{NBSP}Facebook","#pablo","fab fa-facebook-square","",False,True,"",False)
    nb.AddAnchor("","{NBSP}Twitter","#pablo","fab fa-twitter","",False,False,"",False)
    nb.AddAnchor("","{NBSP}Pin","#pablo","fab fa-pinterest","",False,False,"",False)
    n1.AddNavBar(0,0,nb)
 

Mashiane

Expert
Licensed User
Longtime User
I like the idea of creating Tabs inside cards as they have done.



These are nicely responsive as each header is just one after another on small devices using a single container to show the content. One can also add containers for content of each tab.

B4X: 
Dim xcard As UOENowCard
    xcard.Initialize(App,"xcard","","")
    Dim xtabs As UOENowTabs
    xtabs.Initialize(App,"xtabs","","")
    xtabs.Tabs.list.JustifyContentCenter
    xtabs.TabContent.TabContent.AddClass("text-center")
    Dim c1 As UOENowContainer
    c1.Initialize(App,"c1",True,"","")
    c1.AddParagraph(0,0,"",App.LoremIpsumRandom(4),"","")
    xtabs.AddItem("homei","Home","now-ui-icons objects_umbrella-13",False,True,c1)
    Dim c2 As UOENowContainer
    c2.Initialize(App,"c1",True,"","")
    c2.AddParagraph(0,0,"",App.LoremIpsumRandom(4),"","")
    xtabs.AddItem("profilei","Profile","now-ui-icons shopping_cart-simple",False,False,c2)
    Dim c3 As UOENowContainer
    c3.Initialize(App,"c1",True,"","")
    c3.AddParagraph(0,0,"",App.LoremIpsumRandom(4),"","")
    xtabs.AddItem("messagesi","Messages","now-ui-icons shopping_shop",False,False,c3)
    Dim c4 As UOENowContainer
    c4.Initialize(App,"c1",True,"","")
    c4.AddParagraph(0,0,"",App.LoremIpsumRandom(4),"","")
    xtabs.AddItem("settingsi","Settings","now-ui-icons ui-2_settings-90",False,False,c4)
    xcard.AddTabs(xtabs)

So a card is initialized and also the tabs are initialized. As cards can also have other types of elements, we create tabs and then add them to the card. The tabs in this example should be centered on the card and the tabcontent inside each tab should also be centered.

For each existing tab, a container with LoremIpsum text is created just to demo, and each of these containers is passed when each tabs.AddItem method is called, specifying the tab title, icon, active, disabled properties. Then when the content for the tabs is created, these are added to the card. Automatically these are placed on the body element of the card. A card can have a header, body, footer, imageoverlay etc.
 

Mashiane

Expert
Licensed User
Longtime User
The other tabs example has been themed with a background. This is done by setting the backgroundcolor of the tabs component.



B4X: 
d.AddCategory(1,2,"","Tabs with Background on Card")
    Dim xcard As UOENowCard
    xcard.Initialize(App,"xcard","","")
    
    Dim tabsx As UOENowTabs
    tabsx.Initialize(App,"cardtabs",App.EnumThemes.Neutral,"")
    tabsx.BackgroundColor = "orange"
    tabsx.Tabs.List.JustifyContentCenter
    Dim c1 As UOENowContainer
    c1.Initialize(App,"c1",True,"","")
    c1.AddParagraph(0,0,"","First container...","","")
    tabsx.AddItem("chome","Home","now-ui-icons objects_umbrella-13",False,True,c1)
    Dim c2 As UOENowContainer
    c2.Initialize(App,"c2",True,"","")
    c2.AddParagraph(0,0,"","Second container...","","")
    tabsx.AddItem("cprofile","Profile","now-ui-icons shopping_cart-simple",False,False,c2)
    Dim c3 As UOENowContainer
    c3.Initialize(App,"c3",True,"","")
    c3.AddParagraph(0,0,"","Third container...","","")
    tabsx.AddItem("cmsgs","Messages","now-ui-icons shopping_shop",False,False,c3)
    Dim c4 As UOENowContainer
    c4.Initialize(App,"c4",True,"","")
    c4.AddParagraph(0,0,"","Fourth container...","","")
    tabsx.AddItem("cset","Settings","now-ui-icons ui-2_settings-90",False,False,c4)
    'add to header
    xcard.AddTabs(tabsx)
    d.AddCard(1,2,xcard)

So the same principles apply as the previous example, such that we set the background color here etc.
 

Mashiane

Expert
Licensed User
Longtime User
Other nice interesting things include progress bars, navigation pills, badges and pagination as demoed below.



Progress Bars: Simple as ABC

We create a containter and then add the prog bars as needed.

B4X: 
Dim co As UOENowContainer
    co.Initialize(App,"",True,"","")
    co.AddRows(1).AddColumns(2,12,6,6,6)
    co.AddH4(1,1,"","Progress Bars","","")
    co.AddProgress1(1,1,"prg","Default",25,"")
    co.AddProgress1(1,1,"prg1","Primary",60,App.EnumThemes.Primary)

Navigation Pills

B4X: 
co.AddH4(1,1,"","Navigation Pills","","")
    Dim np As UOENowNavPills
    np.Initialize(App,"np",App.EnumThemes.Primary,"")
    np.AddItem("ab","","#","far fa-gem",False,True)
    np.AddItem("ac","","#","fa fa-thermometer-full",False,False)
    np.AddItem("ad","","#","fa fa-suitcase",False,False)
    np.AddItem("ae","","#","fa fa-exclamation",True,False)
    co.addNavPills(1,1,np)

These can be marked as disabled / active depending on what one needs.

Pagination

One set of these have a previous and a next button and the other one not having.

B4X: 
Dim pg As UOENowPagination
    pg.Initialize(App,"pg",App.EnumThemes.Default,"")
    pg.AddItem("pg1","1","#",False,True)
    pg.AddItem("pg2","2","#",False,False)
    pg.AddItem("pg3","3","#",False,False)
    pg.AddItem("pg4","4","#",False,False)
    co.AddPagination(1,2,pg)
    '
    Dim pg1 As UOENowPagination
    pg1.Initialize(App,"pg1",App.EnumThemes.Primary,"")
    pg1.AddPrevious(False,False)
    pg1.AddItem("pg1","1","#",False,True)
    pg1.AddItem("pg2","2","#",False,False)
    pg1.AddItem("pg3","3","#",False,False)
    pg1.AddNext(False,False)
    co.AddPagination(1,2,pg1)

Badges

To demo the badge labels, we used a loop to pick up the themes.

B4X: 
co.AddH4(1,2,"","Labels","","")
    Dim tCnt As Int = 0
    Dim tTot As Int = App.Themes.Size - 1
    For tCnt = 0 To tTot
        Dim strName As String = App.Themes.Get(tCnt)
        'create the badge
        Dim badge As UOENowBadge
        badge.Initialize(App,$"badge${tCnt}"$,strName,strName)
        co.AddBadge(1,2,badge)
    Next
 

Mashiane

Expert
Licensed User
Longtime User
Next are notifications. These can be placed inside modal dialogs also or in whatever container one wishes for.



These notifications have icons and close buttons. These are optional and one has the flexibility to add whatever component they need on any component. This is because all components have a base component being the UOENowContainer. With that base component, one is able to add whatever component they need, whether inside the grid or not.

B4X: 
nt.Section.AddAlert1(0,0,"alert1","now-ui-icons ui-2_like","<strong>Well done!</strong> You successfully read this important alert message.",True,True,App.EnumThemes.Success)
    
    nt.Section.AddAlert1(0,0,"alert2","now-ui-icons travel_info", _
    "<strong>Heads up!</strong> This alert needs your attention, but it's not super important.",True,True,App.EnumThemes.Info)
    
    nt.Section.AddAlert1(0,0,"alert3","now-ui-icons ui-1_bell-53", _
    "<strong>Warning!</strong> Better check yourself, you're not looking too good.",True,True,App.EnumThemes.Warning)
    
    nt.Section.AddAlert1(0,0,"alert4","now-ui-icons objects_support-17", _
    "<strong>Oh snap!</strong> Change a few things up and try submitting again.",True,True,App.EnumThemes.Danger)

Simply, each alert is themed and text for the notification added..
 

Mashiane

Expert
Licensed User
Longtime User
Typography deals with how to represent the headings and labels. This is easily done with built in methods that make and cover most properties.



To demo this, a container is created and this is added to a section container. Using methods like AddH1, AddH2, AddParagraph etc, makes this simple and straighforward.

B4X: 
Dim co As UOENowContainer
    co.Initialize(App,"co",True,"","")
    co.AddRows(1).AddColumns(1,"",12,"","")
    co.AddH4(0,0,"","Typography","","")
    
    co.AddH1(1,1,"","h1.Heading 1","","")
    co.AddH2(1,1,"","h2.Heading 2","","")
    co.AddH3(1,1,"","h3.Heading 3","","")
    co.AddH4(1,1,"","h4.Heading 4","","")
    co.AddH5(1,1,"","h5.Heading 5","","")
    co.AddH6(1,1,"","h6.Heading 6","","")
    co.AddBreak(1,1)
    co.AddParagraph(1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Danger,"")
    co.AddParagraph(1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Default,"")
    co.AddParagraph(1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Primary,"")
    co.AddParagraph(1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Success,"")
    co.AddParagraph(1,1,"",App.LoremIpsumRandom(1),App.EnumThemes.Warning,"")
    co.AddParagraph(1,1,"",App.LoremIpsumRandom(1),"","text-muted")
    co.AddBreak(1,1)
    co.AddBlockQuote(1,1,"bq1",App.LoremIpsumRandom(1),App.EnumThemes.Primary,"This is it...","Mashy","")
    'add container to section
    typ.Section.AddContainer(0,0,co)
 

Mashiane

Expert
Licensed User
Longtime User
The Now UI Kit images can be round, circle, raised etc.



This has been simply done by adding each image in a single row column matrix to demo the method and settings one can use.

B4X: 
Dim co As UOENowContainer
    co.Initialize(App,"",True,"","")
    co.AddRows(1).AddColumns(1,12,12,12,12)
    co.AddH4(1,1,"","Images","","")
    co.AddRows(1).AddColumns(4,2,2,2,2)
    co.AddCategory(2,1,"","Image")
    co.AddImage1(2,1,"","./assets/julie.jpg","Image",True,False,False,"")
    co.AddCategory(2,2,"","Circle Image")
    co.AddImage1(2,2,"","./assets/julie.jpg","Circle Image",True,False,True,"")
    co.AddCategory(2,3,"","Raised Image")
    co.AddImage1(2,3,"","./assets/julie.jpg","Raised Image",True,True,False,"")
    co.AddCategory(2,4,"","Raised Circle Image")
    co.AddImage1(2,4,"","./assets/julie.jpg","Raised Circle Image",True,True,True,"")

These images were loaded via the Files tab, then on build copied to the assets folder. Due to the need to clean up on unused project resources, we will later look into how to tell the UOENow library to keep resources that are used in the project.
 

Mashiane

Expert
Licensed User
Longtime User
Javascript Components address the need for modal dialog, tooltips, popovers and the date picker.



Before a modal is shown via the toggle modal button it needs to be defined and then added to the page. A modal can be big and also show in mini format.



These are created with this code respectively...

B4X: 
Dim mdl1 As UOENowModal
    mdl1.Initialize(App,"mymodal","","")
    mdl1.Size = App.EnumModalSize.large
    mdl1.Header.JustifyContentCenter
    mdl1.Header.AddModalCloseButton
    mdl1.Header.AddH4(0,0,"mdl1title","Modal Title","","modal-title")
    mdl1.Body.AddParagraph(0,0,"",App.LoremIpsum(1),"","")
    mdl1.Footer.AddButton1(0,0,"btnnice","Nice Button","","#","","",False,False,App.EnumThemes.Default,"","")
    mdl1.Footer.AddButton1(0,0,"btnclose","Close","","#","","",False,False,App.EnumThemes.danger,"","mymodal")
    Page.Content.AddModal(mdl1)
    '***
    Dim mdl2 As UOENowModal
    mdl2.Initialize(App,"mymodal1",App.EnumThemes.Default,"")
    mdl2.Size = App.EnumModalSize.small
    mdl2.Header.JustifyContentCenter
    ' add profile
    Dim prof As UOENowModalProfile
    prof.Initialize(App,"profile")
    prof.ModalProfile.AddIcon(0,0,"","now-ui-icons users_circle-08","","")
    mdl2.Header.AddModalProfile(0,0,prof)
    mdl2.Body.AddParagraph(0,0,"","Always have access to your profile","","")
    mdl2.Footer.AddButton1(0,0,"btnback","Back","","#","","",False,False,App.EnumThemes.Neutral,"","mymodal1")
    mdl2.Footer.AddButton1(0,0,"btnclose","Close","","#","","",False,False,App.EnumThemes.Neutral,"","mymodal1")
    Page.Content.AddModal(mdl2)

The names of these modals are mymodal and mymodal1 respectively. To activate them, we can do so via buttons. So in the code, two buttons are added also specifying which modals to activate when clicked.

B4X: 
co.AddButton1(2,1,"smodal","Launch Modal","","","","",False,False,App.EnumThemes.primary,"","mymodal")
    co.AddButton1(2,1,"mmodal","Launch Modal Mini","","","","",False,False,App.EnumThemes.Warning,"","mymodal1")

As noted above, a modal can have a header, body, footer just like a card component.

DatePicker

Adding a datepicker is as simple as writing this code line..

B4X: 
co.AddH4(2,1,"","Date Picker","","")
    co.AddDatePicker1(2,1,"dp","","10/05/2016", App.EnumThemes.Primary,"")

Resulting in..

 

Mashiane

Expert
Licensed User
Longtime User
Popovers activate when the element that are linked to is clicked. These have been set to ensure that the previous pop over is closed when a new one is activated. These can be placed on top, bottom, left, right of the element linked to and also themed.



B4X: 
co.AddH4(2,2,"","Pop Overs","","")
    App.AddPopOver("ponleft","ponleft",App.EnumPosition.left,App.LoremIpsumRandom(1),True,App.EnumThemes.Primary)
    co.AddButton1(2,2,"ponleft","On Left","","","","",False,False,App.EnumThemes.Default,"","")
    App.AddPopOver("ponright","ponright",App.EnumPosition.right,App.LoremIpsumRandom(1),True,"")
    co.AddButton1(2,2,"ponright","On Right","","","","",False,False,App.EnumThemes.Default,"","")
    App.AddPopOver("pontop","pontop",App.EnumPosition.top,App.LoremIpsumRandom(1),True,"")
    co.AddButton1(2,2,"pontop","On Top","","","","",False,False,App.EnumThemes.Default,"","")
    App.AddPopOver("ponbottom","ponbottom",App.EnumPosition.bottom,App.LoremIpsumRandom(1),True,"")
    co.AddButton1(2,2,"ponbottom","On Bottom","","","","",False,False,App.EnumThemes.Default,"","")
    co.AddBreak(2,2)
    co.AddH4(2,2,"","Tool Tips","","")
    App.AddToolTip("ponleft1",App.EnumPosition.left,App.LoremIpsumRandom(1))
    co.AddButton1(2,2,"ponleft1","On Left","","","","",False,False,App.EnumThemes.Default,"","")
    App.AddToolTip("ponright1",App.EnumPosition.right,App.LoremIpsumRandom(1))
    co.AddButton1(2,2,"ponright1","On Right","","","","",False,False,App.EnumThemes.Default,"","")
    App.AddToolTip("pontop1",App.EnumPosition.top,App.LoremIpsumRandom(1))
    co.AddButton1(2,2,"pontop1","On Top","","","","",False,False,App.EnumThemes.Default,"","")
    App.AddToolTip("ponbottom1",App.EnumPosition.bottom,App.LoremIpsumRandom(1))
    co.AddButton1(2,2,"ponbottom1","On Bottom","","","","",False,False,App.EnumThemes.Default,"","")

Tooltips activate as soon as the element linked to is hovered on. PopOver and Tooltips SHOULD be added before the owner element is added.
 

Mashiane

Expert
Licensed User
Longtime User
The Carousel is a slideshow of images that one can decide to show on their website.

B4X: 
Dim co As UOENowContainer
    co.Initialize(App,"",True,"","")
    co.AddRows(1).AddColumns(1,12,12,8,8)
    co.AddH4(1,1,"","Carousel","","")
    
    Dim c As UOENowCarousel
    c.Initialize(App,"c","")
    c.AddItem("Image 1","./assets/bg1.jpg",True)
    c.AddItem("Image 2","./assets/bg6.jpg",False)
    c.AddItem("Image 3","./assets/bg3.jpg",False)
    c.AddItem("Image 4","./assets/bg4.jpg",False)
    c.AddItem("Image 5","./assets/bg5.jpg",False)
    co.AddCarousel(1,1,c)
    co.SetClass(1,0,"justify-content-center")
    cc.Section.AddContainer(0,0,co)

A couple of images are added to the carousel. As noted above for large devices, the column size is 8 whilst for medium and small is 12.



This automatically starts by itself and has navigation buttons for next and previous slides and also those on bottom to move around the slides.
 

Mashiane

Expert
Licensed User
Longtime User
Creating a footer.



Just above the footer, there is a black background container with buttons in the middle for social sharing. These are created by using .AddAnchorButton. The footer has a copyrights section that will always reflect the current system year, due to javascript code.

The social sharing buttons are inside a container...

B4X: 
Dim co As UOENowContainer
    co.Initialize(App,"",True,"","")
    co.AddRows(1).addcolumns(1,12,12,8,8)
    co.SetClass(1,0,"justify-content-md-center sharing-area text-center")
    co.SetClass(1,1,"text-center")
    co.AddAnchorButton(1,1,"","","fab fa-twitter","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-twitter")
    co.AddAnchorButton(1,1,"","","fab fa-facebook-square","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-facebook")
    co.AddAnchorButton(1,1,"","","fab fa-linkedin","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-linkedin")
    co.AddAnchorButton(1,1,"","","fab fa-github","#",App.EnumTarget.blank,App.EnumButtonSize.Large,True,True,App.EnumThemes.Neutral,"btn-github")

This container is centered for R1C1.

B4X: 
Sub Footer
    Page.Footer.CenterOnPage = True
    Page.Footer.BackgroundColor = "black"
    'add a nav
    Dim nav As UOENowNav
    nav.Initialize(App,"fnav","","")
    
    'add a list to the nav
    Dim lst As UOENowList
    lst.Initialize(App,"flinks",App.EnumListType.ul,"")
    lst.AddAnchor("","Creative Tim","https://www.creative-tim.com","","",False,False)
    lst.AddAnchor("","About Us","http://presentation.creative-tim.com","","",False,False)
    lst.AddAnchor("","Blog","http://blog.creative-tim.com","","",False,False)
    nav.Nav.AddList(0,0,lst)
    Page.Footer.FooterContent.AddNav(0,0,nav)
    'set up copyright
    Page.Footer.CopyRight.CopyRight.AddText(", Designed by ")
    Page.Footer.CopyRight.Copyright.AddAnchor1(0,0,"","Invision","https://www.invisionapp.com",App.EnumTarget.blank,False,"","")
    Page.Footer.CopyRight.CopyRight.AddText(". Coded by ")
    Page.Footer.CopyRight.CopyRight.AddAnchor1(0,0,"","Creative Tim","https://www.creative-tim.com",App.EnumTarget.blank,False,"","")
End Sub

On the footer there is a list of links inside a nav element. This is added to the footercontent object of the footer. Also the copyright section is added with more details needed.
 

Mashiane

Expert
Licensed User
Longtime User
Let's take a look at Main.AppStart...

This is rather longer than should be. This is because this has not been compiled into a library yet. The code that is covered here mostly will be in your website. We initialize the App object here (this is also done in BANano_Ready). What is does here is some useful stuff needed for the website configuration.

1. Build up the list of resources (css, js files) the website will use.
2. Tag resources that should not be deleted.
3. Build the website
4. Scan assets, scripts, styles folder for all relevant resources and remove anything else not tagged as not to be deleted. Your resources will still remain in the Files tab and thus Files folder of your project but tagging helps to clean up the version of your website to be created.
5. Unzip the fonts folder (these are nucleo and fontawesome fonts to distribute) etc. Other code is just for the development version.

When compiling this project to a library, most of this code will be removed.

B4X: 
App.Initialize(AppName,ShortName,True)
    'mark files as not to be deleted
    'App.TagDoNotDelete(Array As String("1.jpg","2.jpg","3.jpg"))
    'App.TagDoNotDelete(Array As String("4.jpg","5.jpg"))
    'App.TagDoNotDelete(Array As String("eric.png","kenny.png","sponge.png","yuna.jpg","background.png"))
    'replica
    App.TagDoNotDelete(Array As String("fonts.zip","blurred-image-1.jpg","header.jpg","now-logo.png"))
    App.TagDoNotDelete(Array As String("invision-white-slim.png","creative-tim-white-slim2.png"))
    App.TagDoNotDelete(Array As String("hero-image-1.png","hero-image-2.png","hero-image-3.png"))
    App.TagDoNotDelete(Array As String("bg7.jpg","julie.jpg","bg1.jpg","bg6.jpg","bg3.jpg","bg4.jpg","bg5.jpg"))
    'build the project
    BANano.Build(File.DirApp)
    'remove un-needed files
    Dim appPath As String = File.Combine(File.DirApp,ShortName)
    Dim csspath As String = File.Combine(appPath,"styles")
    Dim jspath As String = File.Combine(appPath,"scripts")
    Dim asspath As String = File.Combine(appPath,"assets")
    Dim cssList As List = File.ListFiles(csspath)
    Dim DoNotDelete As Map = App.DoNotDelete
    'css files
    For Each strf As String In cssList
        Dim hasit As Boolean = DoNotDelete.ContainsKey(strf)
        If hasit = False Then
            File.Delete(csspath,strf)
        End If
    Next
    'javascript
    Dim jsList As List = File.ListFiles(jspath)
    For Each strf As String In jsList
        Dim hasit As Boolean = DoNotDelete.ContainsKey(strf)
        If hasit = False Then
            File.Delete(jspath,strf)
        End If
    Next
    'assets
    Dim asList As List = File.ListFiles(asspath)
    For Each strf As String In asList
        Dim hasit As Boolean = DoNotDelete.ContainsKey(strf)
        If hasit = False Then
            File.Delete(asspath,strf)
        End If
    Next
    'unzip fonts folder
    Dim zf As String = File.Combine(File.DirApp,$"${AppName}/assets/fonts.zip"$)
    Dim zo As String = File.Combine(File.DirApp,$"${AppName}"$)
    Dim UnZL As SD_ZipLibray
    UnZL.Initialize
    UnZL.unZip(zf,zo)
    'delete zip File
    File.Delete("",zf)
    'open the app
    'open index.html file
    Dim appPath As String = File.Combine(File.DirApp,ShortName)
    Dim url As String = File.GetUri(appPath,"index.html")
    fx.ShowExternalDocument(url)
    ExitApplication

To Do: Consolidate and minify the css and js files for distribution.

That's all folks. Thanks for taking time to go through this. Enjoy!
 

Mashiane

Expert
Licensed User
Longtime User
In summary, the base component for any component in UOENow is the UOENowContainer. UOENow does not use the abstract designer as one can code their website from start to finish. The assumption being made is that one should design their UI first then inject events and Banano code after Page.Create.

Page.Create ensures that all the elements Added to the various containers are created and then added to the page with SetHTML. There are no events, getters / setters built with this library and one can use their knowledge of javascript / css to enhance UOENow and also add functionality for .GetValue, .SetValue, .SetStyle etc.

As this is based on the bootstrap framework, additional bootstrap and or bootstrap functionality can be added easily. You will also note on the Creative Tim's Now UI Kit website that they reference one to the bootstrap website for more functionality.

The focus has been on building websites, now let me work on my next website project with this.

Enjoy...

Ta!
 
You must log in or register to reply here.

Similar Threads

  • Article
B4J Library [Web] SithasoDaisy: TailwindCss WebApps powered by B4x & BANano
3 4 5
Replies
87
Views
16K
Mashiane
  • Article
B4J Tutorial [BANano] Searching B4xGoodies & Creating Overviews with Walt's B4xGoodies Explorer using BVAD3
Replies
0
Views
1K
Mashiane
  • Article
B4J Tutorial [BANanoZUI] Creating a Zoomable User Interface for a SmartHome Website / WebApp
Replies
8
Views
4K
Mashiane
  • Article
B4J Tutorial [BANanoZUI] Having a blast with LiveSwapping whilst creating ZUI (Zoomable User Interfaces)
Replies
3
Views
2K
Mashiane
  • Article
B4J Library [BANanoZUI] Creating Zoomable User Interfaces with ZircleUI
Replies
8
Views
3K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…