A simple stylesheet for facilitating responsive layouts.
2022 Update: This uses a bootstrap-like approach to dividing widths/heights, whereas
nowadays you may get much better use out of a
"display: flex;"
based approach.
<link href="https://adil.hanney.org/repo/rvalues.css" rel="stylesheet">CSS: rvalues.css
SCSS: rvalues.scss
Try printing this page to see the difference...
.screenonly/.noprint
Elements with these classes will not show up when printing.
.printonly/.noscreen
Elements with these classes will only show up when printing.
<p class="printonly">This is .printonly</p><p class="screenonly">This is .screenonly</p><p class="noscreen">This is .noscreen</p><p class="noprint">This is .noprint</p>This is .printonly
This is .screenonly
This is .noscreen
By default, rvalues.css applies this rule to all elements:
* {}This means if you click a button like this one it will smoothly scroll to the specified element (the next section in this case).
If you don't like the transition rule, it has a low specificity so it can be easily overridden.
If we format our html normally, there will be small gaps between display: inline-block; elements due to whitespace (like linebreaks).
read more...
Problem:
<div class="R Ximin4 blue"> imin4 </div><div class="R Ximin4 red"> imin4 </div><div class="R Ximin4 purple"> imin4 </div><div class="R Ximin4 teal"> imin4 </div>There are three ways to go around this...
1. Removing space between elements: This can hurt readability.
<div class="R Ximin4 blue"> imin4
</div><div
class="R Ximin4 red"> imin4
</div><div
class="R Ximin4 purple"> imin4
</div><div
class="R Ximin4 teal"> imin4 </div>
2. Using comments: Make sure there's no space between the comments and elements.
<div class="R Ximin4 blue"> imin4 </div> <!----><div class="R Ximin4 red"> imin4 </div> <!----><div class="R Ximin4 purple"> imin4 </div> <!----><div class="R Ximin4 teal"> imin4 </div> 3. Using .Rparent: This might mess with font-sizes.
<div class="Rparent"></div>X is for width and Y is for height.
.Ximin2.Yimin2We will be focussing on X in this page but Y is exactly the same.
next.Ximin2items - there will be N items that can fit
this example would fit 2 items / 50% each
.Xpmin50percent - pretty self explanatory
.Xrmin6responsive - based off of the bootstrap columns
this example is 6/12 columns / 50% each
.Xaminauto - use this to undo specific widths, such as filling the screen on a phone but auto-sizing on a desktop
this does not use any arguments (4)
We can resize content based on how wide the user's screen/browser is.
Try viewing this on different devices, or resize your browser window...
Note: this has been disabled to better format the printed webpage.
.Ximin1min - this will be applied on all devices
.Ximin1 .Xismall2small - this will be applied on 'small' devices (768px wide and bigger)
.Ximin1.Xismall2 .Ximedium3medium - this will be applied on 'medium' devices (992px wide and bigger)
.Ximin1.Xismall2.Ximedium3 .Xilarge4large - this will be applied on 'large' devices (1500px wide and bigger)
Try using the sliders to change the argument.
Note: this has been disabled to better format the printed webpage.
.Ximin$0-12 items
.Ximin4
.Xpmin$0-100 percent
.Xpmin20
.Xrmin$An element with this class spans $ out of 12 columns. This mimics the columns used in Bootstrap.
.Xrmin3
.Ximin4.XasmallSetting the width to auto does not need any arguments