Skip to content

Commit

Permalink
Add basic examples using transpiled CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@sawyerh
sawyerh committed Mar 13, 2017
1 parent 8f91ac8 commit 9b4a73f
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 0 deletions.
95 changes: 95 additions & 0 deletions examples/article/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Design System</title>
<link rel="stylesheet" href="../../packages/core/dist/index.css" />
<link rel="stylesheet" href="style.css">
</head>
<body class="ds-base">
<article class="ds-u-measure--wide ds-u-margin-y--5 container">
<h1 class="ds-h1">How the U.S. Government Is&nbsp;Organized</h1>

<div class="ds-c-alert">
<div class="ds-c-alert__body">
<p class="ds-c-alert__text">This was originally published on <a href="https://www.usa.gov/branches-of-government">USA.gov</a></p>
</div>
</div>

<p class="ds-text--lead">The <a href="https://www.archives.gov/founding-docs/constitution">Constitution of the United States</a> divides the federal government into three branches to ensure a central government in which no individual or group gains too much control:</p>

<ul class="ds-c-list">
<li><strong>Legislative</strong> – Makes laws (Congress)</li>
<li><strong>Executive</strong> – Carries out laws (President, Vice President, Cabinet)</li>
<li><strong>Judicial</strong> – Evaluates laws (Supreme Court and other courts)</li>
</ul>

<p class="ds-text">Each branch of government can change acts of the other branches as follows:</p>

<ul class="ds-c-list">
<li>The President can veto laws passed by Congress.</li>
<li>Congress confirms or rejects the President's appointments and can remove the President from office in exceptional circumstances.</li>
<li>The Justices of the Supreme Court, who can overturn unconstitutional laws, are appointed by the President and confirmed by the Senate.</li>
</ul>

<p class="ds-text">The U.S. federal government seeks to act in the best interests of its citizens through this system of checks and balances.</p>

<h2 class="ds-h2">Legislative Branch</h2>

<p class="ds-text">The legislative Branch enacts legislation, confirms or rejects Presidential appointments, and has the authority to declare war.</p>

<p class="ds-text">This branch includes Congress (the Senate and House of Representatives) and several agencies that provide support services to Congress. American citizens have the right to vote for Senators and Representatives through free, confidential ballots.</p>

<ul class="ds-c-list">
<li><a href="http://www.senate.gov/">Senate</a> – There are two elected Senators per state, totaling 100 Senators. A Senate term is six years and there is no limit to the number of terms an individual can serve.</li>
<li><a href="http://www.house.gov/">House of Representatives </a>– There are 435 elected Representatives, which are divided among the 50 states in proportion to their total population. There are additional non-voting delegates who represent the District of Columbia and the territories. A Representative serves a two-year term, and there is no limit to the number of terms an individual can serve.</li></ul><h2 class="ds-h2">Executive Branch</h2><p class="ds-text">The <a href="https://bensguide.gpo.gov/a-executive">executive branch</a> carries out and enforces laws. It includes the President, Vice President, the Cabinet, executive departments, independent agencies, and other boards, commissions, and committees.</p>
<p class="ds-text">American citizens have the right to vote for the President and Vice President through free, confidential ballots.</p>
<p class="ds-text">Key roles of the executive branch include:</p>
<ul class="ds-c-list">
<li>President – The President leads the country. He/she is the head of state, leader of the federal government, and Commander in Chief of the United States Armed Forces. The President serves a four-year term and can be elected no more than two times.</li>
<li>Vice President – The Vice President supports the President. If the President is unable to serve, the Vice President becomes President. The Vice President can be elected and serve an unlimited number of four-year terms as Vice President, even under a different president.</li>
<li>The Cabinet – Cabinet members serve as advisors to the President. They include the Vice President and the heads of executive departments. Cabinet members are nominated by the President and must be approved by the Senate (with at least 51 votes).</li>
</ul>

<h2 class="ds-h2">Judicial Branch</h2>

<p class="ds-text">The <a href="https://www.whitehouse.gov/1600/judicial-branch">judicial branch</a> interprets the meaning of laws, applies laws to individual cases, and decides if laws violate the Constitution.</p>

<p class="ds-text">The judicial branch is comprised of the Supreme Court and other federal courts.</p>

<ul class="ds-c-list">
<li><a href="http://www.supremecourt.gov/">Supreme Court</a> – The Supreme Court is the highest court in the United States. The Justices of the Supreme Court are nominated by the President and must be approved by the Senate.
<ul class="ds-c-list">
<li>The court is comprised of <a href="https://www.supremecourt.gov/faq.aspx#faqgi6">nine members</a> — a Chief Justice and eight Associate Justices. Currently, there is one Associate Justice vacancy. A minimum or quorum of <a href="https://www.supremecourt.gov/faq.aspx#faqgi8">six justices</a> is required to decide a case.</li>
<li>If there is an even number of Justices and a case results in a tie, the lower court's decision stands.</li>
<li>There is no fixed term for Justices. They serve until their death, retirement, or removal in exceptional circumstances.</li>
</ul>
</li>
<li><a href="http://www.uscourts.gov/FederalCourts.aspx">Other federal courts</a> – The Constitution grants Congress the authority to establish other federal courts.
</li>
</ul>

<h3 class="ds-h3">Judge/Justice Confirmation Process</h3>

<p class="ds-text">Appointments for Supreme Court justices and other federal judgeships follow the same basic process:</p>

<ul class="ds-c-list">
<li>The President nominates a person to fill a vacant judgeship.</li>
<li>The <a href="https://www.judiciary.senate.gov/nominations">Senate Judiciary Committee</a> holds a hearing on the nominee and votes on whether to forward the nomination to the full Senate.</li>
<li>If the nomination moves forward, the Senate can debate the nomination. Debate must end before the Senate can vote on whether to confirm the nominee. A Senator will request unanimous consent to end the debate, but any Senator can refuse.</li>
<li>Without unanimous consent, the Senate must pass a <a href="https://www.senate.gov/reference/reference_index_subjects/Cloture_vrd.htm">cloture</a> motion to end the debate. For most federal judgeships, the cloture motion requires a simple majority—51 votes—to pass.</li>
<li>For Supreme Court nominees, cloture requires a three-fifths majority—60 votes—to pass.</li>
<li>If the cloture motion doesn’t pass, debate continues in what’s known as a <a href="https://www.senate.gov/reference/reference_index_subjects/Filibuster_vrd.htm">filibuster</a>. The filibuster can effectively <a href="https://ballotpedia.org/Filibuster">stall the process of voting on confirmation indefinitely</a>.</li>
<li>Once the debate ends and the Senate votes on confirmation, just 51 votes are needed to confirm the nominee for Supreme Court justice or any other federal judgeship.</li>
</ul>

<h3 class="ds-h3">Filibusters and the “Nuclear Option”</h3>

<p class="ds-text">Prior to November 2013, all federal judgeship nominations required 60 votes to reach cloture and end the debate on a nominee.</p>

<p class="ds-text">
<a href="https://ballotpedia.org/Federal_Vacancy_Warning_System:_113th_Congress#Notable_news">In 2013, the Senate lowered the number of votes required from 60 to 51</a> for federal judgeships excluding the Supreme Court, using the <a href="https://ballotpedia.org/Obama%27s_federal_nominees,_2013#.22Nuclear_option.22">"nuclear option."</a> This interpretation of Senate procedure gives Members the ability to change chamber rules with a simple majority vote.
</p>
</article>
</body>
</html>
4 changes: 4 additions & 0 deletions examples/article/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.container {
margin-left: auto;
margin-right: auto;
}
65 changes: 65 additions & 0 deletions examples/form/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Design System</title>
<link rel="stylesheet" href="../../packages/core/dist/index.css" />
<link rel="stylesheet" href="style.css">
</head>
<body class="ds-base">
<div class="ds-u-measure--narrow ds-u-margin-y--5 container">
<h1 class="ds-h1">Report an issue</h1>

<div class="ds-c-alert ds-c-alert--error">
<div class="ds-c-alert__body">
<h2 class="ds-c-alert__heading">1 error with your application</h2>
<p class="ds-c-alert__text">Please select which county you reside in.</p>
</div>
</div>

<form>
<label class="ds-c-label" for="input-firstname">First name</label>
<input class="ds-c-field" id="input-firstname" name="firstname" type="text" />

<label class="ds-c-label" for="input-lastname">Last name</label>
<input class="ds-c-field" id="input-lastname" name="lastname" type="text" />

<h3 class="ds-c-label">Which days can we call you?</h3>
<span class="ds-c-field__hint">Select all days that would work for you</span>
<fieldset class="ds-c-fieldset">
<legend class="ds-u-visibility--screen-reader">Which days can we call you?</legend>
<input class="ds-c-choice" id="input-monday" type="checkbox" name="day" value="monday">
<label for="input-monday">Monday</label>

<input class="ds-c-choice" id="input-tuesday" type="checkbox" name="day" value="tuesday">
<label for="input-tuesday">Tuesday</label>

<input class="ds-c-choice" id="input-wednesday" type="checkbox" name="day" value="wednesday">
<label for="input-wednesday">Wednesday</label>

<input class="ds-c-choice" id="input-thursday" type="checkbox" name="day" value="thursday">
<label for="input-thursday">Thursday</label>

<input class="ds-c-choice" id="input-friday" type="checkbox" name="day" value="friday">
<label for="input-friday">Friday</label>
</fieldset>

<label class="ds-c-label" for="input-description">Describe your issue</label>
<textarea class="ds-c-field" id="input-description" name="description" rows="6"></textarea>

<h3 class="ds-c-label">Have you contacted us about this issue before?</h3>
<fieldset class="ds-c-fieldset">
<legend class="ds-u-visibility--screen-reader">Have you contacted us about this issue before?</legend>
<input class="ds-c-choice" id="input-yes" type="radio" name="duplicate" value="yes">
<label class="ds-u-display--inline-block ds-u-margin-right--3" for="input-yes">Yes</label>

<input class="ds-c-choice" id="input-no" type="radio" name="duplicate" value="no">
<label class="ds-u-display--inline-block" for="input-no">No</label>
</fieldset>

<input class="ds-c-button ds-c-button--primary ds-u-margin-top--3" type="submit" value="Report issue" />
<a class="ds-c-button" href="#">Cancel</a>
</form>
</div>
</body>
</html>
4 changes: 4 additions & 0 deletions examples/form/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.container {
margin-left: auto;
margin-right: auto;
}

0 comments on commit 9b4a73f

Please sign in to comment.