<div class="ui header"><i class="green check icon"></i>Deal with resources not URLs</div>
<p>Create named actions like <code>'follow user'</code> and have API handle URL templating, parameters, and other annoyances for you.</p>
<p>Use API actions like 'follow user' and not server urls in your code. Centrally manage your entire API making sure you aren't caught modifying urls across your codebase. Define your endpoints using an intuitive templating system that automatically passes data found in your UI.</p>
<p>Easily tie server events like AJAX loading elements using intuitive defaults based on the context inside your interface. Set maximum <b>and minimum</b> request times, toggle between UI states, and easily sync state between multiple elements with the same API actions.</p>
<p>API helps your UI keep track of server events, and is designed to work with Semantic's state naming conventions to track loading, disabled, and active stats.</p>
<p>Allowing you to do things like set maximum <b>and minimum</b> request times, toggle between text states, and sync state between multiple buttons with the same API actions.</p>
<p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p>
<div class="ignored info ui message">Page headings use standard <code>h1-h6</code> tags, and size themselves relative to the base font of the entire page.</div>
<div class="ui ignored two fluid font buttons">
<a class="increase ui button"> <i class="plus icon"></i> Base Font</a>
<a class="decrease ui button"> <i class="minus icon"></i> Base Font</a>
<p>Semantic provides real design freedom. High level variables and an intuitive inheritance system lets you change the look and feel of your components with just a handful of lines.</p>
<p>Semantic offers complete design freedom. High level variables and an intuitive inheritance system lets you change the look and feel of your components with just a handful of lines. Intui</p>
<div class="ui large source button" style="display:none;">
<i class="docs code icon"></i> View Source
</div>
@ -167,7 +178,7 @@ type : 'Semantic'
3000+ CSS Variables
</h2>
<p>The only dogma from this framework: <em>everything arbitrary is mutable</em>.</p>
<a class="ui large button" href="http://learnsemantic.com/developing/customizing.html">Customization Guide</a>
<a class="ui large button" href="http://learnsemantic.com/developing/customizing.html">Integration Guide</a>
<p>Semantic lets you choose from built in responsive patterns that let you tailor-fit your designs for tablet and mobile.</p>
<p>Semantic is <b>designed complely with em</b> making reponsive sizing a breeze. Design <em>variations</em> built into elements allow you to choose how content adjusts for tablet and mobile.</p>
<p>Semantic works alongside <b>Angular, Meteor, Ember</b> and other frameworks to help organize your UI layer alongside your application logic.</p>
<p>Semantic has integrations with <b>Angular, Meteor, Ember</b> and many other frameworks to help organize your UI layer alongside your application logic.</p>
<p>Sticky is initialized on the content that should be stuck to viewport. Most instances require specifying a secondary <code>context</code> which will define the top and bottom bounds of the sticky element.</p>
<p>Sticky is initialized on content that should be stuck to viewport. Most instances require specifying a secondary <code>context</code> which will define the top and bottom bounds of the sticky element. Sticky content must be included inside a containing element. This container can be a <a href="/elements/rail.html">ui rail</a> or your own arbitrary container, but should exist parallel to your context.</p>
<div class="code" data-type="html">
<div class="ui rail">
<div class="ui sticky">
<!-- Any arbitrary content !-->
</div>
</div>
<div id="context">
<!-- Long flowing text content !-->
</div>
</div>
<div class="code" data-type="javascript">
$('.ui.sticky')
.sticky({
context: '#element-to-follow'
context: '#context'
})
;
</div>
@ -303,6 +313,7 @@ type : 'UI Module'
;
</div>
</div>
<div class="example">
<h4 class="ui header">Sticky Conditions</h4>
<p>Sticky content is required to be inside its own <code>position: relative</code> container that is either the sticky context, or <b>shares vertical positioning with the context element</b>.</p>
@ -342,11 +353,13 @@ type : 'UI Module'
</div>
<div class="example">
<h4 class="ui header">Adjusting Offset and Padding</h4>
<p>If you have</p>
<p>If you have content fixed to the viewport it might make sense to include a top or bottom offset. An <code>offset</code> will adjust all values so that content does not overlap any content between the top of the browser and the specified value. A <code>bottomOffset</code> will do the same thing for content fixed to the bottom of the viewport.</p>
jlukic
10 years ago