close-box Documentation

PWA Bunga! CSS

pwabunga.css is the base CSS file for PWA Bunga!

PWA Bunga content! CSS

The PWA Bunga! CSS includes:

  • file-document pwabunga.css

Summary of PWA documentation Bunga! CSS

Scrolling behavior

Ergonomic improvements

If the user has not modified their settings to minimize the amount of animation or motion, we define a smooth scrolling effect for the scrolling behavior of a box, when scrolling occurs due to navigation or CSSOM scrolling APIs.


@media (prefers-reduced-motion: no-preference) { 
	:root {
		scroll-behavior: smooth; 
	}
}

Universal inheritances

Best practices

We make the box-sizing property inheritable for all elements.


*,
::before,
::after {
	box-sizing: inherit;
}

Selection

Reset

We remove the text-shadow from the highlight of the selection.


::-moz-selection {
	text-shadow: none; 
}

::selection {
	text-shadow: none;
}

The root element

Best practices

We modify the box model sizing for the html element.


html {
	box-sizing: border-box;
}

The relative unit of value refers to the size of the parent element. The default browser font size is 16 pixels. For a ratio of 1em/10px, we divide the size by the default size: 10/16 x 100 = 62.5%.


html {
	font-size: 62.5%;
}

Ergonomic improvements

We improve the consistency of default fonts across all browsers.


html {
	font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

We force the browser scrollbar to always be visible to avoid jarring jumps between pages that have/not enough content.


html {
	overflow-y: scroll;
}

We display the scroll bar with auto-hiding during mouse interactions and touch and keyboard interactions.


html {
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

We make fonts on OSX more consistent with other systems that do not use sub-pixel antialiasing.


html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

We remove the highlight effect on the 'tapped' action.


html {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

We prevent text size adjustment on iOS when changing orientation.


html {
	-webkit-text-size-adjust: 100%;
}

We define a more readable tab size.


html {
	tab-size: 4;
	-moz-tab-size: 4;
}

Sections

Reset

We remove margins for section elements


body, section, nav, article, aside,
h1, h2, h3, h4, h5, h6, header, footer, address {
	margin: 0;
	padding: 0;
}

Grouping content

Ergonomic improvements

We prevent some content from overflowing their container.


blockquote,
pre {
	max-width: 100%;
}

We improve the consistency of default fonts across all browsers.


pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; 
}

Reset

We remove the default bullets from lists.


ol, ul {
	list-style: none;
}

We remove the margins for grouping content elements.


p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, div {
	margin: 0;
	padding: 0;
}

Text-level semantics

Normalization

We set the appropriate text-decoration value on abbr[title] for Chrome, Edge, and Safari.


abbr[title] {
	text-decoration: underline dotted;
}

We set the correct font-weight value for b and strong elements in Chrome, Edge, and Safari.


b,
strong {
	font-weight: bolder;
}

We set the correct font-size value for small on Chrome, Edge, and Safari.


small {
	font-size: 80%;
}

We prevent the sub and sup elements from changing the line height of the text on all browsers.


sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

Ergonomic improvements

We remove the delay on the "tapped" action for clickable elements and remove the gaps on link underlines.


a {
	touch-action: manipulation;
	-webkit-text-decoration-skip: objects;
}

We set the help cursor on elements that provide additional information on :hover.


abbr[title],
dfn[title] {
	cursor: help;
}

To prevent text from overflowing its block, we indicate that spaces should be preserved as they are and we prevent certain content from exceeding its container.


code {
	white-space: pre-wrap; /* 1 */
	max-width: 100%; /* 2 */
}

We improve the consistency of default fonts across all browsers.


code,
kbd,
samp {
	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; 
}

Reset

We remove the text-decoration and outline from links.


a {
	outline: 0;
	text-decoration: none;
}

Embedded content

Normalization

We change the fill color of svg elements to match the text color on browsers.


svg {
	fill: currentColor;
}

Ergonomic improvements

We remove the delay on the "tapped" action on clickable elements


area {
	touch-action: manipulation;
}

We remove the gap between audio, canevas, iframes, images, videos elements and the bottom of their containers.


audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

We preserve the aspect ratio (width/height ratio) of images.


img {
	height: auto;
}

We remove the highlight on the image when selecting and dragging with the mouse.


img::-moz-selection {
	background-color: transparent;
}

img::selection {
	background-color: transparent;
}

To prevent some contents from overflowing their container.


img,
svg,
video {
	max-width: 100%;
}

Reset

We remove margins for certain embedded content elements.


iframe, embed, object, param, video {
	margin: 0;
	padding: 0;
}

Tabular data

Normalization

Remove indentation for table on Chrome and Safari and fix border color inheritance on Chrome and Safari.


table {
	text-indent: 0;    
	border-color: inherit;
}

Ergonomic improvements

We prevent certain content from overflowing their container.


table,
td {
	max-width: 100%;
}

Reset

We remove the margins for certain elements of tabular data.


table, caption, tr, td, th {
	margin: 0;
	padding: 0;
}

Forms

Normalization

We fix the inability to style clickable elements in iOS and Safari.


button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

We fix the appearance in Chrome and Safari and the outline on Safari.


[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

We add the correct vertical alignment for Chrome and Firefox.


progress {
	vertical-align: baseline;
}

We fix the inability to style clickable elements in iOS and Safari, and change the font properties to inherit for Safari.


::-webkit-file-upload-button {
	-webkit-appearance: button; 
	font: inherit;
}

We add the correct vertical alignment for Chrome and Firefox.


::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

Ergonomic improvements

We remove the delay of the "tapped" action on clickable elements.


button,
input,
label,
select,
textarea {
	touch-action: manipulation;
}

We add the pointer cursor style to clickable elements in forms.


[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled),
label[for],
select {
	cursor: pointer;
}

We prevent certain content from overflowing their container.


input,
textarea {
	max-width: 100%;
}

We only allow vertical resizing of textarea.


textarea {
	resize: vertical;
}

Reset

Remove text-transform inheritance for Edge and Firefox.


button,
select {
	text-transform: none;
}

We reset the typo on certain elements for all browsers.


button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}

We remove the padding for Safari in macOS.


[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

We remove the margins for some elements of forms.


form, button, input, label, select, textarea {
	margin: 0;
	padding: 0;
}

We remove the interior border and the interior margin on Firefox.


::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

Remove extra styles from :invalid on Firefox.


:-moz-ui-invalid {
	box-shadow: none;
}

Interactive

Normalization

We put the correct display for the summary element on Firefox.


summary {
	display: list-item;
}

Contribute

To contribute, you can use the issue trackers from the PWA Bunga! CSS module repository.

Changes made to these 3 repositories will then be applied to the main project repository.

The issue tracker is the preferred channel to report bugs, feature requests, and submit pull requests, but please respect the following guidelines: