mirror of
https://github.com/pure-css/pure.git
synced 2024-10-05 19:24:19 +00:00
chore: clean up IE css references
This commit is contained in:
redonkulus
parent
6084e902e7
commit
e5b0a01b90
@ -59,7 +59,6 @@ $ grunt watch
|
||||
|
||||
Pure is tested and works in:
|
||||
|
||||
- IE 10+
|
||||
- Latest Stable: Edge, Firefox, Chrome, Safari
|
||||
- iOS 6+
|
||||
- Android 4.x
|
||||
|
||||
@ -88,7 +88,6 @@ conventions of the files in the `build/` directory follow these rules:
|
||||
|
||||
Pure is tested and works in:
|
||||
|
||||
- IE 10+
|
||||
- Latest Stable: Firefox, Chrome, Safari
|
||||
- iOS 12+
|
||||
- Android 6+
|
||||
|
||||
@ -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:**
|
||||
|
||||
- [ ] IE 11
|
||||
- [ ] Edge
|
||||
- [ ] Chrome
|
||||
- [ ] 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)**
|
||||
|
||||
- [ ] IE 11
|
||||
- [ ] Edge
|
||||
- [ ] Chrome
|
||||
- [ ] Firefox
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
"license": "BSD-3-Clause",
|
||||
"browserslist": [
|
||||
"last 2 versions",
|
||||
"ie >= 10",
|
||||
"iOS >= 12",
|
||||
"Android >= 6"
|
||||
],
|
||||
|
||||
@ -56,7 +56,7 @@ function Base() {
|
||||
<h3>Hiding Elements</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<CodeBlock wrap={true}>
|
||||
|
||||
@ -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>
|
||||
</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 >= 768px</code>, and <code>pure-u-lg-*</code> for devices with <code>width >= 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><!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Your page title</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@1.0.1/build/pure-min.css"></head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
|
||||
-->
|
||||
</body>
|
||||
</html></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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -76,8 +76,7 @@
|
||||
overflow-y: scroll;
|
||||
margin: 0;
|
||||
}
|
||||
#css .code,
|
||||
#css-old-ie .code {
|
||||
#css .code {
|
||||
max-height: 35em;
|
||||
}
|
||||
|
||||
|
||||
@ -46,12 +46,7 @@ h1,h2,h3,h4,h5,h6 {
|
||||
width: 100%;
|
||||
font-size: 80%;
|
||||
text-align: right;
|
||||
background: -moz-linear-gradient(top, rgba(16,27,30,0) 0%, rgba(12,2,2,1) 90%); /* FF3.6+ */
|
||||
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 */
|
||||
background: linear-gradient(to bottom, rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */
|
||||
|
||||
}
|
||||
|
||||
@ -206,8 +206,7 @@ document.getElementById('toggle').addEventListener('click', function (e) {
|
||||
such as pure-menu-horizontal
|
||||
and pure-menu-scrollable. At wide window-widths we display a horizontal menu.
|
||||
At smaller window-widths,
|
||||
we switch to a scrollable horizontal menu with a toggle control. Older IE
|
||||
clients won't get all the bells and whistles, but it should still be usable.
|
||||
we switch to a scrollable horizontal menu with a toggle control.
|
||||
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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user