Semantic is a UI component framework based around useful principles from natural language.

Overview

Semantic

Semantic UI

Join the chat at https://gitter.im/Semantic-Org/Semantic-UI

CDNJS

Semantic is a UI framework designed for theming.

Key Features

  • 50+ UI elements
  • 3000 + CSS variables
  • 3 Levels of variable inheritance (similar to SublimeText)
  • Built with EM values for responsive design
  • Flexbox friendly

Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.

2.4.0 Release (Sep 17th, 2018)

Semantic UI 2.4 is now available. Read up on what's new in the docs.

Migration info from 1.x can be found in the 2.0 release notes

User Support

Please help us keep the issue tracker organized. For technical questions that do not include a specific JSFiddle test case (bug reports), or feature request please use StackOverflow to find a solution.

Visit our contributing guide for more on what should be posted to GitHub Issues.

Install

Recommended Install

npm install semantic-ui  # Use themes, import build/watch tasks into your own gulpfile.

Semantic UI includes an interactive installer to help setup your project.

Additional Versions

Environment Install Script Repo
CSS Only npm install semantic-ui-css CSS Repo
LESS Only npm install semantic-ui-less LESS Repo
LESS plugin npm install less-plugin-semantic-ui LESS Plugin Repo
EmberJS ember install:addon semantic-ui-ember Ember Repo
Meteor - LESS meteor add semantic:ui Meteor Repo
Meteor - CSS meteor add semantic:ui-css CSS Repo
Bower bower install semantic-ui

Check out our integration wiki for more options.

Browser Support

  • Last 2 Versions FF, Chrome, Safari Mac
  • IE 11+
  • Android 4.4+, Chrome for Android 44+
  • iOS Safari 7+
  • Microsoft Edge 12+

Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.

Community

Getting Help

Please do not post usage questions to GitHub Issues. For these types of questions use our [Gitter chatroom] or StackOverflow.

Submitting Bugs and Enhancements

GitHub Issues is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following:

  • Check out our contributing guide for info on our release cycle.
  • Fork this boilerplate JSFiddle to create a test case for your bug. If a bug is apparent in the docs, that's ok as a test case, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged.

Pull Requests

When adding pull requests, be sure to merge into the next branch. If you need to demonstrate a fix in next release, you can use this JSFiddle

International

  • Chinese A Chinese mirror site is available at http://www.semantic-ui.cn.
  • Right-to-Left (RTL) An RTL version can be created using our build tools by selecting rtl from the install script.
  • Translation To help translate see the Wiki Guide for translations.

Resources

Resource Description
Bugs & Feature Requests All bug submission require a link to a test case, and a set of steps to reproduce the issue. You can make a test case by forking this JSFiddle, then submit your bug report on GitHub Issues
Live Chat Join our Gitter.im Room
Newsletter Updates Sign up for updates at semantic-ui.com
Additional Resources Submit a question on StackOverflow or ask our Google Group

Places to Help

Project How To Help Next Step
Localization Help us translate Semantic UI into your language Join our Translation Community
SCSS SASS needs PR to support variables inside @import Add Pull Request for #739
Angular Help develop angular bindings Reach Out on GitHub Issues
Guides & Tutorials Help write guides and tutorials Join the discussion

Reaching Out

If you'd like to start a conversation about Semantic feel free to e-mail me at [email protected]

Flattr This

Comments
  • Calendar module

    Calendar module

    I've created a Calendar (date/time picker) module. It depends on the Popup module and Table collection.

    For examples, see here: https://jsbin.com/hubanufuva/

    Let me know if there's things that can be improved or changed to fit better into the project.

    Issue for reference: #191.

    EDIT: implemented time picker.

    EDIT 2: See this repository for a ready to install version: https://github.com/mdehoog/Semantic-UI-Calendar.

    UI Component 
    opened by mdehoog 279
  • Is Semantic UI development dead ?

    Is Semantic UI development dead ?

    @jlukic 's last commit was 5/6 months ago and even then did not have many improvements nor much changes.

    What would be the status of Semantic UI especially with Bootstrap having much more development than this ? Is it in active development or are any features planed for the near future ?

    Note: This open source project goes dead without @jlukic or @quirkyjack , zero developement, zero updates, and for nearly a year at that. Even pull requests are not moving. Could there perhaps be a solution to this ?

    Please do not say plans for something, for that might be for another half a year of waiting with no promises or answers

    There will be a meeting at 6PM EST tomorrow on Hangouts !

    I hope to volunteer to maintain/run this project if @jlukic does not have the time for it

    Discussion 
    opened by GuacheSuede 120
  • Meteor integration

    Meteor integration

    Hi Jack,

    As you might know, the Meteor community loves Semantic-UI. We had many different wrapper packages all doing the same thing, so I'm submitting a PR that integrates Meteor packaging directly into your repository.

    All you have to do after accepting this PR is:

    1. create an account at https://meteor.com/ (click SIGN IN, then Create account). After you've done that, please let me know the name of the account, and I'll add you as a maintainer of the semantic organization (which has been alredy reserved for you).
    2. head to Meteor Autopublish sign in with your gitHub account, locate this repository and enable it for autopublish by toggling the checkbox you'll find on the right side of the repository item. You can get an idea about how Meteor Autopublish works by having a quick look at this page, but basically it creates a web hook to let us know when you push new tags.

    Please note that I've already published the current version of the package on Atmosphere (Meteor's package directory). When you'll release new versions, autopublish.meteor.com will automatically take delivery for publishing the new version also for Meteor.

    Thanks & best regards, Luca & the Meteor integrations team

    Enhancement Build Tools 
    opened by splendido 94
  • Range slider module

    Range slider module

    Implemented and added onto the range component originally made by tyleryasaka.

    His original repo

    Demo

    Issue

    I'm new to the whole javascript plugin thing, so let me know if I formatted something wrong or whatever.

    Also let me know of any other features you would like to see!

    Enhancement 
    opened by gdaunton 84
  • CSS Preprocessing

    CSS Preprocessing

    CSS Updates

    Developing

    LESS updates is a major feature for 1.0 and will be found in css branch.

    Global Variables

    • One global.less file will exist with global variables
    • Primary Color
    • Text Direction
    • Secondary Color
    • Page Background Color
    • Positive / Negative Color
    • Size Name Array -> EM
    • Color Name Array -> Hex
    • Default fonts (Header + Body)
    • Base Font Size
    • Link Color + Link State Colors

    UI Variables

    • Each file with variables will have a variable section at the top of the file
    • Variables can either:
      • Inherit value from global
      • Have a specified value
      • Use a color mix-in (lighten etc)

    Other Pre-processing Features

    • Add vendor prefixes mix-ins
    • Add color mix-ins for hover,down state of colors when appropriate

    NO NOs

    • No plans to using whitespace significant rules. Standard CSS styles whenever possible.
    • No use of mix-ins unless using to modify a color or vendor prefix or perform a critical calculation impossible any other way.
    Enhancement High Priority 
    opened by jlukic 79
  • 2.0 Announcement

    2.0 Announcement

    Hey Everyone

    I plan on launching 2.0 of Semantic UI on June 1st. This is a date I've set in stone to make sure I can get as much packed into 2.0 without delaying all the important fixes for longer than is necessary.

    I plan on having a launch party in New York for those who are available to attend. If you haven't already signed up for our newsletter, on semantic-ui.com be sure to do so.

    The current plan is to try to raise funds with Kickstarter in coordination with the June 1st launch, to fund production of dedicated theming and layout websites, as well as continued UI development on the project.

    The theme site would be similar to NPM for sharing/releasing Semantic UI themes, and would include a built in theme builder tool which could let you interactively create UI themes.

    The layout site would help users find re-usable layouts like 'credit card forms', 'profile pages', etc using Semantic UI components. These could be shared and added using a Codepen like interface that lets users create and share layouts with the community.

    I'll be sure to post any more updates in this thread as they develop.

    Thanks everyone for contributing to the project so far, and looking forward to sharing more shortly.

    Announcement 
    opened by jlukic 73
  • Multi Select

    Multi Select

    It would be nice to have something which is called 'select2'. Please check this out: http://t0m.github.io/select2-bootstrap-css/3.4.1.html

    Especially: Select2 multi select

    Enhancement 
    opened by lstrzelecki 67
  • Modal: Bad position on second show

    Modal: Bad position on second show

    When modal showed for second time it "falls" half bellow screen.

    var self = $('.ui.modal');
    self.modal({
      onShow: function () {
        self.modal('refresh'); // does NOT help
        setTimeout(function () {
          self.modal('refresh');
        }, 1000); // does help 1s is probably overkill
      }
    });
    

    My uneducated guess is position is computed and set only first time when modal is shown and second time default CSS makes it fall.

    Modal includes some generated items by KnockoutJS but items are not added between shows.

    Confirmed Bug 
    opened by mishak87 64
  • [Modal] Scrolling broken for mobile devices from recent 2.3.2 changes

    [Modal] Scrolling broken for mobile devices from recent 2.3.2 changes

    Steps

    This can easily be replicated pressing "Run Code" in the "Scrolling Modal" example on a mobile device (Chrome or Android) or even in a device simulator on Chrome Desktop.

    Expected Result

    It should be able to scroll.

    Actual Result

    It cannot scroll.

    Version

    2.3.2

    Testcase

    https://semantic-ui.com/modules/modal.html#scrolling-modal

    This is the culprit: https://github.com/Semantic-Org/Semantic-UI/commit/75dcaa2694da2aaa681aff1be74b2c0f3fab4028

    Confirmed Bug 
    opened by ngan 61
  • Integration with Meteor.js

    Integration with Meteor.js

    Hi all,

    I'd like to propose to start an official action for the integration of this awesome User Interface into the Meteor.js, the most popular full-stack JavaScript framework.

    I'm starting off based on this very good attempt, about trying to put some order into the packages database for Meteor, started by @dandv. He also promoted an official integration for FontAwesome opening this issue on their official GitHub repository which so far had nothing to do with Meteor.

    Since he wrote his proposal in a very clean wording, I ask you to read it carefully since it can be exactly the same for Semantic-UI.

    At the moment there are at least five different packages all simply wrapping semantic source code.

    @lumatijev, @nooitaf are the maintainer of the most stared packages: I hope they'll also agree about taking a single official action for this.

    My proposal, if you agree, is as follows:

    • verify whether the name 'semantic-ui' is still available for a new Meteor organization
    • create the organization on meteor.com (it could be me if you wish, but not necessarily...)
    • add @jlukic among the people belonging to the organization (requires him to create his own developer account) and possibly other people from both semantic-ui and meteor
    • figure out the best pattern to follow the make it as easy as possible to publish the official wrapper package (possibly on the lines suggested by @dandv)
    • publish the needed packages (css, less, sass, fonts, no fonts, etc...)
    • contact all other developer who published similar packages and kindly ask to mark them as no more maintaned (so to have them disappearing from the list on Atmosphere)
    • keep up the collaboration to maintain the published packages at best

    Hope this make sense also to you...

    Please let me know what do you think about this!

    Discussion Integration stale 
    opened by splendido 61
  • [Framework] SASS Support

    [Framework] SASS Support

    Hi Jack, I'm happy to present an SCSS "on demand" port for SUI. This is just an alpha version and I definitely think it could use a lot of improvements. But still, I'd love to hear your thoughts. Today is my birthday and I'm working on SUI from morning..damn :D :dancers:

    https://github.com/RealtyPremium/Semantic-UI-SCSS

    Cheers.

    Enhancement 
    opened by dsignr 61
  • Create 晓晓

    Create 晓晓

    ✖ Multiple features in one PR ✖ New Components Unless Previously Discussed with Maintainers (Consider creating separate repo, I'll link out to you)

    ✔ Add comments to complex/confusing code in "code" view of PR ✔ BUGS → This form is required: ✔ Enhancements → Only specific enhancements with detailed descriptions.

    Issue Titles

    Use the format: [Component] Adds Support for Thing

    For example: [Build Tools] Adds Source Map Support Or: [Button] Fixes Inheritance for Red Basic Active State

    Closed Issues

    #222 #333 #444

    Description

    Testcase

    [Show before with this fiddle] https://jsfiddle.net/ca0rovs3/

    Consider showing "fixed" case with your fiddle

    You can link to your JS using https://rawgit.com/

    opened by xiaoxiaoxingkong-a 0
  • [Dropdown] - `allowTab` `tabindex` value should default to `select`'s `tabindex` (if exists)

    [Dropdown] - `allowTab` `tabindex` value should default to `select`'s `tabindex` (if exists)

    Steps to Reproduce

    1. Integrate Dropdown only via /dist/components/dropdown.min.js; /dist/components/dropdown.min.css
    2. Initialize on existing, traditional HTML select (with options etc) with an existing tabindex attribute, using ui search selection class 'triggers' and $('element').dropdown()

    Expected Dropdown created with tabindex value copied from existing select element's tabindex value.

    Result Dropdown created with tabindex="0"

    Relevant line appears to be:

    https://github.com/Semantic-Org/Semantic-UI/blob/daa2438f048e6d98a330171a83ec74c3a13e9bd1/src/definitions/modules/dropdown.js#L2266

    opened by inspector71 1
  • [SEARCHBAR] Add a searchbar for components

    [SEARCHBAR] Add a searchbar for components

    ✖ USAGE QUESTIONS → Use these dedicated resources: Docs - http://www.semantic-ui.com Chat - https://gitter.im/Semantic-Org/Semantic-UI SO - https://stackoverflow.com/questions/tagged/semantic-ui?sort=votes

    ✔ Enhancements → Be specific. Assume backwards compatibility is a necessity. Suggest implementation when possible. ✔ BUGS → ❤❤❤. Keep in mind some bugs may not be immediately fixable due to backwards compatibility or CSS limitations.

    Title (Put in field above)

    Use the format: [Component] Component Should Do X i.e. [Checkbox] onChange Should Fire When Update Triggered via DOM

    Steps

    • target all of the elements of sidebar
    • create a seachbar for inputting values
    • make a search in loaded components

    Expected Result

    A searchbar should be added

    Actual Result

    There's no searchbar as of now

    Version

    x.y.z

    Testcase

    opened by rupali-codes 0
  • Invalid link on the Semantic-UI homepage

    Invalid link on the Semantic-UI homepage

    Title

    Invalid link on the Semantic-UI homepage i.e SMACSS link in the homepage should lead to SMACSS website

    Steps

    Open url: https://semantic-ui.com/ Scroll down to "Concise HTML" and click on SMACSS

    Expected Result

    Should open SMACSS official website http://smacss.com/

    Actual Result

    Leads to a dead link with error This site can’t provide a secure connection

    Version

    x.y.z

    Testcase

    https://user-images.githubusercontent.com/49100294/199619530-803edac1-65bb-4248-ad24-017cf7638e2f.mp4

    opened by nwaamadioha 2
  • v2.5.0: Build reporting less compile issues

    v2.5.0: Build reporting less compile issues

    Due to updates in the less dependency some math operations are more strict (https://github.com/less/less.js/releases/tag/v4.0.0).

    Steps

    Build semantic

    Actual Result

    [PluginError: Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis? in file ./semantic/src/themes/default/globals/site.variables line no. 393] {
      stack: undefined,
      type: 'Argument',
      filename: './semantic/src/themes/default/globals/site.variables',
      index: 10061,
      line: 393,
      column: 19,
      callLine: NaN,
      callExtract: undefined,
      extract: [
        '*/',
        '@mini            : unit( round(@miniSize * @emSize) / @emSize, rem);',
        '@tiny            : unit( round(@tinySize * @emSize) / @emSize, rem);'
      ],
      lineNumber: 393,
      fileName: './semantic/src/themes/default/globals/site.variables',
      __safety: { toString: [Function: bound ] },
      _stack: undefined,
      plugin: 'gulp-less',
      showProperties: true,
      showStack: false
    }
    

    Version

    2.5.0

    Recommendation

    There are a couple of updates needed in the theme less files. Wrap division expressions in parentheses and variables prefixed with negative signs must also be wrapped.

    opened by mcrawshaw 1
Releases(2.5.0)
  • 2.5.0(Oct 6, 2022)

    Version 2.5.0 - Oct 6, 2022

    Note

    Special Note: If you run into any breaking changes with Gulp 4. Please reach out to me at [email protected] with bug reports

    Critical Fix

    Breaking Changes

    • Gulp - Updated all tasks to work with Gulp 4. This should fix SUI to install correctly on Node 12 or greater (see Gulp3 Issue for more details)
    • Node - Updated scripts to build in Node 18 via vanilla install.

    Build

    • Theme - Allow site's global site theme to be missing #6876 Thanks @cruzdanillo
    • Meteor - Fix issue with misuse of api.addAssets #6790 Thanks @gimco
    • Gulp - Report errors in build #7005 Thanks @bundyo

    Examples

    • Modal - Fixed mutation observer was not properly disconnected
    • Sticky - Adds new example for sticky to highlight behavior when sticky/context height varies

    Bug Fixes

    • Dropdown - Fix issue where dropdown menu could not open to right when in right menu inside a ui menu (See examples/sticky.html) for use-case
    • Sticky - Fix issue where element might be bound bottom (fixed to bottom of context) if the sticky element is larger than the context
    • Sticky - Fix issue when sticky size is larger than context size caused context min-height not to be set correctly.
    • Button - Fix usage of loading on in labeled button #7023 thanks @flppv
    Source code(tar.gz)
    Source code(zip)
  • 2.4.1(Oct 13, 2018)

    Note

    If you are using the semantic-ui-less package with versions of LESS before 3.5 some calc values will not be computed correctly due to changes in variable interpolation. It is recommended that you upgrade to at least 3.5 to continue using new versions of SUI. For more information see #6512

    Build

    • LESS - SUI now supports less versions greater than 3.5.0 Thanks @sciyoshi #6512
    • Gulp - Migrated deprecated gulp-util to replace-ext Thanks @stevelacy #6322
    • Gulp - Updated all gulp dependencies to most recent released versions with modifications to tasks as necessary.

    Bug Fixes

    • Dropdown - clearable dropdown now works with dropdown that arent on:click, like hover or manual triggers. #6594
    • Modal - Fixed fullscreen modal having incorrect left offset with flex modals #6587
    • Embed - Embed will now correctly remove DOM metadata on destroy
    • Grid - Fix issue with very relaxed vertically divided grid having wrong margins on dividers
    Source code(tar.gz)
    Source code(zip)
  • 2.4.0(Sep 17, 2018)

    2.4.0 includes a new component placeholder. To use this component in your existing SUI site, be sure to add @placeholder: 'default'; to your theme.config. You can see an example in theme.config.example

    New Components

    • Placeholder - Added ui placeholder that can be used to show where content will soon appear.

    New UI Type

    • Segment - Added new ui placeholder segment used to reserve space for UI when content is missing or empty.

    Major Enhancements

    • Dropdown - Added clearable dropdowns. When clearable: true is specified an (X) will appear to clear dropdown selection #2072
    • Modal/Dimmer - Modals and dimmers now include a new setting useFlex which defaults to auto. Modals and dimmers will automatically revert to using non-flex layouts when there may be layout issues with using flexbox. Modals will fall back to JS position when detachable: false is used or with IE11/Edge (Absolutely positioned elements inside flex containers in IE behave differently).

    Critical Bugs

    • Modal - Fixed issue where scrolling modal would not allow for scrolling with touch devices. #6449
    • Label - Fixed issue where basic label were appearing incorrectly Thanks @lasley / @ColinFrick #6582 #6440
    • Menu/Dropdown - Fixed left menu inside ui menu would display horizontally as flex #6359

    Bugs

    • Dimmer - Dimmer now sets variation at runtime, to support run-time swapping between top aligned and middle aligned using .dimmer('setting', 'variation', 'top aligned')
    • Dropdown - Fixed issue where onChange when used with action: hide would be missing the third param $item #6555
    • Flag - Add uk alias for united kingdom Thanks @PhilipGarnero #6531
    • Icon - Fixes missing disk outline icon alias #6556
    • List - Fixed issue where list content would not take up 100% width when used alongside img or icon
    • Menu/Dropdown - Fixes dropdown item margin not obeyed inside labeled icon menu #6557
    • Modal - Fixes @mobileTopAlignedMargin theming variable was not implemented
    • Modal - Modal now will remove blurring after undimming, to prevent issues with position: fixed #6520

    Minor Changes

    • Dropdown - inline dropdown close icon default right margin default spacing slightly modified.
    Source code(tar.gz)
    Source code(zip)
  • 2.3.3(Jul 9, 2018)

    Bug Fixes

    • Search - Passing in cache: false will now affect default settings for apiSettings when using a remote endpoint. Previously you would also have to pass in apiSettings: { cache: false} as well
    • CSS - Update LESS syntax to be compatible with LESS 3.0 Thanks @sciyoshi #6447
    • Icon - Several icon names have been deprecated due to incompatibility with transition in and transition out used in animations. Previous names can still be used, however it is recommended to migrate to new names for compatibility with transition.
    • linkedin in is now linkedin alternate
    • zoom in is now zoom-in
    • zoom out is now zoom-out
    • sign in is now sign-in
    • sign out is now sign-out
    • log out is now logout
    • in cart is now in-cart
    Source code(tar.gz)
    Source code(zip)
  • 2.3.2(Jun 18, 2018)

    Enhancements

    • Modal - Modal and Dimmer now prevent background page from scrolling on mobile or where touch events are present
    • Button - Add inverted and inverted basic variations for primary and secondary buttons Thanks @hammy2899 #6242

    Theming

    • Global - Add hover down active and focus variables for @invertedPrimaryColor and @invertedSecondaryColor

    Bugs

    • Dropdown Fixed bug that could cause dropdown to recursively trigger network requests specifically when using apiSettings with a url that returns valid response but with no results when clicking directly on the dropdown icon. Thanks @vpeti #5231 #5809
    • Statistics - Fix issue where grouped statistics would have excess bottom margin if they are :last-child
    • Label - Fix basic label does not use @basicBackground variables Thanks @levithomson
    • Modal - Modal will not refocus a field if field is already focused Thanks @nikolaybobrovskiy #6301
    • Icon - Fix wechat icon not displaying due to typo Thanks @alex-karo #6429
    Source code(tar.gz)
    Source code(zip)
  • 2.3.1(Mar 19, 2018)

    A Special Message about Flex Modals There will be an update shortly to resolve issues related to flex modals when using multiple modals and detachable: false, in order to not hold up this release, we've decided to move forward without a fix.

    A general solution will most likely require branching code for IE11 which will disable flex (as IE11 doesnt correctly implement the latest spec for absolute positioned flex containers).

    Critical Bugs

    • Dropdown - Fixed issue in 2.3.0 that could cause multiselect dropdowns initialized by converting <select> to not add initial selected options. #6123
    • Search - Fixes using category search with fullTextSearch: 'exact' returning duplicate results @Thanks @prudho #6223 #6221
    • Icon - Fixes centered and bordered icons appearing incorrectly with FA5 Thanks @w96k #6192
    • Icons - Fixes missing aliases/incorrect icons from Font Awesome 5 port in 2.3.0 Thanks hammy2899 #6181 #6175 #6176 #6174 #6175
    • Icons - Fixed issue where link icon were appearing incorrectly due to changes in icons #6180

    Enhancements

    • Search - Adds disabled variation Thanks @prudho #6225
    • Form Validation - Form can now return their validation prompt dynamically based on their current value. Thanks @xDaizu #6016 #3864

    Bugs

    • Dropdown - Fixed onChange missing text from callback when dropdown is set to action: 'select' Thanks @martinduparc #4183 #4510
    • Icons - Fixes some icons that were incorrectly named. Thanks hammy2899 #6181
    • Icons - Added ability to choose whether solid, outline and brand icons should be included in your theme via the @importSolidIcons, importRegularIcons and @importBrandIcons variables Thanks hammy2899
    • Icons - Increased specifity on fitted icon to fix compatibility with other components #6125
    • Visibility - Fixed bug that could cause onScreen callback to not occur properly for elements that are taller than screen.
    • Menu - Fixes disabled item showing hover style for secondary menu Thanks @tcmal #6268
    • CSS Variables - Added use of @normal for normal font weight for all non-default themes included in repo. #6227
    • Image - Fixes margin being applied twice to ui images #6224
    • Reveal - Fix whitespace: nowrap; applying to content inside slide reveal and move reveal
    Source code(tar.gz)
    Source code(zip)
  • 2.3.0(Feb 20, 2018)

    Major Enhancements

    • Icons - Font Awesome 5 is now included in Semantic UI Thanks @hammy2899 #6085

    • Search - Category search can now work with local search by adding a category property to any result and specifying type: 'category'

      var categoryContent = [
        { category: 'South America', title: 'Brazil' },
        { category: 'South America', title: 'Peru' },
        { category: 'North America', title: 'Canada' },
        { category: 'Asia', title: 'South Korea' },
        { category: 'Asia', title: 'Japan' },
        { category: 'Asia', title: 'China' },
        { category: 'Europe', title: 'Denmark' },
        { category: 'Europe', title: 'England' },
        { category: 'Europe', title: 'France' },
        { category: 'Europe', title: 'Germany' },
        { category: 'Africa', title: 'Ethiopia' },
        { category: 'Africa', title: 'Nigeria' },
        { category: 'Africa', title: 'Zimbabwe' },
      ];
      $('.ui.search')
        .search({
          type: 'category',
          source: categoryContent
        })
      ;
    
    • Popup - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in this example.

    • Popup - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). See this explanation

    To preserve functionality movePopup default has remained as true (moving the popup to the same offset context), however now setting movePopup: false should now always position correctly. Be sure to use movePopup: true to avoid issues with ui popup inside menu, input or other places where it may inherit rules from its activating element or its context.

    • Transition - Adds new glow transition for highlighting an element on the page, and zoom animation for scaling elements without opacity tween.

    • Modal - Modal has been rewritten to use flexbox. No need to call refresh() to recalculate vertical centering.

    • Modal - Modals now have a setting centered which can be used to disable vertical centering. This can be useful for modals with content that changes dynamically to prevent content from jumping in position.

    Minor Enhancements

    • Theming - Added global variables for reassigning normal and bold font weights for custom font stacks. Thanks @jaridmargolin #6167
    • Search - Category results now has exact setting matching dropdown for fullTextSearch preventing fuzzy search
    • Search - Category results will now responsively adjust title row if titles are long instead of forcing a title width
    • Dimmer - Dimmers now have centered content with a single wrapping content element.
    • Modal - You can now modify closable setting after init Thanks @mdehoog #3396
    • Accordion - Added onChanging callback for accordion that occurs before animation in both directions Thanks @GammeGames #5892

    Tiny Enhancements

    • Popup - arrowBackground now inherits from background #6059 Thanks @devsli
    • Popup - Adds new variable headerFontWeight
    • Search - Search now has responsive styles for mobile to prevent results being large than page width.

    Bugs

    • Modal - Modal autofocus setting now checks to see if currently focused element is in modal, avoiding issues where focus could be set in onVisible or onShow
    • Menu - Fixes big and huge sizes being swapped in menu Thanks @jeremy091 #5902 #5899
    • Table - Fixes tr not having correct border on first row when using multiple tbody Thanks @Mlukman #4458
    • Popup - Popup will now use content specified in settings before title attribute #4614 Thanks @aaronbhansen
    • Form Validation - Fixes bug where on: 'change' would still show validation prompts on blur when using inline: true #4423 Thanks @avalanche1
    • Dimmer - Fixes issue with inverted dimmer with content having wrong text color Thanks @rijk #4631
    • Images / Transition - Fixed issue where ui images would show nested images with transition hidden as block (Fixes sequential img animation demo in docs)

    Doc Updates

    • Icons - Icon documentation now has a search that will copy the relevent icon html to clipboard
    • Icons - Icon documentation now lists publicly all icon aliases

    Doc Bugs

    • UI Examples - Fixe some improper html in UI examples included with repo #6127 Thanks @perdian
    • Admin - Fixes bug in admin script that caused leaked global vars Thanks @esbena #6136
    Source code(tar.gz)
    Source code(zip)
  • 2.2.14(Jan 29, 2018)

    Critical Bugs

    • Form - Fixes issue where radio checkbox would not return correct value from get values Thanks @tincdev #5713 #6043
    • Modal - Fixes issue where an oversized modal would appear behind an existing modal when using allowMultiple: true and a second modal that is larger than the screen height. #2423

    Enhancements

    • Button - YouTube's red color now matches their current brand guidelines Thanks @hammy2899 #6110
    • Flag - Adds missing flag for England Thanks @zyzniewski #5944
    • Reveal - ribbon label can now work with reveal #5681
    • Dropdown - Added new setting ignoreCase (defaults to false) that will prevent values from being added that match existing values (case insensitive). This is particularly useful when using allowAdditions for tagging to not allow case insensitive matches.
    • Site - Site theme now includes @customScrollbarHeight and specifies a default horizontal scrollbar height Thanks @jayphelps #5749

    Bugs

    • Checkbox - Fixes issue where toggle checkbox box shadow was missing Thanks @banandrew #5096
    • Dropdown - Fixed issue where dropdowns could incorrectly open upward and leftward opening when using context setting due to an incorrect offset calculation. Thanks @dannyBies #5974 #5366
    • Form Validation - Fixed issue where default prompts for contain and doesntContain rules were swapped. Thanks @xiongyu-git #5530
    • Visibility - Fixes issue where bottomPassed and topPassed would not fire under some conditions
    • Dropdown - Fixes issue where dropdowns might accidentally animate closed two times when quickly tabbing through fields
    • Popup - Fixed an error which could cause popup not to move to right offset context when using a different target setting.
    • Dropdown - Fixed issue where using ui input in a dropdown menu could cause the input to be too wide in some cases Thanks @banandrew #5085
    • Menu / Popup - Fixed issue where inverted menu rules would cause popup inside a menu to have incorrect link styling in link list Thanks @banandrew #5585 #5603

    Build Tools

    • CSS Build - Fixed issue where package gulp-clone was only set to use > 1.0 causing issues with gulp builds due to upstream error #6067
    Source code(tar.gz)
    Source code(zip)
  • 2.2.13(Aug 7, 2017)

    Hotfix (2)

    • Install - Some interactive install script issues may be fixed. Forked gulp-prompt plugin to allow for updated inquirer version
    • Build Tools - Fixes typo causing fix for build tools to fail #5391
    Source code(tar.gz)
    Source code(zip)
  • 2.2.12(Aug 7, 2017)

    Major Enhancements (1)

    • Dropdown - Dropdown can now have values specified in javascript when initializing.This should simplify cases where dropdown contents are contingent on other fields, for example listing sub categories. You can see some examples here and in the usage section of dropdown docs

    Critical Bugs (3)

    • Dropdown - Fixed regression that caused sub menu dropdown inside ui menu to always appear on left edge of dropdown introduced 2.2.11 #5542
    • Popup - Fixed a regression with popup in 2.2.11 that caused popups to appear out of place in some cases due to incorrect calculation of offsetParent #5549 #5597 #5590
    • Build Tools - Fixes issue with deprecated uglify setting that could cause build tools to fail with the following error:
    GulpUglifyError: unable to minify JavaScript
    Caused by: DefaultsError: `preserveComments` is not a supported option
    

    Enhancements (2)

    • Dropdown - Dropdown mutation observers now watch to see if the entire <select> DOM node is replaced with a different select, and not just if new <option> are added
    • Modal - Modal will now take into account absolutely positioned elements inside a modal when determining if scrolling is necessary. #5578 Thanks @lulalala

    Bugs (4)

    • Dropdown - Fixed an issue where css rule for focused default text was not being applied for multiselects #5633
    • Dropdown - Calling dropdown methods on <select> will now work when using setting behavior to set settings after load #3744
    • Header - Fixes vertical alignment
    • Header/List - Fixes issue where icons appear slightly offset with text due to line-height offset fixes no longer being necessary in modern browsers.
    • Modal - Fixes issue where init order matters when multiple modals are shown at same time and allowMultiple: true is used #5559
    Source code(tar.gz)
    Source code(zip)
  • 2.2.11(Jul 11, 2017)

    Critical Bugs (5)

    • Dropdown - Fixed issue where using down key to re-open dropdown when using search selection dropdown would start at the top element instead of jumping to selected element #4506
    • Modal - Using multiple modals with different inverted blurring or closable settings will now function normally in all cases #4368
    • Modal - Fixed issue where modal refresh was being called on modals even if they are hidden, causing display issues when multiple modals are shown. Thanks @p2kmgcl #5319
    • Form Validation - Fixed issue where radio was not being included in onFailure values if not set #5064
    • Sticky - Fix issue where sticky would cause page to shift when context height was determined by sticky's height in position: static; #3430

    New Features (6)

    • Dropdown - Dropdowns will automatically detect when they are offscreen to the right and will open leftward instead Thanks @Graveheart #4211
    • Form Validation - Added add rule add field, remove rule, remove field to programmatically and and remove validation rules from form validation #4267 #5253
    • Site - Site now includes custom styles for in-page UI scrollbars (but not actual page scrollbar) by default in WebKit/Chrome. Components with inverted content like dimmer include an inverted scrollbar. You can disable this by setting @useCustomScrollbars: false in your site.variables
    • Modal - Adds new scrolling content variation to have a modal with content that scrolls
    • Sticky - Sticky now includes a new setting setSize to determine whether it should set content size on stick to the size before sticking (fixed content uses different positioning system) #4360
    • Reset - Upgrades to normalize.css 7.0 Thanks @ivantcholakov #4647
    • Modal - Adds tiny and mini sized modals Thanks @Banandrew #5123
    • Steps - Steps now include an unstackable variation Thanks @TemaSM #3714

    Enhancements (4)

    • Build Tools - All Gulp/NPM dependencies have been updated to their latest versions
    • Dropdown - Improved spacing on image inside menu item and for selected text
    • Popup - Added bind clickaway bind touch close bind close on scroll behaviors to make it easier for on: 'manual' popup to specify behavior
    • Popup - Separated className setting for visible into visible and popupVisible, this way you can remove visible indication on activating element without modifying popup visibility.

    Bug Fixes (19)

    • Table- Fix inverted table header color not applying properly to sortable table Thanks @Banandrew #5303
    • Dimmer - Changing closable or inverted settings dynamically with setting will now modify settings correctly on next show/hide without re-initialization
    • Dropdown - Fix dropdown arrow being slightly off center due to em calculation being incorrect due to differences in relative em
    • Dropdown - Fix loading dropdown icon position being slightly offset
    • Dropdown - Fixed issue where search selection dropdown would reset list to top after selection when re-opening dropdown #4506
    • Icon - Changed content icon to use an existing alias sidebar icon, as it is most common use case and prevents naming collisions with content of elements Thanks @philrykoff #4574
    • Sidebar - Removed use of ios browser detection, and use of -webkit-overflow-scrolling: touch;. iOS no longer has sizing issues when displaying sidebar content in latest iOS.
    • Search - Fixed issue where searchDelay could cause results to appear after search had lost focus.
    • Sticky - Fixed edge case where using offset setting, sticky element would not internally scroll if the rail contents (without the offset setting) would fit on screen
    • Popup - Fixed bug where supports svg was not working correctly due to incorrect comparison to undefined Thanks @mathiasrw #4544
    • Input - Fix issue where transparent input had a border radius and could cut off descendors #5281
    • Input - Fixes disabled style being applied twice on input Thanks @levithomason #5284
    • Message - Fix issue with compact icon message not appearing compact #4759
    • Menu - Fixed issue where left menu and right menu did not display correctly in stackable menu on mobile Thanks @BleuDiamant @Traverse #3604 #5116
    • Menu - Fixed issue where (x) item attached menu was off by 1 pixel due to a css inheritance issue #4248
    • Popup - Fixed issue where popup would incorrectly add itself to the wrong offset context when using popup and target setting together in cases where the target has a different offsetParent than the activating element.
    • Segment - Fixed issue where using colored segment e.g. red segment inside segments would not work when :first-child #4013
    • Sticky - Fixed an issue where ui sticky used with a percentage based width would not resize properly if the content size of container changed when "stuck" #4360
    • Dimmer - Fixed typo causing body dimmer to add unnecessary position: relative; Thanks @jinyangzhen #4707

    Doc Fixes (3)

    • Form - Updated docs to include new examples of adding/removing validation rules
    • API - Clarified in docs that all AJAX parameters can be passed to API
    • Form Validation - Added undocumented add prompt to list of behaviors
    Source code(tar.gz)
    Source code(zip)
  • 2.2.10(Mar 28, 2017)

    Critical Bugs

    • Dropdown - Fix search input inside dropdown menu causing dropdown to close before selection when selecting an item #5113
    • Dropdown - (IE11 Only) Fixed issue where dropdown re-opens immediately after closing when using a search inside menu. #4237

    Bugs

    • Button - Fixes @basicActiveBoxShadow being used incorrectly in basic button variables
    • Visibility - Visibility events now fire correctly when using context other than body that has overflow-x or overflow-y set to auto or scroll
    • Dropdown - Fixes an issue where dropdown would not correctly open upward at bottom edge of the screen when using a context with overflow-x or overflow-y set to auto
    • Modal - onDeny and onApprove callbacks can no longer occur multiple times if you rapidly click a approve/deny button in a. #4479

    Enhancements -Form - Credit card validation now no longer fails validation with dashed credit card values #5122 Thanks @neokio

    Bugs

    • Visibility - Fixed bug where using visibility with context setting on a scrollable context (with overflow) would cause callbacks to fire incorrectly
    • Visibility - Fixed bug where top passed and bottom passed would appear as incorrect values if using settings from get element calculations when element is off screen.
    Source code(tar.gz)
    Source code(zip)
  • 2.2.9(Feb 21, 2017)

  • 2.2.8(Feb 21, 2017)

    Important Note

    Some quirks have been resolved that may cause changes for upgrading users who were expecting these behaviors

    Form Validation

    If you are using form validation, previous to 2.2.8 calling is valid would trigger UI updates. This behavior now no longer triggers UI updates, and will only return a boolean whether form is valid,

    To trigger UI updates you can call validate form. Additional form behaviors have been added as well. See the new documentation on programmatic validation for more examples.

    Dropdown

    multiple selection dropdown no longer automatically adds the currently selected value when you "alt-tab" or blur the field, even when forceSelection: true is set.


    Major Enhancements

    • Icons - Updates Font Awesome to 4.7.0 Always the man @BreadMaker #4766
    • Dropdown - Added new setting filterRemoteData, when set to true API will be expected to return the complete result set, which will then be filtered clientside to only display matching results. Thanks @enix223 #4815
    • Dropdown - Fixed issue where using some usage of special characters like \ could cause dropdowns to not work. #4688 #4692
    • Tab - Added setting loadOnce, which when enabled only calls remote endpoint for tab data on first load and leaves the DOM undisturbed afterwards. #2534

    Critical Bugs

    • Dropdown - forceSelection setting will no longer cause highlighted value in multiselect to be selected on blur when using a multiple selection dropdown #4041 #4516
    • Dropdown - Dropdown using search input inside of menu are now tabbable #4490
    • Search - Fixes issue where empty results message can still appear when using setting showNoResults: false #4616
    • Sidebar - Fixed bug where sidebar in iOS would show incorrect background when opening sidebar if page is less than 100% height #4264

    Critical Doc Fixes

    • Visibility - Added documentation for onOnscreen and onOffScreen, two very important callbacks that occur when an element is or isn't in currently scrolled view.

    Enhancements

    • Items - Added unstackable variation to prevent items from stacking on mobile #2901
    • Search - Added new parameter callback to behaviors query, show results, hide results, and search remote to allow a function to be called after completion.
    • Form Validation - Rules now properly supports identifiers with special characters like brackets, e.g. name="user[name]" Thanks @mzygmunt #4163
    • Search - esc key now hides results and prevents them from being displayed again until form field is blurred

    Build Tools

    • NPM - Removed dependency on tarball, packaged new patched WrenchJS under Semantic-org as a new package.

    Bugs

    • Button - Fixed issue where css specificity caused icon buttons to not center correctly #4487
    • Dropdown - Fixed bug where clicking on a dropdown's dropdown icon when using remote data would not open menu #4041
    • Dropdown/Search/Checkbox - Removes use of deprecated dispatchEvent DOM APIs for generating simulated events
    • Dropdown - Fixes issue where left pointing dropdown and right pointing dropdown appear styled incorrectly when opening upward #4896
    • Dropdown - Fixed issue where using fullTextSearch: 'exact' would still fuzzy search on value Thanks @ rminnett #4651 #3424
    • Dropdown - Fix bug where scrolling menu or scrolling dropdown would have excessive right padding by removing scrollbar width from calculation (no longer necessary in modern browsers)
    • Comments - small, large and other comment sizes now default to global size variables.
    • Dropdown - Fixed issue where selectOnKeydown with html content would cause only non html content to display in text until blur
    • Form Validation - Fixes issue where decimal validation would allow multiple . in value
    • Form Validation - Fixes js error caused by revalidating inputs without validation rules #4497 #4547 Thanks @cbxp
    • Header - Fixed issue where using image icon or image outline icon would cause incorrect display within ui header due to namespace collision with ui image #4145
    • Input/Dropdown - Fixed rounding error causing vertical alignment of dropdown, search, input to sometimes appear off by 1 pixel #4279
    • Segment - Fixed padded vertical segment very padded vertical segment mistakenly receives horizontal padding #3012
    • Visibility - Images that use $('img').visibility({ type: 'image'}) will no longer animate a second time if re-initialized.
    • Form Validation - Fixed issue where using bracketed values, or other special characters could cause errors with selectors #4163 #4164

    Documentation

    • Comments - Added missing size variations to comments docs #4450
    • Typos - Thanks to everyone who has submitted typo/grammatical PRs, much appreciated
    Source code(tar.gz)
    Source code(zip)
  • 2.2.7(Dec 21, 2016)

    Build Tools

    • Autoinstall - Fixes issue where autoinstall: true was not copying build files during npm install Thanks @AnsonT #4430
    • Dependencies - Updates build dependencies in package.json
    Source code(tar.gz)
    Source code(zip)
  • 2.2.6(Oct 28, 2016)

    Bugs

    Version 2.2.5-6 - October, 27, 2016

    Bugs

    • Tab - Hotfix for accidental use of ES6 let. This is cause of the bump to 2.2.6
    • Search - Fixed issue where pressing "up" key when no results selected would cause bottom result to be selected
    • Search - Fixed issue where input may attempt to refocus when search element is immediately removed from browser's DOM after a result is clicked.
    • Flat Theme - Fixes inverted input color
    Source code(tar.gz)
    Source code(zip)
  • 2.2.5(Oct 28, 2016)

    Bugs

    • Search - Fixed issue where pressing "up" key when no results selected would cause bottom result to be selected
    • Search - Fixed issue where input may attempt to refocus when search element is immediately removed from browser's DOM after a result is clicked.
    • Flat Theme - Fixes inverted input color

    Enhancements

    • Tab - Added new tab cache type DOM which preserves the final DOM state after scripts rendering. This can be used to avoid re-running returned <script> tags on each cached read #2534
    • Checkbox - Adds additional variables for styling toggle checkbox on/off state
    • Sticky - Adds container setting. This can be used to specify the offsetParent of the sticky element and avoid having to calculate on initialization (improving performance)
    • Progress - Progress now includes transitionEnd failback for progress bar animations, this will prevent labels from continuing to be updated if the transitionEnd css callback does not fire correctly
    • Transition - You can now specify data-display to specify the final display state for an animation in cases that it is detected incorrectly (you can also pass in as a setting)
    Source code(tar.gz)
    Source code(zip)
  • 2.2.4(Aug 25, 2016)

    Critical Bug

    • Search - Fixed issue where keyboard navigation for search was broken in 2.2.3 due to regression #4469

    Bugs

    • Build Tools - Removed unnecessary gulp-minify-css package from deps #4463

    Enhancements

    • Message - Added additional variables for @padding
    Source code(tar.gz)
    Source code(zip)
  • 2.2.3(Aug 22, 2016)

    Enhancements

    • Form Validation - Bracketed notation can now be omitted for rules, instead passing in bracketed values with the value parameter #3313
    • Dropdown - Using search selection with selectOnKeydown will now highlight the partial search matching the currently keyboard selected value
    • Modal - Modal now includes setting to enable/disable keyboard shortcuts
    • Modal - Modal will now focus first tabable element, not just input #4370

    Bugs

    • Comments - Adds missing sizes (mini, tiny etc) Thanks @ilanus #4408
    • NPM - Fixed package.json to allow either jQuery 2.x or 3.x #4254
    • Button/Dropdown - Fixed issue where ui dropdown button could have incorrect spacing for dropdown icon Thanks @ilanus #4408
    • Form/Segment - Fix typo causing pointer-events: none no to work on loading segment and loading form *Thanks @YamiOdymel and @ilanus #4403
    • Icon - icons can now receive link styling Thanks @tbracken #4399
    • Button - Fixed vertical buttons with only 1 button having incorrect border radius Thanks @Denhai #4107
    • Grid - Fixed issue where (x) aligned column inside a (x) aligned row would not properly apply the column alignment
    • Form - Fixed issue where disabled fields with radio inputs would not correctly dim the label Thanks @louwers #4366
    • Menu - Fixed issue where dropdown in vertical menu would not correctly open upward when no space below Thanks @gdaunton [#4150 #4156
    • Dropdown - Using search selection withselectOnKeydown` and text content that includes html, will not apply html content (like images) to the text until dropdown blur, making sure that content can align correctly with the partial search content of the search input (which cannot include HTML)
    • Dropdown - Fixed issue where dropdown clear would not remove active state when useLabels: true and multiple dropdown Thanks vinh123456789 #4275 #4366
    • Dropdown - dropdown icon no longer relies on stopping event propagation. This means using the dropdown icon will now cause other dropdowns to correctly hide. #3998
    • Dropdown - Fixes action: select not working correctly since 2.2 due to incorrect use of new function signature. #4183
    • Dropdown - Fixed typo causing selectObserver mutation observer not to disconnect Thanks @Paklausk #4311
    • Icon - Fixed missing dribbble icon due to incorrect count of "b" (should be 3). #4185
    • Icon - Fixes grab icon and television icon not appearing correctly #4178
    • Form - input styles now apply to type="file" thanks @coldfire79 #4074
    • Popup/Menu - Fixed issue where popup would not appear correctly when nested in menu in some ways.
    • Icon - Fixes talk icon not working correctly Thanks @anantogosh #4354
    • Transition - Removed unreachable code Thanks @basarat #4225
    • Grid - Fixed alignment in `centered justified grid** Thanks @bretto36 #4224
    • Popup - Fixed issue where observeChanges: false setting in popup would not prevent mutation observers
    Source code(tar.gz)
    Source code(zip)
  • 2.2.2(Jul 7, 2016)

    Bugs

    • Shape - Fixed issue where shape was animating incorrectly when using jQuery 3.0, due to secret changes in how width are calculated on elements with transform
    • Dropdown - Fixed "pointer" cursor appearing in hitbox above search input in search selection, now all input area will appear with "text" input cursor
    • Dimmer/Modal - Fixed a bug which could cause a modal's dimmer to not obey inverted: true or blurring: true when initializing modals with then afterwards without either setting.
    Source code(tar.gz)
    Source code(zip)
  • 2.2.1(Jun 27, 2016)

  • 2.2.0(Jun 26, 2016)

    Project Features

    • jQuery - Semantic UI is now fully compatible with jQuery 3.0
    • Webpack - All css is now webpack-compatible
    • NPM - NPM dependencies have all been updated to latest stable releases

    New UI Features

    • All UI - Added new setting silent to all modules which allows you to disable all console output including errors. This can be useful for preventing known errors, like a popup which cannot place itself on screen, or sticky content which initializes before it is visible #3713
    • All UI - All UI now include all sizing variations, mini, tiny, small, large, big, huge, massive. Headers remain with only 5 sizes small-huge to match H1-H5
    • All UI - Components that use event handlers on document, body, or a settings.context now all use DOM mutation observers to detect removal and prevent memory leaks
    • Button - Added compatibility with primary secondary positive negative buttons with the basic styling variation. #3756
    • Card - Added raised card variation Thanks @yordis #2955
    • Dropdown - All dropdowns, not just selection dropdown, will now select the first menu item that starts with a pressed keyboard key, for example "N" will select "New"
    • Dropdown - Dropdown now changes user selection on keyboard shortcuts immediately, this will save the extra enter key press to confirm selection in most cases. To enable previous pre 2.2 selection style use the setting selectOnKeydown: false
    • Dropdown - Dropdown will now automatically focus on search inside of a dropdown menu after it is opened.
    • Dropdown - Multiple select dropdown now sizes current dropdown input based on rendered width of a hidden element, not using an estimate based on character count. This means search will never break to a second line earlier than would normally fit in current line.
    • Icons - Icons now use the latest Font Awesome 4.6.3 Icons. 80+ new icons+ are included. Thanks @BreadMaker for the PR and @davegandy for the font!
    • Popup - Added new tooltip popup type that works without javascript. Tooltips can specify positioning and some variations using data attributes, and will handle positioning automatically with CSS only.
    • Progress - Progress now uses a polling interval for updates. Rapidly updating the progress bar over a period quicker than the animation duration (for example with xhr onprogress events say every 50ms) will now appear smooth as butter.
    • Table - definition table now includes additional class names for forcing, or ignoring definition cell styles

    New Settings

    • Build Tools - Added new autoInstall option to allow for Semantic to be installed without user interaction. See docs explanation for how to use. #3616 Thanks @algorithme
    • Dropdown - Added fullSearchSearch: 'exact' setting, which requires exact matches for dropdown values #3085 #3994 Thanks @ShawnCholeva
    • Dropdown - Added new setting for search selection hideAdditions this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new state empty which will format an active dropdown with empty results. #3791
    • Dropdown - Adds new allowReselection option to trigger onChange events even when reselecting same value
    • Dropdown - Adds new setting minCharacters which sets the minimum number of characters required to start filtering results #3886
    • Form Validation - Added depends validation rule setting which will only validate a field if another specified field is not empty
    • Popup - Added new setting boundary and scrollContext. boundary lets you specify an element that the popup will try to position itself to be contained inside of. scrollContext lets you specify the element which when scrolled should hide the popup
    • Popup - Added new settings observeChanges, which is enabled by default. This will add special mutation observers to trigger destroy when the element is removed from the document, preventing memory leaks.
    • Progress - Added onLabelUpdate callback, this can be used to specify the exact text that should appear on the actual progress update, perhaps based on some external conditions
    • Rating - Added new setting fireOnInit for rating, which defaults to false. When set to true onRate will fire when rating is initialized #3712
    • Search - Added a new option selectFirstResult, which defaults to false. Will automatically highlight first result on search
    • Search - Search now includes a showNoResults setting for determining whether no results messages should be shown
    • Shape - Shape now lets you specify next side width using setting width, can use next or initial to specify whether it should use old or new side size
    • Tab - Added new setting cacheType, can either be html or response (default). HTML will cache resulting html after callbacks, response will cache the original response so that it can be played back identically on future loads #2534
    • Tab - Added new option deactivate, defaults to siblings which will only deactivate tab activators that are DOM siblings elements to the activating element. Setting it to 'all' will deactivate any other tab element initialized at the same time.
    • Visibility - Added onFixed and onUnfixed callbacks for visibility type: 'fixed'
    • Visibility - Added onLoad and onAllLoaded callback for type: 'image' visibility
    • Visibility - Added zIndex setting for specifying zindex with type: 'fixed' #3370

    New Behaviors

    • Dropdown - Added new convenience method restore placeholder text
    • Image - transition hidden image now shows correctly as visibility: hidden; and not display: none. This will allow offset with visibility and sticky to work more seamlessly. hidden image will still remain display: none;
    • Progress - Added progress is complete for returning whether success, warning, or error conditions are met

    CSS Enhancements

    • All UI Extended variables which return exact pixel values in em (@relativePX and @px) up to 40px to allow for simple theming with exact values
    • Button - Added variables for configuring disabled background image and box shadow.
    • Site - Added colored box shadow defaults. ui message now includes individual colored border shadows based on new site defaults.
    • Site - Added new @inputColor and @inputPlaceholderColor global variables that now control placeholder text styles across all components.
    • Table - definition table now supports definition variation to specify definition styles on an element that is not :first-child
    • Table - definition table now supports ignored variation to force a first-child to ignore its default definition stylings

    Critical Bug Fixes

    • All UI - Using component('setting, {}) to add multiple settings as an object literal, for example error: {}, will now deep extend the existing object instead of replacing it.
    • API - beforeSend would not correctly cancel request when return false; is used in callback. #3660
    • API - cache: 'local' would not return the localstorage cached results in some cases
    • Divider - Descenders like "g" are cut off in horizontal divider #3585
    • Dropdown - forceSelection will now automatically select values with multi dropdowns. When using userAdditions setting it will now automatically tokenize the current entered value
    • Dropdown - search selection would not let you move back in an entered search string with left arrow #3596 Thanks @Sanjo
    • Dropdown - Fixed issue where value set using javascript DOM metadata would be cleared when a message or user addition triggered refresh #3879 #3622 Thanks @mdehoog
    • Form Validation / Dropdown - Using "enter" key in a search dropdown could cause a form to be submitted #3676
    • Form Validation - Fix issue with some foreign email addresses with extended charsets causing email validation to fail #3955 #3755
    • Form Validation - Revalidating a field on: blur could cause fields not yet interacted with to be validated #3606
    • Form - Fixed issue with (x) fields and equal width fields where middle rows would be slightly smaller because they include both left and right padding in % width. (Edges only have one side padding). Field groups now use negative margins instead.
    • Popup - Fixed issue where clicking element inside popup removed from DOM (like clicking a multi select label) would cause popup to close #3887
    • Rail - Fixed incorrect width for close rail and very close rail caused by variable addition with mixed units px + em #3835
    • Search - Fixed bug where a previously XHR query could cause the next one to fail depending on the latency of the request #2779
    • Search - Fixed an issue where onResult returning false would not prevent the search menu from hiding. Clicking on an empty results message will also no longer close the search results. #3856 #3870
    • Sticky/Visibility - Added mutation observer to teardown element with destroy if removed from DOM context, fixing a possible memory leak
    • Video - Fixed issue with .video('change') behavior not properly changing video.

    Bugs

    • API - Using onResponse with dataType other than JSON or JSONP would cause an error. (Not allowing plain text responses to be translated) #3653
    • Build Tools - Fixed gulp help text incorrect for RTL tasks in build tools #3858
    • Button - right icon like right arrow icon would have additional margin inside an icon button #3525
    • Button - Fixed issue where disabled loading button would not remove pointer-events #2933
    • Button - Fixed typo in green inverted button #3873
    • Button/Dropdown - Button dropdowns using default text no longer receive incorrect font styling for placeholder text
    • Checkbox - Fixed issue where docs refer to onEnable and onDisable with checkbox but callback was called onEnabled and onDisabled, both callbacks will now be valid until 3.0 #3761 #3763
    • Checkbox - Radio buttons received indeterminate styles when user has not yet interacted with the page in Chrome
    • Dropdown - apiSettings was not defaulting to use cache: 'local' as specified in the docs
    • Dropdown - get value would not return correct value when value was blank #3766
    • Dropdown - Added 1px offset for current text so that the blinking text position cursor does not overlap first pixel of underlayed text.
    • Dropdown - Dropdown would open when an label delete x was clicked when not using search selection #3789
    • Dropdown - Dropdowns no longer re-open on selection when nested inside of a <label> #3917
    • Dropdown - Dropdowns with sub-menus would not properly activate on mobile #3183
    • Dropdown - Fixed bug where using action: 'hide' could cause text value not to be passed to onChange callback
    • Dropdown - Fixed issue where values with " (double quotes) would not work with a dropdown using a select, because value would not be encoded as html entities
    • Dropdown - Long dropdown text entry with allowAdditions would cause input to mistakingly drop to next line early #3743
    • Dropdown - Regenerated dropdown will no longer ignore disabled property #4010 Thanks @eymengunay!
    • Dropdown - Search selection would lose search input focus when clicking on a choice #3790
    • Embed - API setting is now disabled by default
    • Form Validation - Fixed issue where initializing form multiple times would not properly call destroy removing previous settings #3798
    • Form - Fix equal width fields sometimes not including right field spacing on mobile #3913
    • Form - Fixed issue where inline field was not being correctly inverted in color with inverted form #4004 #4005 Thanks @tbracken
    • Form - Grouped fields and field would cause different margin collapse, making fields include larger gaps between content #3717
    • Form - Remove deprecated size() method in prompt #3655 Thanks @SimonArdrey
    • Grid - centered content would cause justified content to appear aligned left. #3496
    • Grid - Fixed issue where vertically divided grid would have top margin in first row group
    • Icon - Sizes smaller tham small were using with rem #3782
    • Input - Fixed :active styles appearing on disabled input, when input is disabled using disabled property #3907
    • Input - Fixes issue with dropdown or button on the left side of an action input not properly rounding
    • Label - Fixed margin when right floated element precedes a top attached label
    • List - relaxed and very relaxed lists included unnecessary padding on the first and last items #3710
    • List - Bullets would be affected by font weight, or whether the list item was a link #3715 #3721
    • List - Divided lists had unnecessary padding on first and last items, in both horizontal and vertical layouts #3710
    • Menu - stackable menu with left/right menu or item would incorrectly be floated when stacked. #3604
    • Menu - tabular menu now has correct bottom margin #4167
    • Menu - @dividerSize was not being used in vertical menu #3781
    • Menu - vertical text menu no longer includes left or right padding, but will now sit flush with content.
    • Message - Fixes compact message appearing as block when inside a form #3343 Thanks @bcroq
    • Modal - RGB values set for dimmer background-color were not being correctly interpreted #3665 Thanks @larsbo
    • Modal/Dimmer - Fixed issue with destroy not properly removing events from dimmer #3200
    • Popup - checking instanceof SVGGraphicsElement caused error in IE11 #3043
    • Progress - Progress onSuccess, onError, and onWarning callbacks now occur after the animation completes for the state change.
    • Rating - Fixed ui rating to not used outlined star in basic variation, instead using a lighter filled in star for increased visibility #3730
    • Rating - rating does not fire onRate when rating is initialized #3712
    • Search - Added refresh behavior for search to refresh selector cache. Cache will automatically refresh after API results received
    • Search - Fixed issue where href was not pulling correctly on search click when the result was an a itself. #3409
    • Segment - Fixed segments to not clip border radius when only a single segment is included
    • Segment/Message - top attached message has no border when attached to segment #3619
    • Statistic - statistic receives incorrect size when using tiny large etc inside a statistic group #3116
    • Step - Fix incorrect bottom margin on top attached steps
    • Table - striped selectable table would not correctly show hover color on striped rows
    • Visibility - Using type: fixed will now correctly remove all special classes and placeholder content on destroy #3548

    Changes

    • Sizing - mini the smallest size has been modified to align to 11px instead of previous 10px at base em size

    Docs

    • Progress - Added new examples to progress
    • Progress - Added all available behaviors with progress
    • Form - Added example of using custom rules with form
    • Build Tools - Added explanation of using SUI with CI, and auto-install in "recipes" section.
    • Build Tools - Added explanation of how to build RTL in "recipes" section
    • Layouts - Added "attached" example showing content attached to other content
    Source code(tar.gz)
    Source code(zip)
  • 2.1.8(Jan 8, 2016)

    Critical Fix

    • Install - This fixes a regression causing users with NPM 2 from using Semantic UI, caused by removing the deprecated peerDependencies which are necessary for NPM2 install to function correctly. #3511

    Minor Fix

    • Flag - Adds Scotland and Wales flag #3494 Thanks @edumucelli
    • Install - Fixes post-install scripts not exiting with correct return values #3515 Thanks @Jeff-Tian
    Source code(tar.gz)
    Source code(zip)
  • 2.1.7(Dec 19, 2015)

    Closed Issues List

    Enhancements

    • API - All responses fulfilled with settings (like mockResponse) will now receive a settings object with all values resolved. For example url will be /user/2/ and not user/{id} in the callback. - #3466
    • API - API now allows the use of settings response and responseAsync to replace mockResponse and mockResponseAsync. The use of "mock" may not represent the most common use case which is providing a response from a third party source. (These changes are purely cosmetic and no underlying behavior has changed) - #3491
    • Popup - Adds onUnplaceable callback when element cannot be placee inside visible viewport #3388

    Bug Fixes

    • Build Tools - CSS build will now correctly call callback after both packaged files are created (compressed and uncompressed) Thanks @youngjay #3405
    • Flag - A flag with no country set will no longer display an incorrect country flag. Thanks @space-alien #3333
    • Form - Fixed issue where text would turn transparent inside a loading form #3122
    • Menu - Fixed 1px offset when attached segment follows tabular menu (max of 2 consecutive segments) #3479
    • Header - sub header used inside a header now correctly forces block styling #3020
    • Popup - Fixed is visible, is animating, and is fluid to always return true/false and not the DOM element. #2781
    • Popup - Fixed issue with onEnable callback being defined with name onEnabled and onDisable with onDisabled in default settings, causing an error. To preserve backwards compatibility, the mispelled callback name has been left, but the bug has been fixed. #3148
    • Search - Search now correctly hides menu when an error message inside results is clicked. #3039
    • Sidebar - Fixed css rule issue causing very thin sidebar to not work #3300
    • Sidebar - Sidebar no longer includes transform rules on child elements, this was causing layout issues in some cases (for example dropdowns in sidebars) #3306
    • Sticky - Renames variables used to account for scroll offset internally for greater code clarity
    • Transition - Fixes noAnimation error to more reasonably announce that the element is "not in the DOM" #3040
    Source code(tar.gz)
    Source code(zip)
  • 2.1.6(Nov 6, 2015)

    Bug Fixes

    • Checkbox/Dropdown/Search - Fixed issue where dropdown/checkbox change events were not bubbling. (Dispatched events were swapped to use native document.creatEvent in 2.1.5 unfortunately the flag to bubble events was mistakenly off.)
    Source code(tar.gz)
    Source code(zip)
  • 2.1.5(Nov 1, 2015)

    Docs Enhancements

    • Examples - All code examples now have a "copy to clipboard" button Thanks @xiwc and @zenorocha for clipboard.js

    Minor Enhancements

    • Form - Adds equal width form and equal width fields for simpler grouped fields
    • Modal - onHide callback can now cancel event by returning false #3168 Thanks @mdehoog
    • Dropdown - Added onLabelRemove callback that allows value removal to be cancelled by callback Thanks @goloveychuk
    • Table - Added selectable on table cell, allowing for full table-cell links
    • Popup Added three new variables for arrow background color based on position, top, center or bottom. This makes it easier to use gradient backgrounds with popups and still match arrow colors.
    • Popup - Added behaviors get popup and change content to more easily determine popup from activating element and change text

    Major Bug Fixes

    • Checkbox/Dropdown/Search - Fixed issue where using .trigger('change') would not fire native change event. Only triggering event handlers attached with jQuery #3108
    • Transition - Fixed bug where static transitions (those that dont animate in/out of view) would not fire onComplete event
    • Sticky - Fixes bug where sticky would stick at incorrect times when using a different scroll container than body and scrollTop is not 0 on page load.

    Bugs

    • Divider/Step/Modal/AD - Fixes 1px jump at @mobileBreakpoint caused by incorrect edge conditions in media query #3180 THanks @mdehoog
    • Dimmer - Dimmer can now works correctly with opacity: 0 #3167 Thanks @mdehoog
    • Dropdown - Fixed condition where focusing on dropdown would show a blank menu when "no results" was reached and the dropdown was refocused
    • Dropdown - Search dropdowns will now correctly filter by current search term on re-focus
    • Dropdown - Fixed issue where tabindex was being removed incorrectly with selection dropdown in some cases. #3002
    • Dropdown - Added remoteValues as a possible field setting. Allowing users to return API results using arbitrary JSON object groupings. #3080
    • Dropdown - Added ability to pass in keys as a setting, to avoid issues with languages where comma delimiter may be a different keycode #3016
    • Dropdown - search dropdown will now initialize with autocomplete="off" to avoid triggering native autocomplete menu
    • Form Validation - Fixes error on blur or change when using a blank validation object #3131 Thanks @listepo
    • Form Validation - Fixes some issues with form integer validation #3053 Thanks @maturano
    • Form Validation - decimal rule now only matches decimals, to match any number use number rule. #3060
    • Form - Removed divider spacing as part of ui form, this caused inheritance issues when using special divider types #3092
    • Grid - Fixes attached segment 1px offset inside grid column #3226
    • Grid - Fixes some inconsistencies with widescreen only class #3161 Thanks @mdehoog
    • Header - Sub headers now force display: block #3020
    • Popup - Fixes positioning issue when movePopup: false #3213 Thanks @parisholley
    • Popup - Popup now works with svg elements #3043
    • *Progress - Calling reset will now reset value to 0, so increment starts again at 0
    • Search - Fixes onSearchQuery not firing when results are cached Thanks @mnquintana
    • Search - Fixes url parameter not working correctly due to typo in source Thanks @fabienb4
    • Segment - Fixes border on horizontal segment when they are :first-child inside segments group Docs Bugs
    • Thanks to everyone who has submitted PRs for typos, grammatical changes. These are too numerous to count, but really help improve the quality of our docs.
    • Progress - Progress example code no longer shows accidental inline css
    • Sticky - Fixed issue where pressing home/end button would cause sticky to break due to internal logic not allowing immediate jump from bottom attached to top attached, experienced most likely when pressing "home" or "end" key #3011
    Source code(tar.gz)
    Source code(zip)
  • 2.1.4(Sep 13, 2015)

    Critical Bugfixes

    • Build - Fixed issue where using a packaged theme without a site.variables would cause build to fail #3009 #3010

    Enhancements

    • Form Validation - Form validation now supports a brand new shorthand which is simpler to specify #2579
    // expands out using default prompts and identifier matching property label
    $('.ui.form')
      .form({
        fields: {
          name     : 'empty',
          gender   : 'empty',
          username : 'empty',
          password : ['minLength[6]', 'empty'],
          skills   : ['minCount[2]', 'empty'],
          terms    : 'checked'
        }
      })
    ;
    
    • Form Validation - identifier and prompt are now optional for all form validation rules. Default prompt values have been added for all rule types, and identifier will now automatically match on the named value for rule if no ID is specified. #3001 #2579
    • Form Validation - All form prompts now support templates values, {value}, {name}, {ruleValue}, and {identifier} #3001

    Bugfixes

    • Dropdown - Fixed issue with ',' key not being allowed in dropdown due to user tagging shortcut key #3016
    • Message - ui list used inside ui message now aligns properly in all conditions #2958
    • Form Validation - Validation messages in error message group are now correctly removed when invalid field revalidates on blur
    • Label - Labels no longer force single line using word-wrap: nowrap #3006
    • Table - Fixed issue where (x) column segment table was inheriting accidentally inheriting some grid styles
    • Grid - Fixed middle aligned grid not applying to columns #2959
    • Menu - Fixed issue where right menu was not floating correctly inside a menu > container on mobile #2969
    • Button - Fixes right labeled icon button with a right named icon (for example right arrow) having incorrect margin on icon. #2973
    Source code(tar.gz)
    Source code(zip)
  • 2.1.3(Sep 3, 2015)

    Bugfixes

    • Embed - Fixes issue with ?= appearing before parameters instead of ? #2956 Thanks @AgentShark
    • Input - Fixes regression where ui icon input inside forms were not correct width #2953
    • Input - Fixes typo in focused placeholder text color preventing the value from being used #2939
    • Input - action input now correctly show focused border on button side, and avoids duplicating borders
    Source code(tar.gz)
    Source code(zip)
  • 2.1.2(Sep 2, 2015)

  • 2.1.1(Sep 2, 2015)

Owner
Semantic Org
Semantic Organization
Semantic Org
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Dec 28, 2022
The worlds smallest fully-responsive css framework

FLUIDITY A fully responsive css framework that is impossibly small HTML is almost 100% responsive out of the box. This stylesheet patches the remainin

murmurs 1.1k Sep 24, 2022
An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping

Welcome to Ink Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and Ja

SAPO 1.9k Dec 15, 2022
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 156 Dec 8, 2022
HTML Framework that allows you not to write JavaScript code.

EHTML (or Extended HTML) can be described as a set of custom elements that you can put on HTML page for different purposes and use cases. The main ide

Guseyn Ismayylov 171 Dec 29, 2022
One framework. Mobile & desktop.

Angular - One framework. Mobile & desktop. Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScr

Angular 85.7k Jan 4, 2023
Ember.js - A JavaScript framework for creating ambitious web applications

Ember.js is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application. It is focused on making yo

Ember.js 22.4k Jan 8, 2023
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

vuejs 201.7k Jan 8, 2023
The tiny framework for building hypertext applications.

Hyperapp The tiny framework for building hypertext applications. Do more with less—We have minimized the concepts you need to learn to get stuff done.

Jorge Bucaran 18.9k Jan 4, 2023
A framework for building native apps with React.

React Native Learn once, write anywhere: Build mobile apps with React. Getting Started · Learn the Basics · Showcase · Contribute · Community · Suppor

Facebook 106.8k Jan 3, 2023
The Backbone Framework

Marionette.js The Backbone Framework Marionette v5 Marionette is dropping its dependency on Backbone. That library is available here: https://github.c

Marionette.js 7.1k Jan 5, 2023
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers

Derby The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers. Derby includes a powe

DerbyJS 4.7k Dec 31, 2022
A JavaScript Framework for Building Brilliant Applications

mithril.js What is Mithril? Installation Documentation Getting Help Contributing What is Mithril? A modern client-side JavaScript framework for buildi

null 13.5k Dec 26, 2022
Better MV-ish Framework

❗ I started working on this project in 2012. React didn't exist, Angular didn't have a stable 1.0 release, Internet Explorer 7, 8, 9 was used by 35% o

Antonio Stoilkov 2.8k Jan 1, 2023
A framework for real-time applications and REST APIs with JavaScript and TypeScript

A framework for real-time applications and REST APIs with JavaScript and TypeScript Feathers is a lightweight web-framework for creating real-time app

Feathers 14.2k Dec 28, 2022
A rugged, minimal framework for composing JavaScript behavior in your markup.

Alpine.js Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM,

Alpine.js 22.5k Dec 30, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161.1k Jan 4, 2023
A no-dependency, intuitive web framework from scratch in Javascript

Poseidon ?? Intro Poseidon is, to use a nice description by Reef, an anti-framework. It's a a no-dependency, component-based Javascript framework for

Amir Bolous 45 Nov 14, 2022