Bootstrap (CSS)

BOOTSTRAP

 

 I did some analysis of Bootstrap back in 2016 for Avatar, but have gone back and given it a new look (2023).

Built by Twitter developers.
File size is about 276K, although it can be decreased by 70%–75% by only including the essential style.
One of the most well-liked CSS frameworks accessible and the most starred CSS repository.


Only install the pieces that you need.
Root CSS variables govern light and dark modes.
All CSS variables start with --bs-
Bootstrap offers default Utilities and you can put your own custom classes
Powerful JavaScript plugins without jQuery
  Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, Scrollspy, Tab, Toast, Tooltip
Most plugins that are HTML-first (so you can add with being a data attribute in your HTML)
Bootstrap Icons
Bootstrap "Themes" (that are really templates)

COMPARISION:
  Simple and Compact CSS Framework: Pico.css
  An Opinionated CSS Framework for Customization: Bootstrap

  FOR BOOTSTRAP:
    1) Bootstrap can be customized in a variety of ways.
    2) A wide variety of themes available to help you avoid the "Bootstrap look"
    3) Bootstrap is popular (and thus large community)
    4) Bootstrap is developed to be instantly compatible with all sizes of screens
    5) Bootstrap is well documented
    6) Builders available that use Bootstrap such as Pingendo and Layoutit.

  AGAINST BOOTSTRAP:
   1) Large file size out of the box
   2) Too many HTML classes
   3) Websites can start to look the same
   4) Hard to customise, except typography and colors
   5) Large font sizes
   6) No way to override command characters D, T, L, etc. (will always be interpreted as commands)

OVERALL:
   I prefer Pico, but just barely.

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

JSON Web Tokens

Image
 JSON Web Tokens (JWT)   A JSON Web Token (JWT) is commonly used for authentication and authorization in web applications and APIs. Essentially, JWTs encode info about a user or entity into a JSON object, which is then digitally signed and/or encrypted.  A JWT consists of three parts, separated by dots (.):  1. Header: Contains metadata about the token, such as the signing algorithm (e.g., HMAC SHA256, RSA SHA256) and the token type (JWT).  2. Payload: Contains the claims, which are statements about an entity (e.g., user ID, role, expiration time).   3. Signature: Verify that the JWT sender is who they claim to be and that the message hasn't been tampered with.  How it works:   Authentication: A user logs in, and the server creates a JWT containing user info and other relevant claims.    Token Transmission: The server sends the JWT to the client (e.g., browser).    Subsequent Requests: The client includes the JWT in the au...
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