O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Semantic ui

Semantic ui

  • Entre para ver os comentários

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/

×