0

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.

11 replies

null
    • Fred
    • 3 wk 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
      • 3 wk 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
    • 3 wk 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
    • 3 wk 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
    • 3 wk 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!

    • szormpas
    • 2 wk 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!

      • Rafael Sanchis
      • Rafael_Sanchis
      • 2 wk ago
      • Reported - view

       

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

      • szormpas
      • 2 wk 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>
      
    • Nick
    • 2 wk ago
    • Reported - view

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

      • szormpas
      • 11 days ago
      • Reported - view

        Ευχαριστώ!

    • szormpas
    • 2 wk 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!

Content aside

  • 11 days agoLast active
  • 11Replies
  • 271Views
  • 7 Following