PicoCss

PICO CSS 

 

4/5 stars from EBW

picocss.com
  Only 67k minified if classless

OVERALL: Much better than Bootstrap with lots of classes to remember
          or Tailwind CSS forces too many classes.

Has terrible documentation though.

1) For my website, I downloaded the classless file from their download area on Github:

pico.classless.min.css

in my newly created "PicoCss" folder under the website.

2) then I added 2 links in the head tag at the bottom:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Eric Wood</title>
       
        <link rel="stylesheet" href="global.css">
        <link rel="canonical" href="https://picocss.com/examples/classless/" />
        <link rel="stylesheet" href="PicoCss/pico.classless.min.css"/>      
    </head>


Elegant styles for all native HTML without .classes and dark mode auto enabled.

Menu navigation of website (tons shorter than Tailwind CSS):
  <nav>
     <ul>
       <li>Brean</li>
     </ul>  
     <ul>
       <li><a href="#"> 1 </a></li>
       <li><a href="#"> 2 </a></li>
     </ul>  
  </nav>

Accordion (tons shorter than Tailwind CSS):
  <details open>
  </details>

Buttons:
  WAY 1 - NO CLASSES: <button>Button</button> <- blue background with white letter
  WAY 2 - NO CLASSES: <input type="submit">   <- blue background with white letter
  WAY 3 - IN LINE:  <a href="#" role="button">Link</a> <- blue background with white letter
  WAY 4 - IN LINE:  <a href="#" role="button">Link</a> <- blue background with white letter
  WAY 5 - USE CLASSES:  <a href="#" role="button" class="secondary">Secondary</a> <- gray background with white letter
  WAY 5 - USE CLASSES:  <a href="#" role="button" class="contrast">Contrast</a>  <- white background with black letter

  Can change <a> to <a role="button"> to make them buttons
 
Cards
  <article></article>

Dropdowns

Modals

Containers
   .container - centered viewport     
   .container-fluid - 100% layout
   uses same breakpoints and viewports as Bootstrap
   
   replace <div> with <main class="container">
   
   replace <div id="courses">  with <section id="courses">  
   
   replace <div>  with <div class="grid"> for the grid ones  

   replace <div>  with <article> for the ones where want card layout  
   
Grid
   <div class="grid">
       <div> 1 </div>   
       <div> 2 </div>   
       <div> 3 </div>
   </div>

Horizontal Scroller
  <figure> is scrollable container

Class-less version
  <header>, <main> and <footer> are containers
  .classless version if need centered viewport
  but this requires slightly different version of framework
    <link rel="stylesheet" href="css/pico.classless.min.css">
 
Redefine CSS variables
   :root { --pri,ary: #5e35b1; }

There is a Pico SASS library
      
data-theme="dark"

Comments

Post a Comment

Popular posts from this blog

Upgrading to .NET8 from desktop versions 4.8.X

Image
Upgrade to Latest .NET OVERALL     Problems and differences encountered taking applications from .NET 4.8 desktop to .NET 8 . SUGGESTION    Rebuild the solution and project files from scratch with latest .NET 8. PROBLEMS APIs    On later .NET APIs (post 4.8 desktop), you need to be extra carefully about how the inbound objects are declared.  So if integer in Postman, then must be integer in object.  In older .NET, they accept properties as strings.       Example - Say body in Postman is:          {     "SettingData" : 31000 }    Pretend endpoint method is: [HttpPut("cache/resettimer")] [Produces("application/json")] [ProducesResponseType(typeof(ResetCacheResponse), Status200OK)] public async Task<HttpResponseMessage> MyMethod ([FromBody] InputData input)    Later .NET must be: public class InputData { public int SettingData { get; set; } } ...
Read more

GHL Chat Bots for Webpage

 GHL Chat Bots  for Webpage   GoHighLevel (GHL) is an old established marketing software tool that has AI added to it.  GHL calls this AI for chat bots as "Conversation AI" that only needs to understand typed text.  GHL calls the AI for phone lines as "Voice AI Agents".    So in GHL, go to Sites menu option =>         1) Chat Widget tab => New => <create the chat widget you want, by default newly created chat widgets do "Live Chat" >        2) < pick your funnel or website > => Edit or New => Settings tab => under "Chat Widget" pick the chat widget. ================================ EXTRA:    In GHL, go to Settings menu option => then "Conversation AI" menu option =>       1) click "Create Bot" button => fill in Name, Status, Channel on first tab       2) on Bot Goals tab, click "Appointment Booking"      ...
Read more

GHL > Set website so shorter URL address

Image
GHL > Set website so shorter URL address Background:  In GoHighLevel, you can  set a specific page as the default page   for your website or funnel, essentially making it the "index.html" equivalent for your domain. This page will be the first one displayed when someone visits your domain without specifying a specific page path.   Example:      1) GHL > Site > pick your funnel or website > Edit it.       2) Notice where it puts the website:     3) If my  https://aiappointmentbooker.com/  is not working but works when I go to  https://aiappointmentbooker.com/home-page-3213  like above, then you need to fix your index.html by doing these steps. Here's how you can do it: Go to Domains:  In your GoHighLevel account, go to  Settings > Domains . Find and Edit Your Domain:  Find the domain you want to configure and click on the edit icon next to it. Set the Default Page:  Set...
Read more