Share My Creation [Web][SithasoDaisy Wireframes]: Unleash the Force of Ultimate Web MobileApp Design

Hi Fam

Download (unzip the file and double click the .bat file to start the app)

***** PRE LAUNCH *****

Hey there, fellow web enthusiasts! Are you tired of the cumbersome process of designing mobile web applications? Do you wish there was a tool that could streamline your workflow and unleash your creativity effortlessly? Well, hold onto your lightsabers because we've got something truly game-changing for you – introducing SithasoDaisy Wireframes, the ultimate Wireframing Web Application powered by the Force of TailwindCSS!

Picture this: You have a brilliant idea for a mobile web app that could revolutionize the digital landscape. But every time you sit down to design it, you find yourself lost in a sea of CSS frameworks, struggling to translate your vision into reality. Fear not, for SithasoDaisy Wireframes is here to save the day!

With SithasoDaisy Wireframes, you can wave goodbye to hours of tedious designs and say hello to a world of intuitive design. This powerful web application harnesses the full power of TailwindCSS, the beloved utility-first CSS framework, to provide you with a seamless wireframing experience like never before.



So, what exactly makes SithasoDaisy a force to be reckoned with? Let's dive into its extraordinary features:

  1. Lightning-fast Wireframing: SithasoDaisy empowers you to bring your ideas to life at warp speed. Say goodbye to endless tweaking and fine-tuning – with its intuitive interface and pre-built components, you can whip up a stunning mobile web app prototype in minutes, not hours.
  2. Effortless Customization: Want to tweak the colors, fonts, or layout of your wireframe? With SithasoDaisy, it's as easy as wielding a lightsaber. Thanks to its seamless integration with TailwindCSS, you can customize every aspect of your design with just a few clicks, allowing you to unleash your creativity without constraints.
  3. Responsive Design, Unleashed: Creating a mobile-friendly web app shouldn't feel like navigating an asteroid field. With SithasoDaisy, you can ensure that your wireframe looks pixel-perfect on any device, from smartphones to tablets and beyond. Its responsive design features make it a breeze to preview your prototype in real-time, so you can fine-tune your design with confidence.
  4. Collaboration Made Simple: Whether you're flying solo or part of a rebel alliance, SithasoDaisy has you covered. With its seamless collaboration features, you can easily share your wireframes with teammates, gather feedback, and collaborate on designs like never before. May the Force of teamwork be with you!
  5. Built-in Components Library: From buttons to navigation bars to form elements, SithasoDaisy comes equipped with a treasure trove of pre-built components to supercharge your wireframing experience. Simply click and save the elements you need, and watch your prototype come to life in the blink of an eye.
But wait, there's more! As if SithasoDaisy wasn't already the ultimate weapon in your web design arsenal, it also comes with a host of additional features, including:
  • Dark Mode: Embrace the power of the Dark Side with SithasoDaisy's sleek Dark Mode interface.
  • Export to B4J Layouts*: Ready to take your prototype to the next level? With SithasoDaisy, you can export your wireframes to clean, production-ready B4J Layouts.
  • Export to Image: For presentation purposes, elliciting feedback, you can export your wireframe to an image easily.
  • Seamless Integration: Whether you're a seasoned Jedi Master or just starting your journey, SithasoDaisy integrates seamlessly with your favorite tools and workflows.
So, what are you waiting for? Embrace the power of SithasoDaisy and revolutionize your mobile web design workflow today. With its lightning-fast wireframing, effortless customization, and seamless collaboration features, the Force has never been stronger in the world of web design. May your designs be bold, your code be clean, and your journey be filled with endless creativity. May the Force of SithasoDaisy be with you, always.

I thank you.

Mashy

Learning Channel


Get your copy of SithasoDaisy here:

Related Content

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
This project was inspired by this React Native Youtube Video.

We have used a custom component called SDUIComponent to build and style all the components in the page. This signifies how using imagination anything is possible.



Let's look at the source code..

B4X:
#IgnoreWarnings:12, 9
Sub Process_Globals
    'this is the name of the page
    Public name As String = "page1"
    Public title As String = "page"
    Public icon As String = "fa-solid fa-swatchbook"
    Public color As String = "#000000"
    'this variable holds reference to the app
    'usually for constants and other things
    Public app As SDUIApp
    'the variable referencing banano lib
    Private banano As BANano                        'ignore
    'this variable holds the page controller
    Public page As SDUIPage            'ignore
    Private Mode As String        'ignore
    Private component1 As SDUIComponent        'ignore
    Private component2 As SDUIComponent        'ignore
    Private button1 As SDUIButton        'ignore
    Private component3 As SDUIComponent        'ignore
    Private icon1 As SDUIIcon        'ignore
    Private textbox1 As SDUITextBox        'ignore
    Private animatedview As SDUIComponent        'ignore
    Private component4 As SDUIComponent        'ignore
    Private accountitem As SDUIComponent        'ignore
    Private component5 As SDUIComponent        'ignore
    Private component6 As SDUIComponent        'ignore
    Private itemamount As SDUIComponent        'ignore
    Private itemdescription As SDUIComponent        'ignore
    Private component7 As SDUIComponent        'ignore
    Private component8 As SDUIComponent        'ignore
    Private transview As SDUIComponent        'ignore
    Private transheading As SDUIComponent        'ignore
    Private tranheading As SDUIComponent        'ignore
    Private lblseeall As SDUIComponent        'ignore
    Private tranlist As SDUIComponent        'ignore
    Private tranitem As SDUIComponent        'ignore
    Private component9 As SDUIComponent        'ignore
    Private icon2 As SDUIIcon        'ignore
    Private lbltitletext As SDUIComponent        'ignore
    Private lbltrantitle As SDUIComponent        'ignore
    Private lbltrandate As SDUIComponent        'ignore
    Private lbltranamount As SDUIComponent        'ignore
    Private lblamount As SDUIComponent        'ignore
End Sub
'show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'get the reference to the app
    app = duiapp
    BANano.Await(BuildPage)
End Sub
'start building the page
Private Sub BuildPage
    'initialize the page
    page.Initialize(Me, "page", "page")
    'clear the pageviewer
    banano.Await(page.ClearPageView)
    'set the page properties
    page.Title = "page"
    page.FullPage = true
    page.Container = false
    page.MxAuto = false
    page.Flex = false
    page.FlexWrap = false
    page.BgColor = "base"
    page.BgColorIntensity = "100"
    page.Styles = "flex:1;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px"
    banano.Await(page.AddToParent(app.PageViewer, page.CustProps))
    '
    component1.Initialize(Me, "component1", "component1")
    component1.ParentID = "page1"
    component1.Styles = "align-items:center;display:flex;flex-direction:row;justify-content:space-between"
    component1.AddToParent("page1", component1.CustProps)
    '
    '
    component2.Initialize(Me, "component2", "component2")
    component2.ParentID = "component1"
    component2.Tag = "p"
    component2.Text = "Home"
    component2.Styles = "color:#083371;font-size:32px;font-weight:800"
    component2.AddToParent("component1", component2.CustProps)
    '
    '
    button1.Initialize(Me, "button1", "button1")
    button1.ParentID = "component1"
    button1.Caption = ""
    button1.ButtonType = "button-icon"
    button1.Shape = "circle"
    button1.Variant = "ghost"
    button1.TextColor = "#083371"
    button1.IconName = "fa-solid fa-gear"
    button1.AddToParent("component1", button1.CustProps)
    '
    '
    component3.Initialize(Me, "component3", "component3")
    component3.ParentID = "page1"
    component3.Styles = "align-items:center;background-color:#f1f3f7;border-radius:8px;display:flex;flex-direction:row;margin-top:16px;padding:8px"
    component3.AddToParent("page1", component3.CustProps)
    '
    '
    icon1.Initialize(Me, "icon1", "icon1")
    icon1.ParentID = "component3"
    icon1.IconName = "fa-solid fa-magnifying-glass"
    icon1.Size = ""
    icon1.SizeOwn = "24px"
    icon1.Flip = ""
    icon1.AddToParent("component3", icon1.CustProps)
    '
    '
    textbox1.Initialize(Me, "textbox1", "textbox1")
    textbox1.ParentID = "component3"
    textbox1.Caption = "textbox1"
    textbox1.PlaceHolder = "Search"
    textbox1.TextAlignment = "left"
    textbox1.Bordered = False
    textbox1.DpAltInput = False
    textbox1.Styles = "color:#083371;font-size:16px;font-weight:400;height:2rem;margin-left:8px"
    textbox1.AddToParent("component3", textbox1.CustProps)
    '
    '
    animatedview.Initialize(Me, "animatedview", "animatedview")
    animatedview.ParentID = "page1"
    animatedview.AddToParent("page1", animatedview.CustProps)
    '
    '
    component4.Initialize(Me, "component4", "component4")
    component4.ParentID = "animatedview"
    component4.Tag = "p"
    component4.Text = "Accounts"
    component4.Styles = "color:#083371;font-size:24px;font-weight:500;margin-top:16px"
    component4.AddToParent("animatedview", component4.CustProps)
    '
    '
    accountitem.Initialize(Me, "accountitem", "accountitem")
    accountitem.ParentID = "animatedview"
    accountitem.Styles = "background-color:#ffffff;border-radius:8px;display:flex;flex-direction:row;margin-top:8px;padding:8px"
    accountitem.AddToParent("animatedview", accountitem.CustProps)
    '
    '
    component5.Initialize(Me, "component5", "component5")
    component5.ParentID = "accountitem"
    component5.Styles = "background-color:#e74c3c;border-radius:24px;height:48px;width:48px"
    component5.AddToParent("accountitem", component5.CustProps)
    '
    '
    component6.Initialize(Me, "component6", "component6")
    component6.ParentID = "accountitem"
    component6.Styles = "display:flex;flex-direction:column;flex:1;justify-content:center;margin-left:16px"
    component6.AddToParent("accountitem", component6.CustProps)
    '
    '
    itemamount.Initialize(Me, "itemamount", "itemamount")
    itemamount.ParentID = "component6"
    itemamount.Tag = "p"
    itemamount.Text = "$15,178.47"
    itemamount.Styles = "color:#083371;font-size:16px;font-weight:500"
    itemamount.AddToParent("component6", itemamount.CustProps)
    '
    '
    itemdescription.Initialize(Me, "itemdescription", "itemdescription")
    itemdescription.ParentID = "component6"
    itemdescription.Tag = "p"
    itemdescription.Text = "Salary Account **** 1485"
    itemdescription.Styles = "color:#818892;font-size:16px;font-weight:400"
    itemdescription.AddToParent("component6", itemdescription.CustProps)
    '
    '
    component7.Initialize(Me, "component7", "component7")
    component7.ParentID = "accountitem"
    component7.Styles = "background-color:#f1f3f7;border-radius:8px;padding-left:8px;padding-right:8px;padding-top:4px;padding-bottom:4px;align-self:center"
    component7.AddToParent("accountitem", component7.CustProps)
    '
    '
    component8.Initialize(Me, "component8", "component8")
    component8.ParentID = "component7"
    component8.Tag = "p"
    component8.Text = "View"
    component8.Styles = "color:#083371;font-size:16px;font-weight:600"
    component8.AddToParent("component7", component8.CustProps)
    '
    '
    transview.Initialize(Me, "transview", "transview")
    transview.ParentID = "page1"
    transview.AddToParent("page1", transview.CustProps)
    '
    '
    transheading.Initialize(Me, "transheading", "transheading")
    transheading.ParentID = "transview"
    transheading.Styles = "align-items:center;flex-direction:row;justify-content:space-between;margin-bottom:8px;display:flex;margin-top:16px"
    transheading.AddToParent("transview", transheading.CustProps)
    '
    '
    tranheading.Initialize(Me, "tranheading", "tranheading")
    tranheading.ParentID = "transheading"
    tranheading.Tag = "p"
    tranheading.Text = "Transactions"
    tranheading.Styles = "font-size:24px;font-weight:500;color:#083371"
    tranheading.AddToParent("transheading", tranheading.CustProps)
    '
    '
    lblseeall.Initialize(Me, "lblseeall", "lblseeall")
    lblseeall.ParentID = "transheading"
    lblseeall.Tag = "p"
    lblseeall.Text = "See All"
    lblseeall.Styles = "color:#083371;font-size:16px;font-weight:600"
    lblseeall.AddToParent("transheading", lblseeall.CustProps)
    '
    '
    tranlist.Initialize(Me, "tranlist", "tranlist")
    tranlist.ParentID = "transview"
    tranlist.AddToParent("transview", tranlist.CustProps)
    '
    '
    tranitem.Initialize(Me, "tranitem", "tranitem")
    tranitem.ParentID = "tranlist"
    tranitem.BgColor = "base"
    tranitem.BgColorIntensity = "200"
    tranitem.Styles = "border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-bottom-width:1px;border-color:#9a9ea4;border-top-left-radius:8px;border-top-right-radius:8px;color:#083371;display:flex;flex-direction:row;font-size:24px;font-weight:500;padding-bottom:16px;padding-left:8px;padding-right:8px;padding-top:16px"
    tranitem.AddToParent("tranlist", tranitem.CustProps)
    '
    '
    component9.Initialize(Me, "component9", "component9")
    component9.ParentID = "tranitem"
    component9.Styles = "align-items:center;background-color:#e74c3c33;border-radius:24px;display:flex;height:48px;justify-content:center;width:48px"
    component9.AddToParent("tranitem", component9.CustProps)
    '
    '
    icon2.Initialize(Me, "icon2", "icon2")
    icon2.ParentID = "component9"
    icon2.IconName = "fa-solid fa-wallet"
    icon2.Color = "#e74c3c"
    icon2.Size = ""
    icon2.Flip = ""
    icon2.AddToParent("component9", icon2.CustProps)
    '
    '
    lbltitletext.Initialize(Me, "lbltitletext", "lbltitletext")
    lbltitletext.ParentID = "tranitem"
    lbltitletext.Styles = "display:flex;flex-direction:column;flex:1;justify-content:center;margin-left:16px"
    lbltitletext.AddToParent("tranitem", lbltitletext.CustProps)
    '
    '
    lbltrantitle.Initialize(Me, "lbltrantitle", "lbltrantitle")
    lbltrantitle.ParentID = "lbltitletext"
    lbltrantitle.Tag = "p"
    lbltrantitle.Text = "Salary Payment"
    lbltrantitle.Styles = "color:#083371;font-size:16px;font-weight:500"
    lbltrantitle.AddToParent("lbltitletext", lbltrantitle.CustProps)
    '
    '
    lbltrandate.Initialize(Me, "lbltrandate", "lbltrandate")
    lbltrandate.ParentID = "lbltitletext"
    lbltrandate.Tag = "p"
    lbltrandate.Text = "25 May 2023, 6:15 PM"
    lbltrandate.Styles = "color:#818892;font-size:16px;font-weight:400"
    lbltrandate.AddToParent("lbltitletext", lbltrandate.CustProps)
    '
    '
    lbltranamount.Initialize(Me, "lbltranamount", "lbltranamount")
    lbltranamount.ParentID = "tranitem"
    lbltranamount.Styles = "align-self:center;background-color:#e74c3c33;border-radius:8px;display:flex;padding-bottom:4px;padding-left:8px;padding-right:8px;padding-top:4px"
    lbltranamount.AddToParent("tranitem", lbltranamount.CustProps)
    '
    '
    lblamount.Initialize(Me, "lblamount", "lblamount")
    lblamount.ParentID = "lbltranamount"
    lblamount.Text = "$2000.00"
    lblamount.Styles = "color:#e74c3c;font-size:16px;font-weight:600"
    lblamount.AddToParent("lbltranamount", lblamount.CustProps)
    '
End Sub
Sub getName As String        'ignore
    Return name
End Sub
'
Sub getIcon As String        'ignore
    Return icon
End Sub
'
Sub getTitle As String        'ignore
    Return title
End Sub
'
Sub getColor As String        'ignore
    Return color
End Sub


Related Content

Inspiration Video

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Let's work on an input form...

In this example we create a page with a form, inside the form we create text boxes and add a button.



Lets look at the source code for this page...

B4X:
#IgnoreWarnings:12, 9
Sub Process_Globals
    'this is the name of the page
    Public name As String = "page1"
    Public title As String = "page"
    Public icon As String = "fa-solid fa-swatchbook"
    Public color As String = "#000000"
    'this variable holds reference to the app
    'usually for constants and other things
    Public app As SDUIApp
    'the variable referencing banano lib
    Private banano As BANano                        'ignore
    'this variable holds the page controller
    Public page As SDUIPage
    Private Mode As String        'ignore
    Private form1 As SDUIForm        'ignore
    Private div1 As SDUIDiv        'ignore
    Private avatar1 As SDUIAvatar        'ignore
    Private textbox1 As SDUITextBox        'ignore
    Private textbox2 As SDUITextBox        'ignore
    Private textbox3 As SDUITextBox        'ignore
    Private button1 As SDUIButton        'ignore
End Sub
'show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'get the reference to the app
    app = duiapp
    banano.Await(BuildPage)
End Sub
'start building the page
Private Sub BuildPage
    'initialize the page
    page.Initialize(Me, "page", "page")
    'clear the pageviewer
    banano.Await(page.ClearPageView)
    'set the page properties
    page.Title = "page"
    page.BackgroundImage = "./assets/7.jpg"
    page.FullPage = True
    page.Container = False
    page.MxAuto = False
    page.Flex = False
    page.FlexWrap = False
    page.PaddingAXYTBLR = "a=5px; x=?; y=?; t=?; b=?; l=?; r=?"
    banano.Await(page.AddToParent(app.PageViewer, page.CustProps))
    '
    form1.Initialize(Me, "form1", "form1")
    form1.ParentID = "page1"
    form1.PaddingAXYTBLR = "a=10px; x=?; y=?; t=?; b=?; l=?; r=?"
    form1.AddToParent("page1", form1.CustProps)
    '
    '
    div1.Initialize(Me, "div1", "div1")
    div1.ParentID = "form1"
    div1.CustomTag = ""
    div1.CenterChildren(True)
    div1.H("100px")
    div1.AddToParent("form1", div1.CustProps)
    '
    '
    avatar1.Initialize(Me, "avatar1", "avatar1")
    avatar1.ParentID = "div1"
    avatar1.Size = "20"
    avatar1.Classes = "shadow-lg"
    avatar1.AddToParent("div1", avatar1.CustProps)
    '
    '
    textbox1.Initialize(Me, "textbox1", "textbox1")
    textbox1.ParentID = "form1"
    textbox1.InputType = "input-group"
    textbox1.Caption = "First Name"
    textbox1.CaptionColor = "#FFFFFF"
    textbox1.Classes = "rounded"
    textbox1.AddToParent("form1", textbox1.CustProps)
    '
    '
    textbox2.Initialize(Me, "textbox2", "textbox2")
    textbox2.ParentID = "form1"
    textbox2.InputType = "input-group"
    textbox2.Caption = "Last Name"
    textbox2.CaptionColor = "#FFFFFF"
    textbox2.AddToParent("form1", textbox2.CustProps)
    '
    '
    textbox3.Initialize(Me, "textbox3", "textbox3")
    textbox3.ParentID = "form1"
    textbox3.InputType = "password"
    textbox3.Caption = "Password"
    textbox3.CaptionColor = "#FFFFFF"
    textbox3.ShowEyes = True
    textbox3.AppendIcon = "fa-solid fa-eye"
    textbox3.AddToParent("form1", textbox3.CustProps)
    '
    '
    button1.Initialize(Me, "button1", "button1")
    button1.ParentID = "form1"
    button1.Caption = "Sign Up"
    button1.BgColor = "#FFFFFF"
    button1.TextColor = "#000000"
    button1.IconName = ""
    button1.NormalCase = True
    button1.Block = True
    button1.MarginAXYTBLR = "a=?; x=?; y=?; t=20px; b=?; l=?; r=?"
    button1.AddToParent("form1", button1.CustProps)
    '
End Sub
Sub getName As String        'ignore
    Return name
End Sub
'
Sub getIcon As String        'ignore
    Return icon
End Sub
'
Sub getTitle As String        'ignore
    Return title
End Sub

Sub getColor As String        'ignore
    Return color
End Sub
'
 

Mashiane

Expert
Licensed User
Longtime User
Creating a Kanban Card Item.

I needed to create a Kanban Board Card for one of my projects. So I fired up SDWireframes... after a while I managed to design exactly what I need.
This card will be reusable and thus I need to make it a template, where I will update the priority, the type, the task name, due date and progrress and person responsible.



This is the End Result I needed.





The HTML for the kanban item card...

B4X:
<div
  id="kbi_{id}"
  class="card card-bordered bg-base-100 shadow"
  data-bgcolor="bg-base-100"
>
  <div class="card-body shadow-none"
    style="padding: 3px 3px 10px"
  >
    <header class="navbar bg-base-100" data-bgcolor="bg-base-100">
      <div class="navbar-start">
        <div
          class="badge text-xs h-8 {prioritycolor}"
          data-h="h-8"
          data-color="badge-success"
        >
          <span>{priority}</span>
        </div>
        <div
          class="badge text-xs h-8 mx-[3px] {tasktypecolor}"
          data-h="h-8"
          data-color="badge-success"
        >
          <span>{tasktype}</span>
        </div>
      </div>
      <div class="navbar-end">
        <div class="dropdown dropdown-end">
          <label
            tabindex="0"
            class="btn btn-ghost btn-circle"
            ><div class="indicator">
              <div>
                <i
                  class="fa-solid fa-ellipsis-vertical fa-2lg"
                ></i>
              </div>
              <span
                class="-mt-2 -mr-2 badge indicator-item lowercase rounded-full aspect-square hidden"
                ><span>5</span></span
              >
            </div></label
          >
          <ul
            id="kbimenulist_{id}"
            tabindex="0"
            class="dropdown-content bg-base-100 menu shadow menu-normal menu-vertical rounded-box"
            data-rounded="rounded-box"
          ></ul>
        </div>
      </div>
    </header>
    <p class="text-wrap mx-[10px]">{taskname}</p>
    <p class="text-wrap mx-[10px] mt-[2px] mb-[1px]">Due: {duedate}</p>
    <div class="form-control mx-[10px] mt-[5px]">
      <label class="label"
        ><span class="label-text">Progress</span
        ><span class="label-text-alt">{progress}%</span
        ></label
      ><label class="input-group"
        ><progress
          class="progress input-bordered w-full progress-primary"
          data-color="progress-primary"
          max="100"
          min="0"
          step="1"
          value="{progress}"
        ></progress
      ></label>
    </div>
    <div class="badge h-8 mx-[10px] mt-[5px]" data-h="h-8">
      <div class="avatar -ml-3">
        <div class="rounded-full w-8" data-w="w-8">
          <img src="{assignedtoimage}" alt="" />
        </div>
      </div>
      <span class="ml-2">{assignedto}</span>
    </div>
  </div>
</div>


Exciting...
 

Attachments

  • petadopt Abstract Designer Guide.zip
    1.7 KB · Views: 120
  • kanban.zip
    1.7 KB · Views: 112
Last edited:

giannimaione

Well-Known Member
Licensed User
Longtime User
how to use this example module kanban.bas?
with sithaso ?
there are errors:
B4X:
taskprogress.AppendIconRemoved = True 'Unknown member
    taskprogress.HintTextRemoved = True 'Unknown member
    taskprogress.IndicatorRemoved = True
    taskprogress.PrefixRemoved = True
    taskprogress.PrependButtonRemoved = True
    taskprogress.SuffixRemoved = True 'Unknown member: siffixremoved
 

Mashiane

Expert
Licensed User
Longtime User
Thank you for your interest, however please always start a new thread for your questions.

For now you can comment the code or remove it.

Please note that as indicated in the first post, this tool is still in pre-launch stage, meaning that we are still beta testing it. So some functionalities are not existing in the current version of SithasoDaisy and I will include steps to migrate to this coming version.
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…