1

CSS Framework & Ninox

CSS_Framework.ninox

Hello,

I recently realized that Ninox allows us to use a CSS stylesheet file directly from a CDN link.

I wanted to know if we could use a CSS Framework to design a Ninox page faster and more efficiently.

So, as seen in the attached database, I started experimenting with Bootstrap to create Buttons, Tables, and responsive Columns.

It is a promising solution, although I noticed that it changes the size of the Ninox font, which results in a disruptive layout.

  • Have you ever used a CSS framework in Ninox before?
  • Do you know of any other CSS framework besides Bootstrap that fits better with Ninox?
  • What issues can arise from such an approach?

Please share your thoughts, reflections, and ideas here... Thank you.

21 replies

null
    • Fred
    • 2 mths ago
    • Reported - view

    Very interested in this topic as I've just started using html in my forms.

    What I found out that is that I could only reliably modify text and format when inside a table. When I tried to use body and such I would get no response or a weird response.

    People smarter than me can explain better, but I suspect that Ninox uses html to build what we see so if we try to modify body and such it has overall affect on the app/webapp/etc.

    For example, when I run your DB I get the following at an edit field screen:

    When it should look like:

    But then maybe that is what you going for.

    I don't use a CDN to get my CSS, but I do create a CSS field in my DB.

    Look forward to seeing what others do.

      • szormpas
      • 2 mths ago
      • Reported - view

        it seems that Bootstrap overrides the Ninox HTML settings....maybe someone with experience could tell us how to deal with these conflicts.

    • Ninox partner
    • RoSoft_Steven.1
    • 2 mths ago
    • Reported - view

    I guess by not using the regular class names like <div class="head">. Use <div class="head33"> instead.

    or <button class="button"> would be <button class="button33"> or <head> would be <head class="customname">

    I also use this for my custom buttons so that the rest of the displayed Ninox panels wouldn't get "infected".

    • szormpas
    • 2 mths ago
    • Reported - view

    After searching, I found that another way to integrate multiple frameworks or libraries into a web application is to use techniques like iframes, Web Components, and shadow DOMs to isolate different parts of our application. This can help create boundaries between frameworks and prevent them from interfering with each other.

    Could these be applicable in our case?

    • szormpas
    • 2 mths ago
    • Reported - view

    After testing many CSS frameworks and trying to find one with fewer conflicts with Ninox, I found Pure.css from Yahoo!

    In a nutshell, it is a lightweight, about 3.7KB CSS-only responsive framework.

    After reading the documentation, you can quickly create styled elements and components such as Buttons, Tables, Forms, Menus with dropdowns, and powerful Grids.

    I attached a database for you to look over!

    Pure_css.ninox
    • szormpas
    • 2 mths ago
    • Reported - view

    Hello, I have good news!
    Finally, there is a way to isolate Bootstrap so it doesn't conflict with Ninox.

    We must prefix all Bootstrap CSS with a class name (e.g.,  .bootstrap5). We can do this manually by following the steps mentioned here, but fortunately, I found a ready-made isolated version 5.0.2 here.

    An important final step is to open the CSS file with a text editor and then find & replace the instance ".bootstrap5 body" with ".bootstrap5" 

    This way, we can use the Bootstrap framework inside a div element:

    <div class='bootstrap5'>
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

     

    Ninox users can use many code snippets to experiment and prototype their Pages (Dashboards). For example:

    1. https://getbootstrap.com/docs/5.0/getting-started/introduction/
    2. https://www.w3schools.com/bootstrap5/index.php

     

    Also, I have prepared a demo database to test the features of the popular CSS framework quickly.

    Enjoy!

    Bootstrap_css.ninox
      • Rafael Sanchis
      • Rafael_Sanchis
      • 2 mths ago
      • Reported - view

       

      There are some way to use the button to Go to other table.

      • szormpas
      • 2 mths ago
      • Reported - view

         you can try the following if you want to open a specific record of your table:

      <span onclick=""ui.popupRecord('" + raw(recordId) + "')"">
<button type='button' class='btn btn-primary'>Primary</button>
</span>
      • lime_owl
      • 2 wk ago
      • Reported - view

      Could you by any chance explain this a bit further? I am trying to get your demo buttons in this DB "working" but so far without any success.

      Here is the basic script to open a table in your bootstrap DB:

      let table := tableId(first(select 'Bootstrap 5.0.2 (Isolated)'));
      html(---
      <p><span onclick="ui.openTable( '{ table }')"></span></p>
      ---)

      How can I insert this code so that the first button opens the table?

      let css := (select 'Bootstrap 5.0.2 (Isolated)').Bootstrap5;
      html("<!doctype html>
      <html lang='en'>
        <head>
          <meta charset='utf-8'>
          <meta name='viewport' content='width=device-width, initial-scale=1'>
          <style>
          " +
      css +
      "

          </style>
        </head>
        <body>
          <div class='bootstrap5'>

      <button type='button' class='btn btn-primary'>Primary</button>
      <button type='button' class='btn btn-secondary'>Secondary</button>
      <button type='button' class='btn btn-success'>Success</button>
      <button type='button' class='btn btn-danger'>Danger</button>
      <button type='button' class='btn btn-warning'>Warning</button>
      <button type='button' class='btn btn-info'>Info</button>
      <button type='button' class='btn btn-light'>Light</button>
      <button type='button' class='btn btn-dark'>Dark</button>
      <button type='button' class='btn btn-link'>Link</button>

          </div>
        </body>
      </html>")

      • szormpas
      • 2 wk ago
      • Reported - view

         Hi, in order to open the table by clicking the first button use the following code:

      let css := (select 'Bootstrap 5.0.2 (Isolated)').Bootstrap5;
html("<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
    " +
css +
"      </style>
  </head>
  <body>
    <div class='bootstrap5'>
<span onclick=""ui.openTable('" +
raw(tableId("Bootstrap 5.0.2 (Isolated)")) +
"')"">
<button type='button' class='btn btn-primary'>Primary</button>
</span>
<button type='button' class='btn btn-secondary'>Secondary</button>
<button type='button' class='btn btn-success'>Success</button>
<button type='button' class='btn btn-danger'>Danger</button>
<button type='button' class='btn btn-warning'>Warning</button>
<button type='button' class='btn btn-info'>Info</button>
<button type='button' class='btn btn-light'>Light</button>
<button type='button' class='btn btn-dark'>Dark</button>
<button type='button' class='btn btn-link'>Link</button>      </div>
  </body>
</html>
      • lime_owl
      • 2 wk ago
      • Reported - view

      great, that worked, thanks.

       

      maybe you could also help me with the next problem?

      i am trying to get ninox data from other tables into the html elements. i created a demo table "meetings" with the columns "customer", "appointment" and "status".

       

       

      now i would like a formula-field to create a card for each entry like this:

       

      of course it should be one card for each entry and not each entry on each card. what am i doing wrong?

      let meet := (select meetings);
      let css := (select 'Bootstrap 5.0.2 (Isolated)').Bootstrap5;
      for i in meet do
          html("<!doctype html>
      <html lang='en'>
        <head>
          <meta charset='utf-8'>
          <meta name='viewport' content='width=device-width, initial-scale=1'>
          <style>
          " +
          css +
          "

          </style>
        </head>
        <body>
          <div class='bootstrap5'>

      <div class='card' style='width: 18rem;'>
        <img src='https://source.unsplash.com/yellow-bananas-fczCr7MdE7U' class='card-img-top'>
        <div class='card-body'>
          <h5 class='card-title'>" +
          meet.customer +
          "</h5>
          <p class='card-text'>" +
          meet.appointment +
          "</p>
      <span onclick=""ui.popuprecord('" +
          raw(number(meet)) +
          "')"">
      <button type='button' class='btn btn-primary'>Primary</button>

      </span>

        </div>
      </div>

          </div>
        </body>
      </html>")
      end

      and finally: how to phrase the button this time so that it opens the record of the card?

      • lime_owl
      • 2 wk ago
      • Reported - view

      first question i figured out myself ;)

       

      (...)
    i.customer +
    "</h5>
    <p class='card-text'>" +
    i.appointment +
    "</p>
    • Nick
    • 2 mths ago
    • Reported - view

    Thank for sharing Σωτήρη.
    Very good job!

      • szormpas
      • 2 mths ago
      • Reported - view

        Ευχαριστώ!

    • szormpas
    • 2 mths ago
    • Reported - view

    I'm excited because I finally built a toolkit, which is the best for creating our CSS stylesheets!

    It's the Tailwind framework, which uses an entirely different philosophy and is based on Utility classes. A cool feature is the Just-In-Time engine that generates the styles you need for your project on-demand, producing small CSS files.

    The need for isolation inside Ninox still exists, and fortunately, here is a handy plugin that we can install directly inside Tailwind.

    An excellent library with ready-made components for the Tailwind CSS framework is daisyUI, which we can also install into a Tailwind project.

    The tricky part is that we must set up the above toolset outside the Ninox environment and then copy the code.

    The best option for this is Visual Studio Code.

    If you need any help with the above, please let me know!

    Using this toolset, I created a demo dashboard without writing a single line of code!

    Have fun!

    Tailwind_css.ninox
      • gold_cat
      • 9 days ago
      • Reported - view

       Do you have any detailed study information?thanks

      • szormpas
      • 9 days ago
      • Reported - view

         Unfortunately, I don't have a written guide for all the above steps in detail, but I could help you with individual steps if you want to experiment with a CSS framework. I wish ninox would allow us more customisation in future versions...

      • Fred
      • 9 days ago
      • Reported - view

      Have you gotten your invite to the 3.12 release demo?

      https://ninox.com/en/blog/new-ways-to-customize-your-workspace

      • szormpas
      • 9 days ago
      • Reported - view

          Hi, that's great news, I am looking forward to seeing the 3.12 release…the new 3000 icons are wowing me!

      • gold_cat
      • 8 days ago
      • Reported - view

       Thank you, I will seek help.

    • Alan_Cooke
    • 9 days ago
    • Reported - view

    With 3.12 coming with the beginnings of customisation I would think it prudent to wait.  Seems to me Ninox are going to eventually get there.  Of course, they tell us but hey ho......

Login to reply

Content aside

  • 1 Likes
  • 8 days agoLast active
  • 21Replies
  • 472Views
  • 10 Following