How do I implement responsive typography with Bootstrap 4? - responsive-design

I'm building a responsive web app with Bootstrap 4. I want the font size of all text to be reduced on mobile devices compared to desktop, so I added the following to my base css file as per the Bootstrap documentation (https://getbootstrap.com/docs/4.0/content/typography/):
html {
font-size: 1rem;
}
#include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
#include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
#include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
However the font size remains fixed. What am I doing wrong?

This is a Sass feature.
To have access to the media-breakpoint mixins and the size variables, you need to:
add a custom.scss file
#import "node_modules/bootstrap/scss/bootstrap";
and setup a Sass compiler
https://getbootstrap.com/docs/4.0/getting-started/theming/

Related

How to customize container width in Semantic UI

For example, tablet container size is determined by:
/* In container.variables */
#tabletWidth : #tabletBreakpoint - (#tabletMinimumGutter * 2) - #scrollbarWidth;
which is mentioned in Semantic Container document.
But I don't want my size of tablet container be so, I want it smaller, so to customize the container size, which file should I modify and how to modify ?
The line in question is (at time of writing) inside container.variables. I would urge you, however, to modify (increase) #tabletMinimumGutter instead of changing the width directly.
That said, this will require you to rebuild Semantic UI, which I believe may not the worth it if the only thing you want to change is the width on a tablet. I would instead just add some additional CSS to your page, like this, which will override the width set by Semantic UI (in this example, the container width I want is 723px, but you can use anything):
<link rel="stylesheet" type="text/css" href="semantic.css">
<style>
/* You probably want this in a separate CSS file */
#media only screen and (min-width: 768px) and (max-width: 991px) {
.ui.container {
width: 723px;
}
.ui.grid.container {
width: calc( 723px + 2rem ) !important;
}
.ui.relaxed.grid.container {
width: calc( 723px + 3rem ) !important;
}
.ui.very.relaxed.grid.container {
width: calc( 723px + 5rem ) !important;
}
}
</style>

Running header with nested generated content

This is a question about Paged Media.
I want to mix a string-set with running elements. It works in PrinceXML but not in PDFReactor. My question, is this possible in PDFReactor?
HTML
<p class="head">
<span class="first">Repeatable title</span>
<span class="divider">|</span>
<span class="last"></span>
</p>
CSS
p.head {
position: running(heading);
font-size: 8pt;
margin: 0;
padding: 0;
}
#page {
size: A4;
#top-left {
content: element(heading);
}
}
So far everything is peachy. But when I try to define a string-set from a H1 and try to write this into span.last this isn't working.
h1 {
string-set: doctitle content();
}
p.head span.last {
content: string(doctitle);
}
This is possible with PDFreactor as well. Just the syntax is a bit different. PDFreactor does not support the content() function for the string-set property with Named Strings. Instead it uses the self value which works like content() or content(text) (see http://www.pdfreactor.com/product/doc_html/index.html#NamedStrings )
There is a second issue. You are setting the content property on the span element itself. Usually in CSS, creating generated content with the content property is actually only allowed for page margin boxes and pseudo elements such as ::before and ::after. This is also how browsers support it. Not sure why this works in Prince.
So basically you just have to make 2 minor adjustments to your style sheet to make this work in PDFreactor:
h1 {
string-set: doctitle self;
}
p.head span.last::before {
content: string(doctitle);
}

Stylus/SpriteSmith - Serve 2x (Retina) images using same sprite file?

I'm using Stylus + Rupture + SpriteSmith + Gulp.JS and I wanna know if its possible to serve 2x version of an image using same sprite.png file ?
Found the solution.
We actually can serve a 2x version of our image from the same sprite file.
The main idea is that inside the media query, we have to divide all the numbers by 2 and add the background-size property.
If you are using plain CSS or Stylus, you might use something like:
#logo {
background-image: url("sprite.png");
background-position: -230px -93px;
height: 60px;
width: 45px;
}
#media not all, only screen and (min-resolution: 1.5dppx), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
#logo {
background-position: -70px 0;
background-size: 150px 93.5px;
height: 60px;
width: 45px;
}
}
Note : The real position, size and dimensions of our sprite is different, But we are actually scaling down the sprite image and changing positions accordingly.
If you are using Stylus + SpriteSmith, you could write a Sprite_2x function like this :
spriteWidth_2x($sprite) {
width: ($sprite[4]/2);
}
spriteHeight_2x($sprite) {
height: ($sprite[5]/2);
}
spritePosition_2x($sprite) {
background-position: ($sprite[2]/2) ($sprite[3]/2);
}
spriteImage_2x($sprite) {
background-image: url($sprite[8]);
}
sprite_2x($sprite) {
spriteImage_2x($sprite)
spritePosition_2x($sprite)
spriteWidth_2x($sprite)
spriteHeight_2x($sprite)
background-size ($spritesheet_width / 2) ($spritesheet_height / 2)
}
By the way, I don't understand why many articles out there suggest to use a separate sprite file for 2x images. I believe this way we could reduce 1 extra request which is way more efficient. I don't know maybe I am wrong. I'm new to this.

Stylus not parsing some directives

Using the Stylus / Jeet's column() or col() mixins, some are not compiling, but showing up literally in my generated css files. This should not be happening.
Test.styl
#import 'jeet'
#main
center(1000px)
#content
col(2/3)
#sidebar
col(1/3)
Generated test.css snippet
#content,
col(2/3), //<- This shouldn't be here
#sidebar {
...
}
#content:before,
col(2/3):before, //<- or this
#sidebar:before,
#content:after,
col(2/3):after, //<- this too
#sidebar:after {
content: '';
display: table;
}
Repeat after me: Don't mix tabs and spaces for indenting.
Looking at non-printable chars in my .styl file led me to the problem:
#main
{\t}center(1000px)
#content
{\b\b\b\b}col(2/3)
#sidebar
{\t}col(1/3)
Stylus was correctly parsing the majority case (tabs) and not parsing the edge case (spaces).

Custom inputs with simple_form and Foundation 5

I have created a custom input in simple_form and I'm using Foundation 5.
class CurrencyInput < SimpleForm::Inputs::Base
def input
input_html_classes.unshift("string currency")
input_html_options[:type] ||= input_type if html5?
"$ #{#builder.text_field(attribute_name, input_html_options)}".html_safe
end
end
The input field created has the default browser style. How do I apply the Foundation text field styles to this currency field so that it looks like all my other text fields. I have tried using the class names used by Foundation for the other fields but it deosn't have any effect. I haven't been able to find any documentation on how to do this. How can I do this?Any help is appreciated.
Have a look at /bower_components/foundation/scss/foundation/components/_forms.scss in your Foundation installation.
Starting from line 407 (of the most latest Foundation) you should see:
/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
-webkit-appearance: none;
-webkit-border-radius: 0px;
#include form-element;
#if $input-include-glowing-effect == false {
#include single-transition(all, 0.15s, linear);
}
&.radius {
#include radius($input-border-radius);
}
}
There follows a number of styles that you can copy into your app.scss file to incorporate your <input type="currency"> into your final CSS. For example:
input[type="currency"] {
-webkit-appearance: none;
-webkit-border-radius: 0px;
#include form-element;
#if $input-include-glowing-effect == false {
#include single-transition(all, 0.15s, linear);
}
&.radius {
#include radius($input-border-radius);
}
}
You could simply add your type into those styles there, but I don't think it's a good idea to change this in foundation's own files as it would probably be removed by future updates to your local foundation.

Resources