Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Semantic ui

Semantic ui

  • Be the first to comment

Semantic ui

  1. 1. Semantic UI Jason
  2. 2. Semantic UI ● Front-end framework ● Started in 2013 ● Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
  3. 3. Concise HTML ● Semantic UI treats words and classes as exchangeable concepts. ● Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.
  4. 4. Concise HTML Bootstrap <div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4">2</div> <div class="col-lg-4">3</div> <div class="col-lg-4">4</div> </div> Semantic UI <div class="ui four column grid"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>
  5. 5. Intuitive Javascript ● Semantic uses simple phrases called behaviors that trigger functionality. $('select.dropdown') .dropdown('set selected', ['meteor', 'ember']);
  6. 6. Simplified Debugging ● Performance logging lets you track down bottlenecks without digging through stack traces. $('.sequenced.images .image') .transition({ debug : true, animation : 'jiggle', duration : 500, interval : 200 }) ;
  7. 7. Installing ● Install NodeJS ● Install Gulp ● Install Semantic UI ● Include in Your HTML <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> <script src=".../2.1.3/jquery.min.js"></script> <script src="semantic/dist/semantic.min.js"></script>
  8. 8. Build Tools Process LESS files with theming variables Add vendor prefixes for supported browsers with autoprefixer Watch file changes and rebuild the necessary files when adjusting themes Automatically process asset paths, so that minified and concatenated releases can exist in different directories Allow custom builds with only the required components for your site Allow advanced usage like Right-To-Left (RTL) languages using RTLCSS
  9. 9. Folder Structure
  10. 10. Types of Components Element : Button、Fag、Icon、input... Collection : Form、Grid、Menu、Table... View : Card、Advertisement、Feed... Module : Dropdown Modal Progress、Tab、Sidebar... Behavior : API、From Validation...
  11. 11. Custom Theme Site.overrides Site.variables theme.config Semantic.css semantic.min.css Gulp build
  12. 12. Using Packaged Themes src/theme.config
  13. 13. Sitewide Defaults site/globals/site.variables
  14. 14. Component Defaults site/modules/checkbox.variables
  15. 15. Overrides Using a site override file for an element, allows you to make these concessions without sullying the re-usability of the rest of your code. src/themes/default/elements/icon.overrides
  16. 16. CSS Write Order CSS compiled from src/definitions/elements/button.less CSS compiled from src/themes/{themeName}/elements/button.overrides CSS compiled from src/site/elements/button.overrides
  17. 17. Reference Learn semantic http://learnsemantic.com/ Semantic-ui http://semantic-ui.com/

×