Browse Source
Adds semantic standard explanation page, adds first spec page for button. Continues to modify button class for new ui buttons
pull/13/head
Adds semantic standard explanation page, adds first spec page for button. Continues to modify button class for new ui buttons
pull/13/head
Jack Lukic
11 years ago
9 changed files with 935 additions and 128 deletions
Split View
Diff Options
-
185examples/button.html
-
119examples/example.css
-
151examples/index.html
-
90examples/module.html
-
59examples/reset.css
-
57examples/ui/button.css
-
209examples/ui/table.css
-
119examples/why.html
-
74src/shape.js
@ -0,0 +1,185 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|||
<title>Semantic Modules</title> |
|||
|
|||
<link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /> |
|||
|
|||
<script src="../dependencies/jquery.js" type="text/javascript"></script> |
|||
<script src="ui/state.js" type="text/javascript"></script> |
|||
|
|||
<script src="../dependencies/transform2d.js" type="text/javascript"></script> |
|||
<script src="../dependencies/transform3d.js" type="text/javascript"></script> |
|||
<script src="../src/shape.js" type="text/javascript"></script> |
|||
|
|||
<script src="example.js" type="text/javascript"></script> |
|||
|
|||
</head> |
|||
|
|||
<body id="example"> |
|||
<div class="container"> |
|||
|
|||
<h1>Semantic UI Spec</h1> |
|||
|
|||
<p>Semantic is a set of standards designed to make front end development less arbitrary. This is the definition of a button.</p> |
|||
|
|||
<h2>Button</h2> |
|||
|
|||
<h4>The standard button:</h4> |
|||
<div class="ui button">Button</div> |
|||
|
|||
<h2>States</h2> |
|||
|
|||
<h4>Can be hovered:</h4> |
|||
<div class="ui hover button">Hovered Button</div> |
|||
<h4>Can be pressed in:</h4> |
|||
|
|||
<div class="ui down button">Pressed Button</div> |
|||
|
|||
<h4>Can be active:</p> |
|||
<div class="ui active button">Active Button</div> |
|||
|
|||
<h4>Can be disabled:</h4> |
|||
<div class="ui disabled button">Disabled Button</div> |
|||
|
|||
<h4>Can show a loading indicator:</h4> |
|||
<div class="ui loading button">Loading Button</div> |
|||
|
|||
<h4>Can show a toggled state:</h4> |
|||
<div class="ui toggle button">Toggled Button</div> |
|||
|
|||
<h4>Can alert to a succesful action:</h4> |
|||
<div class="ui success button">Succesful Button</div> |
|||
|
|||
<h4>Can alert user of an error:</h4> |
|||
<div class="ui error button">Succesful Button</div> |
|||
|
|||
<h2>Standard Variations</h2> |
|||
|
|||
<h4>Can have different sizes:</h4> |
|||
<div class="mini ui button"> |
|||
Mini |
|||
</div> |
|||
<div class="tiny ui button"> |
|||
Tiny |
|||
</div> |
|||
<div class="small ui button"> |
|||
Small |
|||
</div> |
|||
<div class="medium ui button"> |
|||
Medium |
|||
</div> |
|||
<div class="big ui button"> |
|||
Big |
|||
</div> |
|||
<div class="huge ui button"> |
|||
Huge |
|||
</div> |
|||
<div class="massive ui button"> |
|||
<i class="icon pin"></i> |
|||
Massive |
|||
</div> |
|||
<div class="gigantic ui button"> |
|||
<i class="icon pin"></i> |
|||
Gigantic |
|||
</div> |
|||
|
|||
|
|||
<h4>Can have different colors:</h4> |
|||
<div class="ui blue button">Blue Button</div> |
|||
<div class="purple ui button">Purple Button</div> |
|||
<div class="green ui button">Green Button</div> |
|||
|
|||
<h4>Can fit parent container:</h4> |
|||
<div class="fluid ui button">Fits container</div> |
|||
|
|||
<h2>Buttons (Button Groups)</h2> |
|||
|
|||
<h4>Can exist together as groups</h4> |
|||
<div class="ui buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
|
|||
<h4>Variations can modify groups</h4> |
|||
<p><b>Blue</b></p> |
|||
<div class="blue ui buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
<br><br> |
|||
<p><b>Large</b></p> |
|||
<div class="huge ui buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
|
|||
|
|||
<h2>Additional Variations</h2> |
|||
|
|||
<h4>Can be formatted to fit just an icon or image:</h4> |
|||
<div class="mini icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
<div class="tiny icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
<div class="small icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
<div class="medium icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
<div class="big icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
<div class="huge icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
<div class="massive icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
<div class="gigantic icon ui button"> |
|||
<i class="icon pin"></i> |
|||
</div> |
|||
|
|||
<h4>Can be attached to the top or bottom of other content</h4> |
|||
<div class="ui top attached button">Top</div> |
|||
<div style="border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;height:200px;"></div> |
|||
<div class="ui bottom attached button">Bottom</div> |
|||
|
|||
<h4>Can be attached to an input field</h4> |
|||
<input type="text"> |
|||
<div class="ui attached button">Search</div> |
|||
|
|||
<h2>States</h2> |
|||
<div class="state segment"> |
|||
<h4>Button States</h4> |
|||
<div class="ui button">Normal</div> |
|||
<div class="ui button hover">Hover</div> |
|||
<div class="ui button down">Down</div> |
|||
<div class="ui button loading">Loading</div> |
|||
|
|||
<br><br> |
|||
<div class="ui button disabled">Disabled</div> |
|||
<div class="ui button active">Active</div> |
|||
<div class="ui button active toggle">Toggled</div> |
|||
<div class="ui button error">Error</div> |
|||
<div class="ui button success">Success</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,90 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|||
<title>Semantic Modules</title> |
|||
|
|||
<link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /> |
|||
|
|||
<script src="../dependencies/jquery.js" type="text/javascript"></script> |
|||
<script src="ui/state.js" type="text/javascript"></script> |
|||
|
|||
<script src="../dependencies/transform2d.js" type="text/javascript"></script> |
|||
<script src="../dependencies/transform3d.js" type="text/javascript"></script> |
|||
<script src="../src/shape.js" type="text/javascript"></script> |
|||
|
|||
<script src="example.js" type="text/javascript"></script> |
|||
|
|||
</head> |
|||
|
|||
<body id="example"> |
|||
<div class="container"> |
|||
|
|||
<h1>Semantic</h1> |
|||
|
|||
<p>Semantic is a set of standards designed to make front end development less arbitrary.</p> |
|||
<h2>What is Semantic?</h2> |
|||
|
|||
<p>Semantic has two parts. <b>The semantic standard, and the semantic library.</b></p> |
|||
|
|||
<h2>The standard</h2> |
|||
<p>The semantic standard attempts to create a standard design pattern for describing static UI components (UI elements), and dynamic UI components (modules).</p> |
|||
|
|||
<p>Static components are things like: menus, columns, grids, tables, buttons, forms. Dynamic components are things like: popups, modals, chat rooms.</p> |
|||
|
|||
<h3>Defining UI</h3> |
|||
<p>The DNA of the web is UI. Semantic's goal is to create an exchange format for UI, by architecting a consistent HTML structure and classname usage for defining UI elements.</p> |
|||
<p>If as a community we can agree on consistent UI definitions to, for example, describe what a button is, then we can freely share variations of element designs without having to modify our site's structure to match the expectations of the library.</p> |
|||
|
|||
<h4>What's in an element</h4> |
|||
<p><b>UI elements definitions are made of 4 parts</b>: |
|||
<ol> |
|||
<li>A prototype format of an element (A bunny has two long ears and is furry)</li> |
|||
<li>A list of states which the element can exist. (A bunny can either be hopping, eating or sitting still)</li> |
|||
<li>A definition of the relationship between a plural and singular instance of an element (Three white bunnies are each white)</li> |
|||
<li>A definition of possible variations of the element (A bunny can be tall or short and can be friendly or mean)</li> |
|||
</ol> |
|||
<p>UI elements can be thought of as nouns, and variations as adjectives. Variations should be written in a way which only describe the innate features of that variation, so that variations can be used together without affecting each other.</p> |
|||
<h3>I don't know what you're talking about just show me the code</h3> |
|||
<p>If you'd like to shortcut any more explanation, check out the standard definition for a UI button for a live example.</p> |
|||
<a class="big blue ui button" href="button.html">UI Button Spec</a> |
|||
|
|||
|
|||
<h2>The library</h2> |
|||
|
|||
<p>The semantic library is a UI library and set of javascript modules which have been written to adhere to the semantic standard.</p> |
|||
|
|||
<p>The aim is to release pieces of the library on a schedule over the course of the next few months. <a href="#">Check out the Semantic library release calendar</a></p> |
|||
|
|||
<h2>Why use Semantic Modules?</h2> |
|||
<ol> |
|||
<li><b>Puts accessibility first</b>. Although Coffeescript is beautiful, and Angular is smart, Semantic has a different agenda: to be easy to use, and opinionless. Semantic can be thought of more as the <a href="http://en.wikipedia.org/wiki/Aaron_Copland">Aaron Copland</a> of programming libraries. To code in Semantic only requires an understanding of jQuery and Javascript to begin writing code. If you're stuck there are also plenty of examples to help you get started.</li> |
|||
<li><b>Is self documenting.</b> Instead of reading through inline comments to determine what a developer is intending, semantic allows developers to pass meaningful debug data where its most useful: the javascript console. This allows you to see the sequence of events that occur in a module , along with useful debug information, like the value of significant variables. If you're in the source code, debug statements also read similarly to code comments which provide context. <a href="#">Show me</a> |
|||
<li><b>Designed to separate the arbitrary bits from the core logic of your module.</b> Ever scroll through an unfimiliar library looking for the line of code where they define the ID tag for an expected html structure? Semantic keeps you from ever having to do that again. Developer decisions like metadata, classnames, selectors, and messages are separated from the less arbitrary parts of code. <a href="#">Show me</a> </li> |
|||
<li><b>Lets you access anything, and change everything.</b> Methods defined as part of module definitions are all invokable. Semantic also maps from dot notation to their appropriate locations inside the module, allowing developers not to only make flat modules. Settings can be changed at initialization, or after. Module defaults can be changed whenever. <a href="#">Show me</a></li> |
|||
<li><b>Plays nice with other libraries</b>. Modules have teardown methods which will remove any bound events or initialized code. Modules also use namespaced events so you can have more flexibility over defining and clearing them</li> |
|||
<li><b>Patterns for every need</b>. Semantic has patterns that work well both as a widget factory, and as a single entity.</li> |
|||
</ol> |
|||
|
|||
<h2>How to write a module</h2> |
|||
<div class="big ui button">View Annotated Source</div> |
|||
|
|||
<ol> |
|||
<li>Select the most appropriate design pattern.</li> |
|||
<li>Define a settings object.</li> |
|||
<li>Define a selector cache.</li> |
|||
<li>Add an object literal defining invokable methods for your plugin</li> |
|||
<li>You're done!</li> |
|||
</ol> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,59 @@ |
|||
/******************************* |
|||
CSS Reset |
|||
*******************************/ |
|||
|
|||
html, body, div, form, fieldset, legend, label, ul, li, menu, button { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
background: none; |
|||
} |
|||
|
|||
article, |
|||
aside, |
|||
details, |
|||
figcaption, |
|||
figure, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
nav, |
|||
section { |
|||
display: block |
|||
} |
|||
|
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0px; |
|||
} |
|||
th, td { |
|||
text-align: left; |
|||
vertical-align: top; |
|||
} |
|||
th, td, caption { |
|||
font-weight:normal; |
|||
margin: 0px; |
|||
padding: 0px; |
|||
} |
|||
img, |
|||
iframe { |
|||
border: 0px; |
|||
} |
|||
:focus, input:focus, button:focus, button:active, button:hover { |
|||
outline: 0px; |
|||
} |
|||
button { |
|||
display: block; |
|||
outline: 0px; |
|||
border: 0px; |
|||
} |
|||
ul, li { |
|||
list-style-type: none; |
|||
} |
|||
p { |
|||
margin: 0px; |
|||
} |
|||
html { |
|||
font-size: 100%; |
|||
-webkit-text-size-adjust: 100%; |
|||
-ms-text-size-adjust: 100%; |
|||
} |
|||
@ -0,0 +1,209 @@ |
|||
.ui.table { |
|||
width: 100%; |
|||
border: 1px solid #F0F0F0; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
font-size: 12px; |
|||
color: #555555; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
/* Standard Table Icons */ |
|||
.ui.table i.icon { |
|||
vertical-align: middle; |
|||
margin: 0px; |
|||
} |
|||
.ui.table .star-empty, |
|||
.ui.table .star-half, |
|||
.ui.table .star { |
|||
color: #D9B347; |
|||
} |
|||
|
|||
|
|||
.ui.table tr, |
|||
.ui.table td { |
|||
border-collapse: collapse; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.table thead { |
|||
border-bottom: 1px solid #DADADA; |
|||
} |
|||
.ui.table thead tr { |
|||
/* |
|||
-webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); |
|||
-moz-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); |
|||
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); |
|||
*/ |
|||
} |
|||
.ui.table td, |
|||
.ui.table th { |
|||
padding: 6px 10px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.ui.table th, |
|||
.ui.sortable.table th.disabled:hover { |
|||
cursor: auto; |
|||
background-color: #FAFAFA; |
|||
|
|||
font-weight: bold; |
|||
color: #333333; |
|||
|
|||
background: -webkit-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: -moz-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: -o-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: -ms-linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
background: linear-gradient(top, #FAFAFA 0px, #F2F2F2 100%); |
|||
} |
|||
|
|||
/* Header & Footer Formatting */ |
|||
.ui.table thead, |
|||
.ui.table tfoot { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
font-size: 13px; |
|||
} |
|||
|
|||
/* Table Striping */ |
|||
.ui.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Variations |
|||
---------------*/ |
|||
|
|||
|
|||
/* Grid */ |
|||
.ui.grid.table tbody tr, |
|||
.ui.grid.table tfoot tr { |
|||
border: none; |
|||
|
|||
} |
|||
.ui.grid.table th { |
|||
border: 1px solid #DADADA; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
border-bottom-color: #CCCCCC; |
|||
border-bottom-color: rgba(0, 0, 0, 0.2); |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
} |
|||
.ui.grid.table tbody td { |
|||
border: 1px solid #E0E0E0; |
|||
border-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Special Row Types */ |
|||
.ui.table tr.button td { |
|||
padding: 0px; |
|||
} |
|||
.ui.table tr.button .button { |
|||
border: none !important; |
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
.ui.table tfoot tr td, |
|||
.ui.table tr.emphasis td, |
|||
.ui.table tr td.emphasis { |
|||
background-color: #F0F0F0; |
|||
|
|||
border: 1px solid #DADADA; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.6) inset; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
/* Sortable Table */ |
|||
.ui.sortable.table th { |
|||
cursor: pointer; |
|||
color: #555555; |
|||
vertical-align: top; |
|||
} |
|||
.ui.sortable.table th:hover { |
|||
background-image: none; |
|||
background-color: #F4F4F4; |
|||
} |
|||
.ui.sortable.table th.sorted { |
|||
background-image: none; |
|||
background-color: #EEEEEE; |
|||
|
|||
border-color: #CACACA; |
|||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.4); |
|||
|
|||
border-bottom-width: 2px; |
|||
|
|||
color: #333333; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2); |
|||
|
|||
background: -webkit-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: -moz-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: -o-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: -ms-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
background: linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); |
|||
} |
|||
|
|||
.ui.sortable.table th:after { |
|||
display: inline-block; |
|||
content: ''; |
|||
width: 1em; |
|||
opacity: 0.5; |
|||
|
|||
margin: 0px 0px 0px 8px; |
|||
font-size: 18px; |
|||
line-height: 12px; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
|
|||
vertical-align: middle; |
|||
vertical-align: calc(); |
|||
} |
|||
.ui.sortable.table th.ascending:after { |
|||
content: '\25b4'; |
|||
} |
|||
.ui.sortable.table th.descending:after { |
|||
content: '\25be'; |
|||
} |
|||
|
|||
/* Icons */ |
|||
.ui.sortable.table th .icon.info-circle { |
|||
float: right; |
|||
} |
|||
/* Red Icons */ |
|||
.ui.sortable.table td .icon.cancel-circle { |
|||
color: #CC3333; |
|||
} |
|||
/* Green Icons */ |
|||
.ui.sortable.table td .icon.check, |
|||
.ui.sortable.table td .icon.dollar, |
|||
.ui.sortable.table td .icon.money { |
|||
color: #40D100; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Resizes |
|||
---------------*/ |
|||
|
|||
.ui.large.table { |
|||
font-size: 13px; |
|||
} |
|||
.ui.large.table td, |
|||
.ui.large.table th { |
|||
padding: 10px 12px; |
|||
} |
|||
@ -0,0 +1,119 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|||
<title>Semantic Modules</title> |
|||
|
|||
<link rel="stylesheet" href="ui/state.js" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/panel.css" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/button.css" type="text/css" media="screen" /> |
|||
<link rel="stylesheet" href="ui/table.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="../src/shape.css" type="text/css" media="screen" /> |
|||
|
|||
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /> |
|||
|
|||
<script src="../dependencies/jquery.js" type="text/javascript"></script> |
|||
<script src="ui/state.js" type="text/javascript"></script> |
|||
|
|||
<script src="../dependencies/transform2d.js" type="text/javascript"></script> |
|||
<script src="../dependencies/transform3d.js" type="text/javascript"></script> |
|||
<script src="../src/shape.js" type="text/javascript"></script> |
|||
|
|||
<script src="example.js" type="text/javascript"></script> |
|||
|
|||
</head> |
|||
|
|||
<body id="example"> |
|||
<div class="container"> |
|||
|
|||
<h1 id="the-problem">The problem</h1> |
|||
<p>The DNA of the web is user interface but the DNA of websites is HTML</p> |
|||
<h2 id="issues-with-html-as-a-building-block-of-websites">Issues with HTML as a building block of websites</h2> |
|||
<ul> |
|||
<li>Browsers had to write interpreters for web coding languages before the web became universal popular, so the majority of the lasting decisions on the html standard weere made without the foreknowledge of what the web could be, href= 'hypertext reference', 'a' anchor for a web link. Based on naming conventions and suppositions of a small group of decision makers at a particular moment in history.</li> |
|||
<li>Additions to HTML standards were done in a legitimately conservate way to preserve compatability and momentum, consistency etc. </li> |
|||
<li>Falls into the Prescriptivist/descriptivist trap in linguistics. </li> |
|||
<li>Example: Académie française, french institute that acts as a watchguard on the usage of french language, voices opinion to government about the 'corruption' of the language based on common usage, foreign influences, etc. http://en.wikipedia.org/wiki/Acad%C3%A9mie_fran%C3%A7aise#Role_as_authority_on_the_French_language </li> |
|||
<li>Another <DFW Article on the subject> http://instruct.westvalley.edu/lafave/DFW_present_tense.html</li> |
|||
</ul> |
|||
<h3 id="not-completely-semantic">Not completely semantic</h3> |
|||
<ul> |
|||
<li>Examples: hgroup, ul, li, href, </li> |
|||
<li>What would the logical children elements for these elements be?</li> |
|||
<li>TR > TD (What is a td anyone know?)</li> |
|||
<li>Hgroup > h1 h2 (How does this make sense?)</li> |
|||
<li>UL > LI (Why? Who thought of this?)</li> |
|||
<li>There's nothing semantic about an hgroup. It' as idiomatic as me referring to a group of people a a pgroup. Maybe over time my friends could get used to me saying this, but why should they?</li> |
|||
<li>Who here refers to links as "hypertext references", yet now HREF is codified. And links are 'a' as in short for anchor? </li> |
|||
<li>Ok this may be taking things overboard but its to prove a point, that coding language is unconventional</li> |
|||
</ul> |
|||
<h3 id="incompleteness-compels-developers-to-add-their-own-conventions">Incompleteness compels developers to add their own conventions</h3> |
|||
<ul> |
|||
<li>Everyone who codes front end knows the possible minefield you encounter when collaborating on a large project.</li> |
|||
<li>Every developer is king of their own naming domain, and has idiomatically created their own schemas for naming everything. Everything on the site had at some point to be subjected to their own naming decisions. These decisions could be influenced by personality, culture, what mood their in, etc.</li> |
|||
<li>How many ways can we say the same thing? </li> |
|||
<li> |
|||
<p>Example: A modal has just poped on the screen. What should it be called? </p> |
|||
<p><div id="modal_visible"> <div id="login"> <div class="pop_up_login"></div></p> |
|||
</li> |
|||
<li> |
|||
<p>All of these are correct by nature, but why are we redefining everything? </p> |
|||
</li> |
|||
</ul> |
|||
<h2 id="how-to-fix-the-problem">How to fix the problem</h2> |
|||
<h3 id="a-semantic-approach">A semantic approach</h3> |
|||
<p>Well if progressing html isnt the future of a re-useable, semantic web than what could be?</p> |
|||
<h3 id="whats-good-from-html">What's good from HTML</h3> |
|||
<ul> |
|||
<li>A good way to approach what's useful is to look at whats used.</li> |
|||
<li>People really liked 'ul' and 'li' for explaining grouping. All sorts of things people dont usually think of as lists seem to find representation in html usage as Unordered list is a slightly obtuse concept, but perhaps there's something in the nature of defining a plural and singular relationship.</li> |
|||
<li>Classnames appear to be the most useful aspect of code because they allow for everything. A catch-all for all the things html hasnt defined. </li> |
|||
</ul> |
|||
<h3 id="some-presumptiveness">Some presumptiveness</h3> |
|||
<ul> |
|||
<li>HTML and CSS are languages used to describe structural relations and appearances, which is a much easier task to accomplish than giving a more abstract explanations of behavior or instructions. </li> |
|||
<li>Physical, declarative langauge was one of the first aspects of language to evolve. Think caveman running into a cave and saying "two big tiger". this is enough to convey to the other caveman to run further into the cave. </li> |
|||
<li>Language have been selected for and evolved since prehistoric times. Its terse, universal, and selected for by convention and usage not top-down.</li> |
|||
<li>How many words do you need in a vocabulary? To read a chinese newspaper you need around 4,000 characters. That's good enough for describing most anything you will encounter or experience. And thats damn near everything in the world! We only need to account for a language and (definition) for a website, which needs a much much smaller subset of language. Maybe even a hundred or so discrete element definitions.</li> |
|||
<li>For proof that this concept is viable, and that not all the web is idiosyncratic, and unable to be defined in common ui, look at the success of Twitter's Bootstap library, which paved the way for reusable UI components. </li> |
|||
<li>These UI elements can be defined in language anyone can understand. Dropdowns, Modal, Button Groups. These are all parts of the english vernacular that did not exist two decades ago, but miraculously has evolved as language has adapted to fill in the gaps. This is what should inform our naming decisions in code. Usage.</li> |
|||
</ul> |
|||
<h3 id="how-we-actually-do-the-dirty-business-of-making-a-semantic-standard-for-ui">How we actually do the dirty business of making a semantic standard for ui</h3> |
|||
<ul> |
|||
<li>Define a set of elements as nouns. "ui button", "ui field" "ui form"</li> |
|||
<li>Define a set of modifiers that are universal and carry the same meaning (when appropriate). i.e. if "large" means 20px tall. Then anything that is large should be 20 pixels tall, ex1. "large button", "large header". ex2. red. "grey field", "grey button".</li> |
|||
<li>Assume prototypical qualities if no modifiers present. I.e. If i ask you to imagine a bunny, you probably imagine a white furry animal with 2 long ears." without having to imply all those characteristics. In the same way the definition of "button" should account for all the prototypical qualities while the modifiers only the modifying qualities.</li> |
|||
<li>Reduce language complexity (KISS) by defining relationships using plural/singular relations. We dont go around saying "there is a large man and a large man and a large man", you just say "There are three large men". in the same way "<div class'two ui buttons">" can define the size and proportions of its children elements more succinctly then classing them all.</li> |
|||
<li>Avoid jargon and idiomatic expressions, stick to common usage. (Keep the ego out)</li> |
|||
</ul> |
|||
<h3 id="once-you-create-a-visual-vocubulary">Once you create a visual vocubulary</h3> |
|||
<ul> |
|||
<li>If you can define a standard for a button, say that it can be either tiny, small, medium, big, large, huge or gigantic. Or it can be red, yellow, green, or blue. Then the task for a front end developer becomes explaining how this website's definition of a button strays from standard, not redefining what a button is from scratch over and over.<br /> |
|||
</li> |
|||
<li>This task now only requires them redefining the modifiers, not the button element, or any of the causal relationships.</li> |
|||
<li>Once a consensus spec is built for user interface. Then modules have predefined ui components to work with. No arbitrary selectors, or redefining ui elements on a module level. If a modal needs a button then it would use</li> |
|||
</ul> |
|||
<h3 id="as-it-would-exist">As it would exist</h3> |
|||
<ul> |
|||
<li>Nouns are classnames, modifiers are also classnames</li> |
|||
<li>All ui elements are subclass "ui" to avoid collissions. <div class="ui button"></div></li> |
|||
</ul> |
|||
<h3 id="as-it-might-exist">As it might exist</h3> |
|||
<ul> |
|||
<li>Nouns are tags and always end in a noun, modifiers precede them. |
|||
<two large button> |
|||
<button>one</> |
|||
<button>two</> |
|||
</></li> |
|||
</ul> |
|||
<h2 id="why-try-to-fix-this-problem">Why try to fix this problem</h2> |
|||
<p>Its important to acknowledge there has been lots of work which has attempted to solve this already. Or to take these techniques at heart when creating a language. The higher order-ness of SQL for example "SELECT FROM TABLE WHERE CONDITION"</p> |
|||
<h2 id="make-coding-more-accessible">Make coding more accessible</h2> |
|||
<p>There have been numerous make programming accessible, KhanAcademy, Code Academy, meetup groups. Gamification. All these problems are great, but solve the issue of making learning programming more difficult |
|||
Tackling the issue of making programming less difficult is a separate issue entirely. This has been tackled in the past from the perspective of gurus helping making programming less difficult for gurus, i.e dart/cofeescript, or less/sass, but has not been tackled much for making languages easier for complete beginners.</p> |
|||
<p>stopped writing for time constraints.</p> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save