Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update primercss.io website #1

Merged
merged 7 commits into from
Sep 15, 2017
Merged

Update primercss.io website #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
073c158
add new 1 pager and archived old website
broccolini Sep 5, 2017
7daa40c
point to exact build versions of primer
broccolini Sep 15, 2017
4081bb7
add updated icons and remove old folder
broccolini Sep 15, 2017
738afc1
add og metadata and update descriptions
broccolini Sep 15, 2017
45cba41
add og meta image
broccolini Sep 15, 2017
96a7fa6
update teams link to people so viewable by public
broccolini Sep 15, 2017
ab4c31e
remove comment
broccolini Sep 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CNAME
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
primercss.io
Binary file added apple-touch-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
84 changes: 84 additions & 0 deletions archive/about/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<title>
About &middot; Primer
</title>

<link rel="stylesheet" href="/docs.css">

<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="/img/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico">
</head>
<body>

<header class="masthead">
<div class="container">
<a href="/" class="masthead-logo">
<span class="mega-octicon octicon-package"></span>
Primer
</a>

<nav class="masthead-nav">
<a href="/scaffolding">Docs</a>
<a class="active" href="/about">About</a>
<a href="https://github.com/primer/primer" target="_blank">GitHub</a>
<a href="https://github.com/primer/primer/blob/master/README.md#install" target="_blank">Install</a>
</nav>
</div>
</header>



<div class="container">
<div class="columns docs-layout">
<div class="three-fourths column markdown-body">
<h1 class="page-title">
About
</h1>
<div class="markdown-body">
<p>Learn more about this styleguide, particularly how it’s built and who maintains it.</p>

<h3 id="what-and-why">What and why</h3>

<p>Primer is GitHub’s internal CSS framework. It includes basic global styling for utilities, objects, components, and our general guidelines for writing HTML and CSS. It’s been used internally at GitHub for years now.</p>

<h3 id="future-updates">Future Updates</h3>

<p>Primer is currently being overhauled. The upcoming version of Primer will add new styles and bring the existing styles up to date, improve the build process, and include new and improved documentation. New styles will be open-sourced in the <a href="https://github.com/primer/primer-css">Primer repo</a> and <a href="https://www.npmjs.com/package/primer-css">on npm</a> as we add them, and the new documentation site will be shared when it's complete, currently slated to happen in mid-to-late 2017.</p>

<h3 id="who">Who</h3>

<p>Maintained by the GitHub Design Systems team.</p>

</div>
</div>
</div>


<footer class="footer">
Copyright GitHub 2016.<br>
Created and maintained by the CSS team at GitHub. <strong>Currently v4.0.1.</strong>
</footer>
</div>

<script src="/js/anchor.min.js"></script>
<script>
var selector = '.markdown-body > h2, .markdown-body > h3';
anchors.options = {
placement: 'left',
class: 'anchor-link'
};
anchors.add(selector);
</script>
</body>
</html>
217 changes: 217 additions & 0 deletions archive/alerts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<title>
Alerts &middot; Primer
</title>

<link rel="stylesheet" href="/docs.css">

<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="/img/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico">
</head>
<body>

<header class="masthead">
<div class="container">
<a href="/" class="masthead-logo">
<span class="mega-octicon octicon-package"></span>
Primer
</a>

<nav class="masthead-nav">
<a class="active" href="/scaffolding">Docs</a>
<a href="/about">About</a>
<a href="https://github.com/primer/primer" target="_blank">GitHub</a>
<a href="https://github.com/primer/primer/blob/master/README.md#install" target="_blank">Install</a>
</nav>
</div>
</header>



<div class="container">
<div class="columns docs-layout">
<div class="one-fourth column">

<nav class="menu docs-menu">
<a class="menu-item " href="/scaffolding/">
Scaffolding
</a>
<a class="menu-item " href="/layout/">
Layout
</a>
<a class="menu-item " href="/type/">
Type
</a>
<a class="menu-item " href="/buttons/">
Buttons
</a>
<a class="menu-item " href="/forms/">
Forms
</a>
<a class="menu-item " href="/nav/">
Navigation
</a>
<a class="menu-item selected" href="/alerts/">
Alerts
</a>
<a class="menu-item " href="/blankslate/">
Blankslate
</a>
<a class="menu-item " href="/avatars/">
Avatars
</a>
<a class="menu-item " href="/states/">
States
</a>
<a class="menu-item " href="/tooltips/">
Tooltips
</a>
<a class="menu-item " href="/utilities/">
Utilities
</a>
</nav>

<nav class="menu docs-menu">
<a class="menu-item " href="/guidelines/">
Code guidelines
</a>
<a class="menu-item " href="/colors/">
Colors
</a>
<a class="menu-item " href="/markdown/">
Markdown
</a>
</nav>


</div>
<div class="three-fourths column markdown-body">
<h1 class="page-title">
Alerts
</h1>
<div class="markdown-body">
<p>Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.</p>

<h2 id="contents">Contents</h2>

<ul id="markdown-toc">
<li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
<li><a href="#default" id="markdown-toc-default">Default</a></li>
<li><a href="#variations" id="markdown-toc-variations">Variations</a></li>
<li><a href="#with-icon" id="markdown-toc-with-icon">With icon</a></li>
<li><a href="#dismiss" id="markdown-toc-dismiss">Dismiss</a></li>
</ul>

<h2 id="default">Default</h2>

<p>Flash messages start off looking decently neutral—they’re just light blue rounded rectangles.</p>

<div class="docs-example clearfix"><div class="flash">
Flash message goes here.
</div></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash"</span><span class="nt">&gt;</span>
Flash message goes here.
<span class="nt">&lt;/div&gt;</span></code></pre></div>

<p>You can put multiple paragraphs of text in a flash message—the last paragraph’s bottom <code class="highlighter-rouge">margin</code> will be automatically override.</p>

<div class="docs-example clearfix"><div class="flash">
<p>This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.</p>
<p>And this is another paragraph.</p>
</div></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text, it'll eventually wrap to a new line.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>And this is another paragraph.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

<p>Should the need arise, you can quickly space out your flash message from surrounding content with a <code class="highlighter-rouge">.flash-messages</code> wrapper. <em>Note the extra top and bottom margin in the example below.</em></p>

<div class="docs-example clearfix"><div class="flash-messages">
<div class="flash">
Flash message goes here.
</div>
</div></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash-messages"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash"</span><span class="nt">&gt;</span>
Flash message goes here.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

<h2 id="variations">Variations</h2>

<p>Add <code class="highlighter-rouge">.flash-warn</code> or <code class="highlighter-rouge">.flash-error</code> to the flash message to make it yellow or red, respectively.</p>

<div class="docs-example clearfix"><div class="flash flash-warn">
Flash message goes here.
</div></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash flash-warn"</span><span class="nt">&gt;</span>
Flash message goes here.
<span class="nt">&lt;/div&gt;</span></code></pre></div>

<div class="docs-example clearfix"><div class="flash flash-error">
Flash message goes here.
</div></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash flash-error"</span><span class="nt">&gt;</span>
Flash message goes here.
<span class="nt">&lt;/div&gt;</span></code></pre></div>

<h2 id="with-icon">With icon</h2>

<p>Add an icon to the left of the flash message to give it some funky fresh attention. Just add <code class="highlighter-rouge">.flash-with-icon</code> and your Octicon.</p>

<div class="docs-example clearfix"><div class="flash flash-with-icon">
<span class="octicon octicon-alert"></span>
Flash message with an icon goes here.
</div></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash flash-with-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"octicon octicon-alert"</span><span class="nt">&gt;&lt;/span&gt;</span>
Flash message with an icon goes here.
<span class="nt">&lt;/div&gt;</span></code></pre></div>

<h2 id="dismiss">Dismiss</h2>

<p>Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.</p>

<div class="docs-example clearfix"><div class="flash">
<span class="octicon octicon-x flash-close js-flash-close"></span>
Dismissable flash message goes here.
</div></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flash"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"octicon octicon-x flash-close js-flash-close"</span><span class="nt">&gt;&lt;/span&gt;</span>
Dismissable flash message goes here.
<span class="nt">&lt;/div&gt;</span></code></pre></div>


</div>
</div>
</div>


<footer class="footer">
Copyright GitHub 2016.<br>
Created and maintained by the CSS team at GitHub. <strong>Currently v4.0.1.</strong>
</footer>
</div>

<script src="/js/anchor.min.js"></script>
<script>
var selector = '.markdown-body > h2, .markdown-body > h3';
anchors.options = {
placement: 'left',
class: 'anchor-link'
};
anchors.add(selector);
</script>
</body>
</html>
Loading