library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-10-05 19:24:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: clean up IE css references

Browse Source
This commit is contained in:
redonkulus 2022-10-26 11:29:07 -07:00
parent 6084e902e7
commit e5b0a01b90
9 changed files with 4 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CONTRIBUTING.md
View File

@ -59,7 +59,6 @@ $ grunt watch
Pure is tested and works in: Pure is tested and works in:
- IE 10+
- Latest Stable: Edge, Firefox, Chrome, Safari - Latest Stable: Edge, Firefox, Chrome, Safari
- iOS 6+ - iOS 6+
- Android 4.x - Android 4.x

1
README.md
View File

@ -88,7 +88,6 @@ conventions of the files in the `build/` directory follow these rules:
Pure is tested and works in: Pure is tested and works in:
- IE 10+
- Latest Stable: Firefox, Chrome, Safari - Latest Stable: Firefox, Chrome, Safari
- iOS 12+ - iOS 12+
- Android 6+ - Android 6+

2
RELEASE.md
View File

@ -27,7 +27,6 @@ This assumes the following repo's are cloned and `npm` installed:
- [ ] **Review all src/.../tests/manual/ files in target environments, including:** - [ ] **Review all src/.../tests/manual/ files in target environments, including:**
- [ ] IE 11
- [ ] Edge - [ ] Edge
- [ ] Chrome - [ ] Chrome
- [ ] Firefox - [ ] Firefox
@ -38,7 +37,6 @@ This assumes the following repo's are cloned and `npm` installed:
- [ ] **Review pure-site in target environments with [Pure served locally](https://github.com/pure-css/pure-site/blob/master/README.md#running-with-pure-served-locally)** - [ ] **Review pure-site in target environments with [Pure served locally](https://github.com/pure-css/pure-site/blob/master/README.md#running-with-pure-served-locally)**
- [ ] IE 11
- [ ] Edge - [ ] Edge
- [ ] Chrome - [ ] Chrome
- [ ] Firefox - [ ] Firefox

1
package.json
View File

@ -58,7 +58,6 @@
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"browserslist": [ "browserslist": [
"last 2 versions", "last 2 versions",
"ie >= 10",
"iOS >= 12", "iOS >= 12",
"Android >= 6" "Android >= 6"
], ],

2
site/src/pages/base/index.js
View File

@ -56,7 +56,7 @@ function Base() {
<h3>Hiding Elements</h3> <h3>Hiding Elements</h3>
<p> <p>
Add the <code>hidden</code> attribute to an HTML element to hide it from the screen via <code>display: none !important;</code>. Alternatively, for compatibility with old IE, you may use the CSS classname <code>.hidden</code>. Add the <code>hidden</code> attribute to an HTML element to hide it from the screen via <code>display: none !important;</code>.
</p> </p>
<CodeBlock wrap={true}> <CodeBlock wrap={true}>

169
site/src/pages/start/index.js
View File

@ -193,175 +193,6 @@ function Start() {
<div className="pure-u-1 pure-u-md-1-4">.pure-u-1<br/>.pure-u-md-1-4</div> <div className="pure-u-1 pure-u-md-1-4">.pure-u-1<br/>.pure-u-md-1-4</div>
</div> </div>
</div> </div>
{/*
<div className="content">
<aside>
<p>
<a href="/grids/#pure-responsive-grids">Learn More</a> about how to include and use Pure's Responsive Grids system, and how it compares to Basic Grids.
</p>
</aside>
<h2 id="build-your-pure-starter-kit" className="content-subhead">Build Your Pure Starter Kit<a href="#build-your-pure-starter-kit" className="content-link" title="Heading anchor"></a></h2>
<p>
Now that you know how grids work, you might want to customize things to better suit your web project. You can define your own breakpoints by specifying a CSS Media Queries. You can also customize the number of columns that your layout needs.
</p>
<p>
We'll generate an <code>index.html</code> file, and if needed, a <code>grid.css</code> file that you can download and use as the starting-point for your project.
</p>
<div className="grid-input">
<ul className="grid-tabs pure-g">
<li className="grid-tab pure-u">
<a data-action="tab" className="grid-tab-link-selected grid-tab-link" href="#mqs">
Media Queries
</a>
</li>
<li className="grid-tab pure-u">
<a data-action="tab" className="grid-tab-link" href="#options">
Grid Options
</a>
</li>
</ul>
<div className="grid-content">
<form id="mqs" className="grid-panel-selected grid-panel pure-form-aligned pure-form">
<h3>Grids Media Queries</h3>
<p>
You can use Pure's default CSS Media Queries which will add <code>grids-responsive.css</code> to your Pure Starter Kit, or we can generate a mobile-first, responsive grid if you provide us with the breakpoints.
</p>
<p>
Pure's generated Responsive Grids is simple to use. It provides you with a specific CSS classname for each Media Query. For example, <code>pure-u-md-*</code> for devices with <code>width &gt;&#x3D; 768px</code>, and <code>pure-u-lg-*</code> for devices with <code>width &gt;&#x3D; 1024px</code>.
</p>
<p>
What Media Queries should your grid system respond to?
</p>
<table id="media-query-table" hidden>
<thead>
<tr className="pure-g">
<th className="pure-u-6-24">
Grid Key <br/>
<span className="media-query-table-example">
<code>.pure-u-[key]-*</code>
</span>
</th>
<th className="pure-u-15-24 pure-u-sm-16-24">
Media Query <br/>
<span className="media-query-table-example">
<code>screen and (min-width: 48em)</code>
</span>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div className="controls">
<button type="button" data-action="add-default-mq" className="pure-button pure-button-primary">
Use Default Media Queries
</button>
<button type="button" data-action="add-mq" className="pure-button">
Add Media Query
</button>
</div>
</form>
<form id="options" className="grid-panel pure-form-aligned pure-form">
<h3>Grid Options</h3>
<p>
Pure has a 5<sup>ths</sup> and 24<sup>ths</sup>-column grid system by default. You define an element's width using fractional classnames, e.g; <code>.pure-u-2-5</code> for <code>width: 40%</code>, or <code>.pure-u-12-24</code> for <code>width: 50%</code>. You can <a href="/grids/#grids-units-sizes">view all the grid units</a> that are available in the default grid.
</p>
<p>
You can customize the number of columns; the default grid is 24 columns. You can also change the Grids classname prefix; the default is <code>.pure-u-</code>.
</p>
<div>
<div className="cols-control pure-control-group">
<label htmlFor="cols-input">Number of Columns</label>
<input id="cols-input" data-content="cols-input"
type="number" min="2" max="100" placeholder="24" />
</div>
<div className="prefix-control pure-control-group">
<label htmlFor="prefix-input">Grid Prefix</label>
<input id="prefix-input" data-content='prefix-input'
type="text" maxLength="20" placeholder=".pure-u-"
defaultValue="" />
</div>
</div>
</form>
</div>
</div>
<div className="grid-download">
<p>
Your Pure Starter Kit will be generated below in real-time as you make your customizations. When you're ready, just download it!
</p>
</div>
<div className="grid-output-download">
<a download href="/start/download"
onClick="return Pure.trackDownload.call(this, 'start', 'default');"
className="download-link pure-button-primary pure-button">Download Your Starter Kit</a>
</div>
<p>
Here's what the downloaded zip file contains.
</p>
<div className="grid-output">
<div className="grid-output-tabs pure-g">
<div className="pure-u-1">
<ul className="grid-tabs pure-g">
<li className="grid-tab pure-u">
<a data-action="tab" className="grid-tab-link-selected grid-tab-link" href="#html">
index.html
</a>
</li>
<li className="grid-tab pure-u">
<a data-action="tab" className="grid-tab-link" href="#grid">
grid.css
</a>
</li>
<li className="grid-tab pure-u">
<a data-action="tab" className="grid-tab-link" href="#grid-old-ie">
grid-old-ie.css
</a>
</li>
</ul>
</div>
</div>
<div className="grid-content">
<div id="html" className="grid-panel-selected grid-panel">
<pre className="code" data-language="html"><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;
&lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;
&lt;title&gt;Your page title&lt;/title&gt;
&lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https://cdn.jsdelivr.net/npm/purecss@1.0.1/build/pure-min.css&quot;&gt;&lt;/head&gt;
&lt;body&gt;
&lt;!--
Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
--&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
<div id="grid" className="grid-panel">
<div id="css" className="grid-code">
<p>
You haven't specified any customization that require any additional CSS.
</p>
</div>
</div>
<div id="grid-old-ie" className="grid-panel">
<div id="css-old-ie" className="grid-code">
<p>
You haven't specified any customization that requires IE-specific CSS.
</p>
</div>
</div>
</div>
</div>
<aside>
<p>
After downloading your Starter Kit, we recommend checking out <a href="/layouts/">our awesome layouts</a>. They're freely available to download. Use them to get started quickly with your next web project. Happy coding!
</p>
</aside>
</div>
*/}
</Layout> </Layout>
); );
} }

3
site/src/pages/start/styles.css
View File

@ -76,8 +76,7 @@
overflow-y: scroll; overflow-y: scroll;
margin: 0; margin: 0;
} }
#css .code, #css .code {
#css-old-ie .code {
max-height: 35em; max-height: 35em;
} }

7
site/static/layouts/gallery/styles.css
View File

@ -46,12 +46,7 @@ h1,h2,h3,h4,h5,h6 {
width: 100%; width: 100%;
font-size: 80%; font-size: 80%;
text-align: right; text-align: right;
background: -moz-linear-gradient(top, rgba(16,27,30,0) 0%, rgba(12,2,2,1) 90%); /* FF3.6+ */ background: linear-gradient(to bottom, rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(16,27,30,0)), color-stop(90%,rgba(12,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* IE10+ */
background: linear-gradient(to bottom, rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */
} }

3
site/static/layouts/tucked-menu/index.html
View File

@ -206,8 +206,7 @@ document.getElementById('toggle').addEventListener('click', function (e) {
such as pure-menu-horizontal such as pure-menu-horizontal
and pure-menu-scrollable. At wide window-widths we display a horizontal menu. and pure-menu-scrollable. At wide window-widths we display a horizontal menu.
At smaller window-widths, At smaller window-widths,
we switch to a scrollable horizontal menu with a toggle control. Older IE we switch to a scrollable horizontal menu with a toggle control.
clients won't get all the bells and whistles, but it should still be usable.
Remember that the JavaScript provided is plain vanilla JS so it won't work in Remember that the JavaScript provided is plain vanilla JS so it won't work in
some browsers; you'll need to polyfill or adapt the code to your library of choice.</p> some browsers; you'll need to polyfill or adapt the code to your library of choice.</p>