1.0 Progress Report

[jlukic]

I thought I'd give everyone a heads-up on features left to be complete for 1.0. There's been a lot of progress but there are still lots of things to do. Some of these were originally roadmapped for 1.x and 2.0 but i've included them here for posterity.

It turns out I've ended up writing a few new (useful) components based on user requests but this has created more overhead for "getting everything in".

That being said I'm extremely pleased with the progress so far. I just wanted to be transparent for those wondering about a release date.

Requires CSS Variables (0)

All components complete!

Requires Documentation (1)

These components require new docs to be written

• Statistic
• Tab
• Search

  Requires Documentation Updates(2)

• Sidebar - incomplete documentation, no sizes
• Progress - incomplete documentation

  New Components (3)

• Sticky - Menu that attaches to other content and follows it through the viewport
• Visibility - Callbacks for element screen visiblity, i.e. top visible, off screen, on screen, bottom visible, etc

  New Global Styles (1)

• Site - rules to declare constants for a website, links, headers, fonts etc

  Features (1)

• Dropdown (multi-select)

  Additional Requirements (4)

• Theming documentation
• Moving of docs to learnsemantic.com
• New homepage
• Component build tools (per definition, and project)

  Previous refactoring log

• Loader (More CSS Loaders)
• Progress (Module for updating progress)
• Statistic Completed Aug 11
• Feed Completed Aug 7
• Item Completed Aug 6
• Card Completed Aug 5
• Comment Completed Aug 1
• Dropdown Completed July 31
• Popup Completed July 30
• Breadcrumb Completed July 28
• Dimmer Completed July 28
• Rating Completed July 28
• Sidebar Completed July 28
• Tab Completed July 28
• Accordion Completed July 28
• Nag - Completed July 28
• Shape - Completed July 28
• Table Completed July 20

  After launch

The following tasks have been moved to after launch

Undocumented Components (6)

These components require new docs to be written

• Nag
• Tab
• Site
• Visit
• Video
• State

[jlukic]

The rate of progress should increase significantly now, I have moved to working full time on Semantic UI for the indefinite future.

[jdiaz5513]

Exciting progress! I might be able to use Semantic for a major UI project if 1.0 hits soon enough. Keep it up! :+1:

[adis-me]

@jlukic that is good news. Keep up the nice work.

[jlukic]

I'm curious what everyone thinks about adjusting the docs layout to include a more in-depth table of contents.

Do you find this layout more distracting or useful?

Another option is off-canvas right

[williamkhshea]

@jlukic That is useful, and it would be great if you can make the items collapsible.

[tmikaeld]

This is great news!

And yes, the off-canvas right was better, more focus on the content than on navigation.

Making them collapsible might be a good idea, but when i tried it quickly in the console it lagged a LOT when hiding many sections, it would make the docs slower to load.

[kajronny]

What a great framework. A lot easier to create complex forms with working validation. Try that in the div-sea of Bootstrap without breaking the layout somehow....after 3 days I gave up. But here everything just works, this is hands down the smartest css framework I have seen so far. Keep up the good work, a lot of people are gonna love this when they discover it.

[jwarnes]

1.0 can't come soon enough! Keep up the great work.

[jlukic]

In order to continue to add transparency, I'll try to keep a list of my current tasks for the project here as well, so not such visible work can be made more transparent

Todo Checklist for Week of August 24th

Bug Fixes

Popup

• [x] Fix issues with popup trigger losing track of its popup in some cases with multiple popups

Statistic

• [x] Fix margin on statistics first/last child
• [x] Fix icon should be 1em height

Button

• [x] Fix inverted versions to keep @selectedTextColor on hover
• [x] Increase black in active text color
• [x] Add inverted button group examples
• [x] Animated should calculate the correct animation distance based on padding
• [x] Animated hidden content should use top value half padding

Label

• [x] Fix image labels in chrome (right margin issue on img)
• [x] Fix tag labels
• [x] Fix spacing on attached labels

Modal

• [x] Fix modal header formatting and close position on mobile
• [x] Fix page still scrollable on modal show
• [x] Fix page dimmer doesn't cover entire page on modal

Menu

• [ ] Fix secondary menu hover
• [ ] Consider table-cell for horizontal menu

Message

• [x] List without header is getting padding on top, last list element has bottom border

Dropdown

• [x] Selection dropdown hover dropshadow
• [x] Keyboard tab focus enables selection correctly

Icon

• [x] Add back in right margin to icons?

Table

• [x] Remove italics from table footer
• [x] Remove border from ui table segment

Segment

• [x] Fix basic table segment to have segment styles

Rating

• [x] Remove disclaimer about ui icons no longer relevent

List

• [x] Selector is too generic for icon (github issue)
• [x] Image list image is smushed (table-layout: fixed)
• [x] Ordered lists should not have right padding

Comments

• [x] Add max width to text instead of element

Header

• [x] Tweak shadow for block header variation

Form / Input / Dropdown

• [x] Input without label alignment
• [x] Inline dropdown icon vertical align (top)
• [x] Menu styles for selection

Form Validation

• [ ] New content - form error labels
• [ ] Modify form error labels to be floating on focus
• [x] Reduce the bg color / pointer size of errored form fields

Checkbox

• [x] Modify checkbox error colors to be more subtle

Accordion

• [x] Icon alignment
• [x] Fix Nested accordion example
• [x] Exclusive should check for closest accordion instead of sibling

New Code

Modal

• [x] Add example and spruce up full screen modal

Popup

• [x] Add additional examples of new settings
• [x] Add wide/fluid variations

Menu

• [ ] Finish variables
• [ ] Change sub menus to unselected color
• [ ] Change sub menu active color to selected color remove bg
• [ ] Remove active border from horizontal menus
• [ ] Remove docs message about hover class

Statistic

• [x] Add more statistic sizes

Progress Bar

• [ ] New Content - [ ] Task Description
• [ ] New Content - [ ] Overlay/Percentage Complete

Dropdown menu content

• [x] New Content Type - Menu Headers
• [x] New Content Type - Menu Dividers
• [x] New Content Type - Menu Input
• [ ] New Content Type - Menu Tab

Button

• [x] Add basic colored versions

Label

• [ ] Add text corner label variation

Item

• [ ] Add some ui item themes (pc world list style?)

Divider

• [ ] Variation of divider with subtle radial gradient (like amazon checkout)
• [x] Horizontal Divider should automatically resize to text length

Documentation

• [ ] Experiment with adding sticky headers

Refactoring

Modules

• [x] Fix script execution vulnerabilities inside of modules with templates

Overall

• [ ] Revisit CSS use of table-cell and table-layout: fixed/auto
• [ ] Compare branches and merge in any fixes in master

Button

• [ ] Figure out "or" situation

[J5lx]

Regarding the ToC: Basically I would like to have it more detailed, but looking at it’s length in the screenshots you posted you should definitely not make it fixed like Bootstrap’s ToCs – I never see their last entries which was very annoying when I was still using Bootstrap:

(The last entry is "Wells")

BTW, I like Semantic’s docs so much more than Bootstrap’s – thank you for this!

[jlukic]

Reports from for Week of September 1st

I've spent this week diligently working on a ui sidebar rewrite, which has gone much slower than expected. There are several difficulties with doing a sidebar menu decently.

The first is the rigid page structure required to make one work, requiring a user to set-up their page around initializing a sidebar menu isn't ideal, yet its nearly required to not have to do animations directly on the page body, and to include faster animations using transform: translate3d() which must occur in tandem on the page body and sidebar.

The second issue is the unusual behavior with 3D CSS transitions, making sure two separate animations occur in tandem can often be difficult when there are so many possible variations in reflows between browsers, especially mobile which was the intended use-case for most sidebars to begin with!

The third issue is trying to come up with an adequate solve for the issues with position: fixed when used inside a css tranform which creates a new coordinate context, breaking any "sticky menus" etc.

I'm coming out the other end, and will continue with the checklist from last week for the beginning of next week. Slight delays, but with constant work and improvements none-the-less!

[yilativ]

Keep up the good work! Thank you

[jlukic]

Reports for Week of September 7th

My aim for this week and next week is to wrap up all essential bug fixes, and enhancements for 1.0 release. I'm hoping for a hard cut off date of September 19th, two weeks from now, on new features and major refactoring of components.

I will then swap over to working on doc features essential for 1.0, starting with "customize/download" page, fixed sidebar navigation for UI docs using the new ui sticky module, better localization tools (testing automation using Transifex Live). After that will begin work on the two necessary stand-alone sites for 1.0, a theme site for submitting/uploading user themes, and a second learnsemantic.com site for hosting all the new documentation.

Projected 1.0 launch is looking like October realistically.

Todo Checklist for This Week

Bug Fixes

Menu

• [ ] Fix secondary menu hover
• [ ] Fix various bugs with inheritance on inverted menus

Sidebar

• [ ] Finish sidebar variations for size and side
• [ ] Bug Fixes

New Code

Dropdown

• [x] Add searchable variation of selection dropdown
• [x] Better handling of overflow / word wrapping
• [x] Optimize keyboard navigation controls for overflow container
• [x] Add ability to create dropdown directly on a <select>

Dropdown menu content

• [x] New Content Type - Menu Headers
• [x] New Content Type - Menu Dividers
• [x] New Content Type - Menu Input
• [ ] New Content Type - Menu Tab

Progress Bar

• [ ] Finish variables
• [ ] New Content - [ ] Task Description
• [ ] New Content - [ ] Overlay/Percentage Complete

Form

• [ ] Form helpers - (floats above on focus)
• [ ] Error Helper Label (Floats above on focus)

Menu

• [ ] Finish variables
• [ ] Change sub menus to unselected color
• [ ] Change sub menu active color to selected color remove bg
• [ ] Remove active border from horizontal menus
• [ ] Remove docs message about hover class

Low Priority

Divider

• [ ] Variation of divider with subtle radial gradient (like amazon checkout)

Label

• [ ] Add text corner label variation

Item

• [ ] Add some ui item themes (pc world list style?)

Documentation

• [ ] Experiment with adding sticky headers

Refactoring

Menu

• [ ] Consider table-cell for horizontal menu

Grid

• [ ] Consider swapping to fixed grid breakpoints instead of percentage
• [ ] Consider whether margins should be set with margin/padding or using fix width

Overall

• [ ] Revisit CSS use of table-cell and table-layout: fixed/auto
• [ ] Compare branches and merge in any fixes in master

Button

• [ ] Figure out "or" situation

[iBotPeaches]

Does the Menu refactor "Consider table-cell for horizontal menu" include having support for collapsing menus at mobile breakpoints? I believe it was touched on in #157, but that was back in the 0.x and 1.0 split. So not sure where it fits in now.

[QWp6t]

I think as part of a refactoring of the Grid, you should consider that some grids have gutters but not all grids have gutters.This is accomplished vertically with fitted grid, but it still has horizontal gutters. A variation on gutters is also somewhat implicitly acknowledged with nods to cell padding for tables. I think expressly articulating the role that gutters play in a grid system is something that should be added to the definition of a Grid for SUI 1.0, and classes for completely removing the gutters should be added to the framework.

Note that I haven't actually used SUI yet; I've been waiting for the 1.0 release. This suggestion is based on what I've seen in the docs.

--Unrelated-- @iBotPeaches I recognize you from XDA. I haven't done Android development in a couple years, but I still just wanted to say thanks for all the hard work you do on APKTool.

[hustcer]

Great work ! And hope we can have a flat metro style theme. Thanks.

[jlukic]

@QWp6t The beta grid now is fitted on all sides by default, with variations for padded vertically padded horizontally and padded (both)

New docs up with a much larger explanation of grid usage: http://beta.semantic-ui.com/collections/grid.html

Still planning on adding word order dependency (added), and maybe push/pull classes, but otherwise getting closer to gold for 1.0

[CoolGoose]

Is there a chance to have landscape phone / tablet grids ? With the abundance of "phablets" or better said 5in + mobile phones, a lot of users use them in landscape mode, but because they're using a 3x scale factor, most of the full hd or higher respod to 640px resolution.

Maybe at least have a phone landscape = tablet portrait using the orientation media query ?

[wriver4]

@jlukic good job on the grid explanation

[jlukic]

Reports for Week of September 22nd

Last Weeks Changes

Translation

Added in live translated versions of Semantic UI docs by integrating Transifex i18n tools.

If you are interested in translating Semantic UI 1.0 into your language please get in contact. We have a full translation center now, including support for translating strings in-place inside the website, so everything should be really simple, we just need more people to help.

Docs Changes

I've added a sticky side menu which should help make it easier to browse element definitions. It's a sticky accordion menu which uses the visibility API, so was a great test for a lot on using a lot of component overlap.

You can now link directly to individual definitions, just click on the menu bar link.

I've also been trying to proof-read and update the images and examples across all definitions, but this is coming in piecemeal on an as-i-catch-it basis. If you see any issues in docs please let me know.

UI Changes

Too many changes to mention everything, but here are some exciting new things:

Dropdown

• New searchable variation- can filter menu items in long lists
• Deals with long lists better and mobile
• New element types inside menus can add dividers, headers etc
• More neutral styling, thinner

Item View

• Now handles responsive collapsing

Grid

• Lots of weird fixes with multiple inheritance on variations i.e. ui right aligned grid with ui left aligned row
• Word order dependency fixes, meaning you can now use left floating right aligned grids
• Grids rows and columns can now have color variations! This was tricky to work in with ui divided grid

Sticky

• This is now my favorite component, and i still havent written docs for it yet.

Popup

• Lots of fixes here, and formatting changes. Using grids inside popups, triggering popups on pre-existing content, etc. New docs on this.

Rail

• New undocumented UI component for adding off-canvas "rails", i.e. fixed width columns that sit outside a grid until a certain breakpoint is reached. This is used heavily in news sites, for related articles, top trending etc.

Coming Up This Week

Last friday was suppose to be the last day for me to be working on base styles for 1.0 but i've moved the deadline to this week as final.

Menu

I'm starting with a blank slate on menu, and trying a full rewrite. Basically menu was never careful enough with the inheritance on .item meaning ui list and ui dropdown were inheriting some styles they shouldnt have when included inside menus.

The "basic" version of menu might also be too styled, causing a lot of other menu types to have to 'cancel out' styles inherited from the base menu.

I am toying with the idea of changing ui menu from 0.x.x into ui navigation menu and keeping ui menu a very bare bones version of a menu, without so much formatting. This would help with the inheritance issues, and also allow for easier theming.

If you have any thoughts on this please be sure to respond here.

Progress Bars

I need to add more content to progress bar elements, and simple behaviors for setting width and showing progress. I might push this back if I run into issues with meeting deadlines.

[LarsBuur]

It is great that you keep us updated. Please keep up you good work on this fantastic project.

[jlukic]

Updates from this week, progress bars are completed.

They can handle

• Faking progress (increment by random small value)
• Task completion (set current count of total required for completion instead of current %)
• Message templating Uploaded {count} of {total} photos
• Progress Indication (Show colors from red-green depending on current level)

I finished a first pass on the homepage that was good enough to put up. http://beta.semantic-ui.com

If you have any suggestions or feedback on whats missing or what sounds funny, let me know.

[davidsalazar]

Looks good. The sidebar doesn't work on mobile safari and chrome on my iPad. Latest versions of course. Really looking forward to the download build tool. I take it thats a low priority at the moment?

[KelseyDH]

Does http://beta.semantic-ui.com have a "kitchen sink" type page (e.g. http://foundation.zurb.com/docs/components/kitchen_sink.html ) where all of the varied components can be displayed together at once?

Given people's attention span's, I think a "money shot" page like this is critical for quickly conveying the value of the framework to interested or curious developers.

[jlukic]

Reports from Week of September 29th

Lots of cycling around the library this week.

Docs Changes

• Homepage - New homepage. There might be some slight tweaks, but it will most likely be a version near what we currently have
• Download/Customizer - Work has been begun on the build customizer, its not presentable enough to make it public yet, but its a daunting task to do correctly and I've tried to start laying some groundwork
• Icons - Icon page has been tweaked, no longer cluttered with text, added definition to separate tab from icon list, perhaps will add a search tool for icons at top, but havent had time yet.
• Code Samples - Got rid of the terrible ACE editor for code snippets, swapped over to highlight.js which is much faster and easier to work with. Added a new code highlighting style which is custom to SUI.
• Sidebar - Added logo and homepage link to sidebar
• CLA - Added contributor license agreement with google docs signup, not sure how to fit it into code, but will most likely make it required for larger pull requests AFTER 1.0 launch.
• Modules - Began revamping modules docs, making sure behaviors/settings match up to correct defaults for 1.0 and any new settings that I havent added docs for yet. Still much more work to do on this front though...

Code Changes

• Dropdown - Fixes for === matching. Added mutation observers which basically means whenever changes to the DOM occur inside a dropdown it will automatically refresh its selectors and attach events! Aka ajax etc.
• Accordion - Mutation observers added here as well, added new setting for closing nested content
• Checkbox - Added better handling and documentation for read-only, disabled and one-directional checkboxes (i.e. can check but cant be unchecked). Added new fitted variation that can fit the checkbox exactly without a label. (You can see this in table docs)
• Segment - Added compact segment which collapses to contents, added fix for margins on left and right floated segments
• Transitions - Transitions now work properly on elements that are hidden using visibility: hidden preserving display state correctly. Fixes as well for use on inline-block elements where previously it might sometimes be tricked into swapping to block display. Basically if an element starts with display:none there's no way to determine its final display status without creating a fake version of the element in the same context as its current state (same class location etc) and check its final visibility state, then cache that for future transitions. Kinda nuts!
• Form - Added field divisions greater than 6, i.e. seven fields etc.
• Button - Added word order dependency to some variations, i.e. right floated left labeled icon button. Tweaks to circular icon positioning
• Table - Converted ui definition table into an entire new type of table, added lots of new formatting for definition table. It's useful in circumstances where one column of a table defines a row's contents. New variations as well, like collapsing columns super useful and text alignment inside columns. Fixed some bugs with colors being off in inverted tables.
• Grid - Added new internally celled grid variation, which is like a tic-tac-toe board. Added fixes for doubling/stackable grids when used with complex setups with celled/divided and other variations.
• Sidebar - Fixed sidebar so it can show during hide and hide during show
• All modules - performance debugging should be more legible with the action listed first'
• Input - Added left action input (button on left), added new labeled variations with labels on left or right side
• Flags - Added basic documentation for flag icons, might still swap icon sprites to allow for at least two sizes
• Global - All sizes now resolve to exact pixel values. So we're still using ems but as long as you keep base font size of 14px, all other content sizes should match to pixels i.e. If your site uses a different base font size, its easy enough to adjust the values as well.

@small       : 0.9285em; /* 13px or 14/13 */

More things that fell through the cracks, but these are what I can gleam from reviewing the commits.

[jlukic]

I'm currently restructuring the project to include separate repos for each component, more comprehensible theming structure, Gulpfile support, and much more. #1168

Will have results in next couple days along with a general status report in this thread.

[yilativ]

Very very exciting!! Keep up the good work!

[mzbyszynski]

Hi @jlukic, before reading your comments here and in #1168 I was thinking of writing a Gulp plugin that would take a configuration object or file that would let the user specify the paths to the module(s) and theme that you wanted to use, and the path to the override less files and handle the less compilation and packaging (and concatenate the required *.js as well I suppose). That way a project that was using semantic could leave the semantic files where they were installed by bower (or whatever), and the customized .less override files could be somewhere else, like in a src/ or app/ directory or where ever they wanted and the plugin would take care of it. Is that what you meant by "Gulpfile support"?

[jlukic]

Yeah, I wasnt hearing back from anyone specifically that they started working on some of these features, so deadlines pushed me to begin on my own iteration.

https://github.com/Semantic-Org/Semantic-UI/blob/restructure/gulpfile.js

I'm moving the config over today from a static json config, to an interactive config on first launch (if json isnt defined) with Inquirer. This would only occur if no config was defined, and would allow directory set-up, and writing important variables to site.config like @fontSize @pageFont @headerFont etc. Working on that today.

[mzbyszynski]

Sorry I didn't reply sooner, but sounds like the right approach to me! :+1: The interactive config is a great idea. I'll definitely test that as soon as you think it is ready.

[jlukic]

Cheers, that would be very useful.

Have to build a lot of maintainer tasks too, like pushing each definition to a separate repos for bower, this might turn into a weekend task as well.

[whitelynx]

One thing I've seen done for bower support is just pushing to separate branches instead of separate repos. (for instance, angular-ui-ace uses a bower branch, so you install it using bower install angular-ui-ace#bower)

[jlukic]

Project restructuring is now in 1.0 branch, docs will follow shortly for now you can find out info in the readme.

semantic.config is now themes.config and build settings are now stored in semantic.json in the project root.

[dyu]

On Tue, Oct 21, 2014 at 4:28 AM, Jack Lukic notifications@github.com wrote:

Project restructuring is now in 1.0 branch, docs will follow shortly.

Tried to build 1.0 ($ gulp) and got: Cannot read property 'clean' of undefined

— Reply to this email directly or view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/691#issuecomment-59834175 .

When the cat is away, the mouse is alone.

• David Yu

[cloud-walker]

+1 for gulp!

[tpanum]

@dyu : Rename semantic.json.example to semantic.json

[jlukic]

@dyu If you repull do you still have this issue? Did the install work correctly?

[jlukic]

@dyu As of a second ago you can now run gulp watch and gulp build even without running gulp install, it will just run with defaults. 483ba73247e87c500f8cab1ca4b76566aca524f6

[dyu]

On Wed, Oct 22, 2014 at 12:47 AM, Jack Lukic notifications@github.com wrote:

@dyu https://github.com/dyu As of a second ago you can now run gulp watch and gulp build even without running install, it will just run with defaults. 483ba73 https://github.com/Semantic-Org/Semantic-UI/commit/483ba73247e87c500f8cab1ca4b76566aca524f6

gulp install/watch/build now works. Thanks!

— Reply to this email directly or view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/691#issuecomment-59958909 .

When the cat is away, the mouse is alone.

• David Yu

[BenevidesLecontes]

I get this errors running gulp Error: Cannot find module 'gulp-help' at Function.Module._resolveFilename (module.js:338:15) at Function.Module._load (module.js:280:25) at Module.require (module.js:364:17) at require (module.js:380:17) at Object. (/Users/chissanga/Semantic-UI-1.0/gulpfile.js:12:18) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17)

[LarsBuur]

@Benevides - I had the same problem. I fixed it by changing the branch to 1.0 - like

git clone git@github.com:Semantic-Org/Semantic-UI.git --branch 1.0

[jlukic]

Hey guys, just checking in to let everyone know 1.0 launch will (most likely) be next Friday.

If anyone has some time, I could definitely use proof-readers for things being written on learnsemantic.com just remember be gentle, writing is hard.

Also if anyone has ideas for humorous statements for the homepage on learnsemantic I'd like to have it rotate out

I.e. beginners guide: Do Gulp and Grunt sound like descriptions from an elementary school lunch room? experts: guide: Have you been making websites since XSLT was more popular than CSS?

[muppetjones]

I'm having the same problem as @BenevidesLecontes , and the solution posted by @LarsBuur did not solve the problem. Update: That problem is solved. Unfortunately, I can't seem to get Semantic working at all now. I'm extremely confused about where certain folders and files are supposed to be. For instance, I cannot find a grunt config file, and the theme directory in dist only contains assets, which doesn't seem correct according to GettingStarted.md.

For now, I'll just go back to 0.9. I'm assuming it'll all be explained once the documentation is update. Can't wait!

[jlukic]

@muppetjones I didn't even notice the outdated getting started was still in the repo. I updated the GettingStarted.md to correspond with current docs.

I recommend checking out http://www.learnsemantic.com for further resources. I'm writing docs as I get the chance.