Closed mcordova1967 closed 2 years ago
Hi @mcordova1967,
Thank you.
As all the sizes are relative to the "root element" (.rem
), the quick - not so ellegant - trick is to override the responsive typography:
:root {
--font-size: 16px;
}
The best way is to import Pico SASS library and recompile Pico with the "responsive flags" disabled:
$enable-responsive-spacings: false;
$enable-responsive-typography: false;
@import "pico";
Thank you, I don't wanna lose the responsive features, just make the forms and tables a bit less bif in computer screens, they are responsive in cell phones, no problem, we like and need that.
This overriding of values should go into a custom CSS?
Regards, Martin
On Sat, Jan 1, 2022 at 1:27 AM Lucas Larroche @.***> wrote:
Hi @mcordova1967 https://github.com/mcordova1967,
Thank you. As all the sizes are relative to the "root element" (.rem), the quick - not so ellegant - trick is to override the responsive typography:
:root { --font-size: 16px; }
The best way is to import Pico SASS library and recompile Pico with the "responsive flags" disabled:
$enable-responsive-spacings: false;$enable-responsive-typography: @.*** "pico";
— Reply to this email directly, view it on GitHub https://github.com/picocss/pico/issues/100#issuecomment-1003508870, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW34RAGIYKM4YQT7RCX4VADUT2GFLANCNFSM5LCBMTJQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
You are receiving this because you were mentioned.Message ID: @.***>
--
Framework Dinámica Plataforma avanzada para desarrollo rápido de aplicaciones Web/SQL con Java EE y Eclipse http://www.martincordova.com
El BLOG de Dinámica: http://dinamicaframework.blogspot.com/
El Canal de Dinámica en Youtube: http://www.youtube.com/dinamicaframework
Martín Córdova y Asociados, C.A. J-31134803-4 / Caracas, Venezuela Cel: 58-424-2686639
You can add some custom CSS styles after your CSS link to Pico and target only <table>
and <form>
:
<style>
form, table {
--font-size: 16px;
}
</style>
That will disable the responsive typography only for the table and the form. But it requires more tests; you might need more styles override.
Thank you for the prompt reply, we will do some tests. We build mobile Apps with Apache Cordova for Banks mainly, and those Apps also run as WebApps for desktop, it is an approach we are happy with but I would like to simplify the front-end code and make it easier to manage for future projects, especially now that we are embracing C++ for the backend with a new JSON interface and the backend is running so fast, so far with Pico the resulting page code is much simpler, we need to make some tests of something responsive to see how it works on desktop and mobile.
Question: Do you have some conditional style for table headers, so certain column won't be displayed if the screen is too small, I mean to make the table responsive to portrait or landscape on cellphones.
I am attaching an image of the famous DataTable widget on a Pico page.
Best regards and happy 2022, Martin www.martincordova.com
On Sat, Jan 1, 2022 at 2:07 AM Lucas Larroche @.***> wrote:
You can add some custom CSS styles after your CSS link to Pico and target only
and
I just have one day using Pico, looking for simplicity to build a WebApps light foundation for mobile and desktop, I like it very much, the introduction was very good, but I am not familiar with the latest advances in CSS, I don't know about compiling a CSS or using variables (where should I use them?), my first guess is going into pico.css and change it but where to look? I would like to reduce a bit the size of forms, of its buttons and the size of tables on PC screens.
This is a Pico/DataTable frontend consuming a C++ microservice, which is our real occupation here, but I want to have something light on the front-end. We left the debug turned on in case you wanna see the conversation with the microservice, just open Chrome devtools/console.
Our very first PICO demos
Customers view: [https://cppserver.com/demo/custview.htm]()
Basic form, adds a record in a database via microservice: https://cppserver.com/demo/categadd.htm
I think PICO is a wonderful idea for those of us who feel overwhelmed by Bootstrap.
Regards, Martin