Docs: group together reusable CSS for examples in a single stylesheet #35649

julien-deramond · 2022-01-04T12:27:13Z

Description

Gathering reusable CSS from Bootstrap examples in site/layouts/_default/examples.html
This stylesheet defines .b-example-divider, .b-example-vr and .bi used in several examples.

Motivation & Context

This change could help the maintenance of the examples by gathering in a single place some CSS definitions reused several times in Bootstrap examples.

Types of changes

Refactoring (non-breaking change)

Checklist

I have read the contributing guidelines
My code follows the code style of the project (using npm run lint)

Related issues

Live previews

For non-regression testing:

ffoodd

Sounds OK to me but it needs some more testing. I think CSS @import is still considered a bad practice regarding performances, isn't it?

BTW I think some examples' styles could be replaced with new utilities. Another topic 😄

ffoodd · 2022-01-04T20:27:39Z

site/content/docs/5.1/examples/sidebars/sidebars.css

 .bi {
-  vertical-align: -.125em;
  pointer-events: none;


This leftover could be dropped by using the pointer-events utility.

Fixed via 045faaf. I'll look into the main feedback about @import asap.

ffoodd · 2022-01-05T16:53:05Z

@XhmikosR @GeoSot any thought regarding @import for such a small file? Should we link it from the <head> maybe?

GeoSot · 2022-01-05T17:10:34Z

bootstrap/site/layouts/_default/examples.html

Lines 20 to 35 in f7a1b18

    
           <style> 
        
             .bd-placeholder-img { 
        
               font-size: 1.125rem; 
        
               text-anchor: middle; 
        
               -webkit-user-select: none; 
        
               -moz-user-select: none; 
        
               user-select: none; 
        
             } 
        
             @media (min-width: 768px) { 
        
               .bd-placeholder-img-lg { 
        
                 font-size: 3.5rem; 
        
               } 
        
             } 
        
           </style>

As it already has a shared style, maybe is fine to move it there

julien-deramond · 2022-01-05T17:15:57Z

I've just tested 2 different approaches by disabling cache and enabling throttling (Regular 2G). The @import version appears to be longer to be downloaded: 14.71s. The reason is that the loading is sequential: example.css is loaded after dropdown.css.

When removing the @import and rather do it directly in the dropdowns/index.html (it will be inserted as a <link>):

extra_css:
  - "../examples.css"
  - "dropdowns.css"

both the CSS files are loaded at the same time and the global downloaded time of the CSS files is 8.34s.

It seems that the 2nd approach would be better for the 1st load of the examples.css.

With cache enabled it doesn't make any difference after the 1st load.

XhmikosR · 2022-01-05T18:14:14Z

Definitely not import. It's bad practice. We can instead inline it on build timel

ffoodd · 2022-01-05T18:17:58Z

@GeoSot 's suggestion is good but could lead to side effects in other examples if those classes are used without such styles.

Could worth a try 🙂

XhmikosR · 2022-01-05T18:19:47Z

We already inline some stuff: https://github.com/twbs/bootstrap/blob/main/site/layouts/_default/examples.html#L20

…le 2 sorts of dividers

julien-deramond · 2022-01-13T07:16:22Z

site/layouts/_default/examples.html

@@ -31,6 +31,28 @@
          font-size: 3.5rem;
        }
      }
+
+      .b-example-divider {


@ffoodd I didn't see it at first but the sidebars example displays vertical separators. So I've created here a common class grouping together color, box shadow and border. And then 2 separator classes allowing to have an horizontal one and a vertical one.

There are several ways of doing it: only use 2 classes, only put the .b-example-divider horizontal in this file and let examples like sidebars overwrite it to make a vertical one, etc. I'd like your thoughts.

I think .b-example-hr could be dropped. Its height can be the default, and only .b-example-vr would override it.

Apart from this suggestion, it looks fine.

Done in 1b51e6d

ffoodd · 2022-01-17T20:06:45Z

site/content/docs/5.1/examples/list-groups/list-groups.css

 .opacity-50 { opacity: .5; }
 .opacity-75 { opacity: .75; }


I guess those should be dropped since utilities exist already. Maybe another PR later to refactor such styles?

Yes I will create another branch + PR to try to refactor it after the merge of this one 👌

ffoodd · 2022-01-17T20:11:49Z

site/layouts/_default/examples.html

@@ -31,6 +31,28 @@
          font-size: 3.5rem;
        }
      }
+
+      .b-example-divider {


I think .b-example-hr could be dropped. Its height can be the default, and only .b-example-vr would override it.

Apart from this suggestion, it looks fine.

ffoodd

LGTM 👌

Any other considerations, @GeoSot and @XhmikosR?

GeoSot · 2022-01-19T09:18:02Z

LGTM too

XhmikosR

LGTM too, thanks!

Docs: group together examples reusable CSS in a stylesheet

3d72b6a

julien-deramond requested a review from a team as a code owner January 4, 2022 12:27

julien-deramond changed the title ~~Docs: group together examples reusable CSS in a stylesheet~~ Docs: group together reusable CSS for examples in a single stylesheet Jan 4, 2022

ffoodd reviewed Jan 4, 2022

View reviewed changes

GeoSot added css docs v5 labels Jan 4, 2022

Use pointer-events utility in sidebars example

045faaf

julien-deramond added 2 commits January 13, 2022 08:05

Remove @import and move the content into _default/examples.html. Hand…

8652796

…le 2 sorts of dividers

Remove footers.css extra css declaration

d462372

julien-deramond commented Jan 13, 2022

View reviewed changes

Fix modals example

75d2c5b

ffoodd reviewed Jan 17, 2022

View reviewed changes

Review: remove .b-example-hr

1b51e6d

julien-deramond requested a review from ffoodd January 18, 2022 07:49

Merge branch 'main' into main-jd-add-common-examples-stylesheet

c9d53c6

ffoodd approved these changes Jan 18, 2022

View reviewed changes

GeoSot approved these changes Jan 19, 2022

View reviewed changes

XhmikosR approved these changes Jan 19, 2022

View reviewed changes

XhmikosR merged commit 520cc8d into twbs:main Jan 19, 2022

XhmikosR removed the css label Jan 19, 2022

julien-deramond deleted the main-jd-add-common-examples-stylesheet branch January 19, 2022 11:29

julien-deramond mentioned this pull request Jan 19, 2022

Docs: replace CSS by utilities in examples #35699

Merged

26 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs: group together reusable CSS for examples in a single stylesheet #35649

Docs: group together reusable CSS for examples in a single stylesheet #35649

julien-deramond commented Jan 4, 2022 •

edited

Loading

ffoodd left a comment

ffoodd Jan 4, 2022

julien-deramond Jan 5, 2022

ffoodd commented Jan 5, 2022

GeoSot commented Jan 5, 2022

julien-deramond commented Jan 5, 2022 •

edited

Loading

XhmikosR commented Jan 5, 2022

ffoodd commented Jan 5, 2022

XhmikosR commented Jan 5, 2022

julien-deramond Jan 13, 2022

ffoodd Jan 17, 2022

julien-deramond Jan 18, 2022

ffoodd Jan 17, 2022

julien-deramond Jan 18, 2022 •

edited

Loading

ffoodd Jan 17, 2022

ffoodd left a comment

GeoSot commented Jan 19, 2022

XhmikosR left a comment

Docs: group together reusable CSS for examples in a single stylesheet #35649

Docs: group together reusable CSS for examples in a single stylesheet #35649

Conversation

julien-deramond commented Jan 4, 2022 • edited Loading

Description

Motivation & Context

Types of changes

Checklist

Related issues

Live previews

ffoodd left a comment

Choose a reason for hiding this comment

ffoodd Jan 4, 2022

Choose a reason for hiding this comment

julien-deramond Jan 5, 2022

Choose a reason for hiding this comment

ffoodd commented Jan 5, 2022

GeoSot commented Jan 5, 2022

julien-deramond commented Jan 5, 2022 • edited Loading

XhmikosR commented Jan 5, 2022

ffoodd commented Jan 5, 2022

XhmikosR commented Jan 5, 2022

julien-deramond Jan 13, 2022

Choose a reason for hiding this comment

ffoodd Jan 17, 2022

Choose a reason for hiding this comment

julien-deramond Jan 18, 2022

Choose a reason for hiding this comment

ffoodd Jan 17, 2022

Choose a reason for hiding this comment

julien-deramond Jan 18, 2022 • edited Loading

Choose a reason for hiding this comment

ffoodd Jan 17, 2022

Choose a reason for hiding this comment

ffoodd left a comment

Choose a reason for hiding this comment

GeoSot commented Jan 19, 2022

XhmikosR left a comment

Choose a reason for hiding this comment

julien-deramond commented Jan 4, 2022 •

edited

Loading

julien-deramond commented Jan 5, 2022 •

edited

Loading

julien-deramond Jan 18, 2022 •

edited

Loading