search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.71k stars 399 forks source link

Any example about how to change fonts and spacing so forms and tables are not so big on PC screens? #100

Closed mcordova1967 closed 2 years ago

mcordova1967 commented 2 years ago

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

lucaslarroche commented 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";
mcordova1967 commented 2 years ago

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: @.***>

--

Martín Córdova y Asociados, C.A. J-31134803-4 / Caracas, Venezuela Cel: 58-424-2686639

lucaslarroche commented 2 years ago

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.

mcordova1967 commented 2 years ago

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 :

That will disable the responsive typography only for the table and the form. But it requires more tests; you might need more styles override.

— Reply to this email directly, view it on GitHub https://github.com/picocss/pico/issues/100#issuecomment-1003512186, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW34RABLLYVPU2ZEQCDKHZTUT2KZ5ANCNFSM5LCBMTJQ . 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: @.***>

--

Martín Córdova y Asociados, C.A. J-31134803-4 / Caracas, Venezuela Cel: 58-424-2686639

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.