thallada/default-stylesheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Tyler Hallada
2018-02-18 18:36:16 -05:00
commit 8edd9f7ac0
16 changed files with 11563 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
example/example.scss Normal file
View File

@@ -0,0 +1,46 @@
/* Note: Because postcss-prepend-selector is used in this project, all selectors defined in any CSS/SCSS file will have
* "#embedded.embedded " prepended to them so that all styles here will be scoped to *only* the root div. */
/* reset all element properties to initial values as defined in CSS spec (*not* browser defaults) */
* {
all: initial;
/* allow all elements to inherit these properties from the root "body" div */
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
text-align: left;
background-color: inherit;
cursor: inherit;
}
/* apply Firefox's default stylesheet so that Bootstrap has some browser-like styling to work with */
// @import '../default.css';
@import '../firefox.css';
/* apply the Bootstrap reboot (normalize.css) to convert Firefox default styling to some cross-browser baseline
* then, apply the Bootstrap component styling */
// @import '~bootstrap/scss/bootstrap';
/* Since elements inside the embedded div can no longer inherit styles set on the <body>, we will apply the styles
* that the Bootstrap reboot applies to the <body> on the wrapper div instead, which containing elements can inherit.
*
* <div id="embedded" class="embedded">
* <div class="embedded-wrapper">
* <!-- ... embedded component here ... -->
* </div>
* </div>
*/
.embedded-wrapper {
font-family: sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 16px;
color: black;
text-align: left;
background-color: rgb(255, 255, 255);
border: 2px solid red;
margin: 10px;
padding: 10px;
}

66
example/index.html Normal file
View File

@@ -0,0 +1,66 @@
<html>
<head>
<style>
body {
background-color: cornsilk;
}
p, input, label, select, ul, ol, code, pre, blockquote, button {
background-color: pink;
color: black;
font-family: monospace;
margin: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="../dist/example.min.css">
</head>
<body>
<div>
<p>These are elements affected by the global styling on this page.</p>
<label><input type="checkbox"> A checkbox</label><br>
<input type="button" value="A button"><br>
<input type="textarea" value="Example text"><br>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<ul>
<li>One</li>
<li>Two</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
</ol>
<code>function () { console.log('Hello, world!'); }</code><br>
<pre>preformatted</pre><br>
<blockquote>"This is a blockquote!"</blockquote>
<button>Button!</button>
</div>
<div id="embedded" class="embedded">
<div class="embedded-wrapper">
<p>This is an embedded component isolated from the surrounding CSS cascade.</p>
<label><input type="checkbox"> A checkbox</label><br>
<input type="button" value="A button"><br>
<input type="textarea" value="Example text"><br>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<ul>
<li>One</li>
<li>Two</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
</ol>
<code>function () { console.log('Hello, world!'); }</code><br>
<pre>preformatted</pre><br>
<blockquote>"This is a blockquote!"</blockquote>
<button>Button!</button>
</div>
</div>
</body>
</html>