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.
34 replies
-
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!
-
Thank you for your response, it was very helpful. Can you help me with the following problem?
-
hi, try the following script:
let recordId := record('2',1); html("<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <style> </style> </head> <body> <div class='bootstrap5'> <span onclick=""ui.popupRecord('" + raw(recordId) + "')""> <button type='button' class='btn btn-primary'>Primary</button> </span> </div> </body> </html>Also, in order to use Bootstrap you should import into your database the CSS stylesheet.
-
Thank you for your help!
-
hi~friend,The new Bootstrap version has been released, how can you upgrade the code?
-
Is there also a way to change between different pages?
I am on my Page 'Dashboard' and I want to include an HTML Button which is open up the Page 'Posteingang'. Would be great if you have an idea!html("<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <style> </style> </head> <body> <span onclick=""ui.openTable('" + Posteingang + "')""> <button type='button' class='btn btn-primary'>Primary</button> </span> </body>") -
Hi, try the following:
html("<button><span onclick=""ui.openTable('" + raw(tableId("Posteingang")) + "')"">Open</button>") -
Thanks so much! That was working!
-
my pleasure!
-
-
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......
Content aside
-
1
Likes
- 3 wk agoLast active
- 34Replies
- 1013Views
-
11
Following