Adjustable Pull

css content classes pull

Adjust the widths of .pull-left and .pull-right

Emil Hvitfeldt true
05-20-2021

Content classes such as .pull-left and .pull-right are very useful to organize material in your slides. They come with a default width that you would change, but it isn’t really worth it to do it globally in your slides.

With the use of changed content classes, you can specify the width of .pull-left and .pull-right on a case-by-case basis. The "widths.css" file contains content classes for different widths using the names w* where * is a percentage. Typing .pull-left.w40 would create a column on the left with a width of 40%. The order doesn’t matter so `.w40.pull-left would work as well.

Note that "widths.css" must be placed after "default" in xaringan::moon_reader: css.

Result

Rmd

---
output:
  xaringan::moon_reader:
    css: ["default", "widths.css"]
    lib_dir: libs
    seal: FALSE
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

# Sample Header

.pull-left.w30[
Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.
]

.w65.pull-right[
Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.
]

width.css

.w00 {width: 00%;}
.w01 {width: 01%;}
.w02 {width: 02%;}
.w03 {width: 03%;}
.w04 {width: 04%;}
.w05 {width: 05%;}
.w06 {width: 06%;}
.w07 {width: 07%;}
.w08 {width: 08%;}
.w09 {width: 09%;}
.w10 {width: 10%;}
.w11 {width: 11%;}
.w12 {width: 12%;}
.w13 {width: 13%;}
.w14 {width: 14%;}
.w15 {width: 15%;}
.w16 {width: 16%;}
.w17 {width: 17%;}
.w18 {width: 18%;}
.w19 {width: 19%;}
.w20 {width: 20%;}
.w21 {width: 21%;}
.w22 {width: 22%;}
.w23 {width: 23%;}
.w24 {width: 24%;}
.w25 {width: 25%;}
.w26 {width: 26%;}
.w27 {width: 27%;}
.w28 {width: 28%;}
.w29 {width: 29%;}
.w30 {width: 30%;}
.w31 {width: 31%;}
.w32 {width: 32%;}
.w33 {width: 33%;}
.w34 {width: 34%;}
.w35 {width: 35%;}
.w36 {width: 36%;}
.w37 {width: 37%;}
.w38 {width: 38%;}
.w39 {width: 39%;}
.w40 {width: 40%;}
.w41 {width: 41%;}
.w42 {width: 42%;}
.w43 {width: 43%;}
.w44 {width: 44%;}
.w45 {width: 45%;}
.w46 {width: 46%;}
.w47 {width: 47%;}
.w48 {width: 48%;}
.w49 {width: 49%;}
.w50 {width: 50%;}
.w51 {width: 51%;}
.w52 {width: 52%;}
.w53 {width: 53%;}
.w54 {width: 54%;}
.w55 {width: 55%;}
.w56 {width: 56%;}
.w57 {width: 57%;}
.w58 {width: 58%;}
.w59 {width: 59%;}
.w60 {width: 60%;}
.w61 {width: 61%;}
.w62 {width: 62%;}
.w63 {width: 63%;}
.w64 {width: 64%;}
.w65 {width: 65%;}
.w66 {width: 66%;}
.w67 {width: 67%;}
.w68 {width: 68%;}
.w69 {width: 69%;}
.w70 {width: 70%;}
.w71 {width: 71%;}
.w72 {width: 72%;}
.w73 {width: 73%;}
.w74 {width: 74%;}
.w75 {width: 75%;}
.w76 {width: 76%;}
.w77 {width: 77%;}
.w78 {width: 78%;}
.w79 {width: 79%;}
.w80 {width: 80%;}
.w81 {width: 81%;}
.w82 {width: 82%;}
.w83 {width: 83%;}
.w84 {width: 84%;}
.w85 {width: 85%;}
.w86 {width: 86%;}
.w87 {width: 87%;}
.w88 {width: 88%;}
.w89 {width: 89%;}
.w90 {width: 90%;}
.w91 {width: 91%;}
.w92 {width: 92%;}
.w93 {width: 93%;}
.w94 {width: 94%;}
.w95 {width: 95%;}
.w96 {width: 96%;}
.w97 {width: 97%;}
.w98 {width: 98%;}
.w99 {width: 99%;}

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".

Citation

For attribution, please cite this work as

Hvitfeldt (2021, May 20). Xaringan Gallery: Adjustable Pull. Retrieved from https://xaringan.gallery/examples/adjustable-pull/

BibTeX citation

@misc{hvitfeldt2021adjustable,
  author = {Hvitfeldt, Emil},
  title = {Xaringan Gallery: Adjustable Pull},
  url = {https://xaringan.gallery/examples/adjustable-pull/},
  year = {2021}
}