CSS Framework & Ninox

szormpas
9 mths ago
34replies

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.

Scripting and Functions

- Fred
- 9 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
  
  9 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
- 9 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
- 9 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
- 9 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
- 9 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'>  </div>

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

https://getbootstrap.com/docs/5.0/getting-started/introduction/

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
  
  9 mths ago
  
  Reported - view
  There are some way to use the button to Go to other table.
- szormpas
  
  9 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
  
  7 mths 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
  
  7 mths 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
  
  7 mths 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
  
  7 mths ago
  
  Reported - view
  first question i figured out myself ;)
  
  (...) i.customer + "</h5> <p class='card-text'>" + i.appointment + "</p>
- Nick
- 9 mths ago
- Reported - view
Thank for sharing Σωτήρη.
Very good job!
- szormpas
  
  9 mths ago
  
  Reported - view
  Ευχαριστώ!
- szormpas
- 9 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
  
  7 mths ago
  
  Reported - view
  Do you have any detailed study information?thanks
- szormpas
  
  7 mths 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
  
  7 mths 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
  
  7 mths 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
  
  7 mths ago
  
  Reported - view
  Thank you, I will seek help.
- gold_cat
  
  5 mths ago
  
  Reported - view
  Hi friend,
  
  I'm about to start learning the CSS you shared. I'm at the beginner stage. For instance, if I want to change this black header to blue, how can I find it in the framework code and modify it? Do I need to go into the framework code and modify it each time? Do you have any recommendations for software to edit CSS code? Thanks...
- gold_cat
  
  5 mths ago
  
  Reported - view
  black header to blue..
- szormpas
  
  5 mths ago
  
  Reported - view
  hi, I good starting point is the Boodstrap documentation page for tables:
  
  https://getbootstrap.com/docs/5.0/content/tables/
  
  If you want a blue header then use contextual classes to color tables, table rows or individual cells like below:
  
  <table class="table-primary">...</table>
  
  or
  
  <table class="table-info">...</table>
- gold_cat
  
  5 mths ago
  
  Reported - view
  Thank you for your response! Through you, I have been introduced to Bootstrap and Tailwind. So far, which one do you recommend to be applied to a database? Thank you.
- szormpas
  
  5 mths ago
  
  Reported - view
  Both have pros and cons. Bootstrap seems straightforward and uses component classes, but it is more restrictive, and you should consider its enormous size. On the other hand, Tailwind introduces the concept of utility classes but has a steep learning curve.

Content aside

1 Likes
9 days agoLast active
34Replies
973Views
11 Following

CSS Framework & Ninox

34 replies

Content aside

Overview