{"action":"created","issue":{"url":"https://api.github.com/repos/atom/atom/issues/6351","labels_url":"https://api.github.com/repos/atom/atom/issues/6351/labels{/name}","comments_url":"https://api.github.com/repos/atom/atom/issues/6351/comments","events_url":"https://api.github.com/repos/atom/atom/issues/6351/events","html_url":"https://github.com/atom/atom/issues/6351","id":67959479,"number":6351,"title":"Replace Bootstrap CSS with hand-written CSS designed for Atom","user":{"login":"bolinfest","id":655869,"avatar_url":"https://avatars.githubusercontent.com/u/655869?v=3","gravatar_id":"","url":"https://api.github.com/users/bolinfest","html_url":"https://github.com/bolinfest","followers_url":"https://api.github.com/users/bolinfest/followers","following_url":"https://api.github.com/users/bolinfest/following{/other_user}","gists_url":"https://api.github.com/users/bolinfest/gists{/gist_id}","starred_url":"https://api.github.com/users/bolinfest/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bolinfest/subscriptions","organizations_url":"https://api.github.com/users/bolinfest/orgs","repos_url":"https://api.github.com/users/bolinfest/repos","events_url":"https://api.github.com/users/bolinfest/events{/privacy}","received_events_url":"https://api.github.com/users/bolinfest/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/atom/atom/labels/enhancement","name":"enhancement","color":"bfd4f2"},{"url":"https://api.github.com/repos/atom/atom/labels/ui","name":"ui","color":"99cc00"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-04-12T21:10:22Z","updated_at":"2015-04-13T15:17:35Z","closed_at":null,"body":"The bootstrap CSS is enormous. It is designed to solve a problem that Atom does not have. That is, a set of CSS rules to normalize presentation across all browsers that may be used for rendering, using whatever browser-specific hacks necessary to achieve that goal.\r\n\r\nThe project was also conceived before the advent of flexbox, which means that bootstrap has a ton of cruft to deal with pre-flexbox browsers. Such workarounds are verbose and make it difficult to understand what can be removed.\r\n\r\nIn sum, this puts Atom into a situation where:\r\n* The CSS is much larger than what Atom needs.\r\n* It requires much more work than should be necessary to understand why the current CSS works the way it does.\r\n* Bootstrap is the source of truth, rather than something that is directly under Atom's control.\r\n\r\nFor example, take a look at the issue I recently filed against Bootstrap: https://github.com/twbs/bootstrap/issues/16276. The recommended solution is to pile on another hack (i.e., use an even more specific CSS selector) rather than figure out why the existing CSS works the way it does and fix the underlying problem with the model. Presumably this is because trying to untangle why things work the way they do is too hard.\r\n\r\nAtom should not be saddled with the baggage of layout engines of old and should be exploiting the fact that it only needs to support Blink (which supports flexbox), and write its own small, specific, and far more maintainable CSS."},"comment":{"url":"https://api.github.com/repos/atom/atom/issues/comments/92397763","html_url":"https://github.com/atom/atom/issues/6351#issuecomment-92397763","issue_url":"https://api.github.com/repos/atom/atom/issues/6351","id":92397763,"user":{"login":"simurai","id":378023,"avatar_url":"https://avatars.githubusercontent.com/u/378023?v=3","gravatar_id":"","url":"https://api.github.com/users/simurai","html_url":"https://github.com/simurai","followers_url":"https://api.github.com/users/simurai/followers","following_url":"https://api.github.com/users/simurai/following{/other_user}","gists_url":"https://api.github.com/users/simurai/gists{/gist_id}","starred_url":"https://api.github.com/users/simurai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/simurai/subscriptions","organizations_url":"https://api.github.com/users/simurai/orgs","repos_url":"https://api.github.com/users/simurai/repos","events_url":"https://api.github.com/users/simurai/events{/privacy}","received_events_url":"https://api.github.com/users/simurai/received_events","type":"User","site_admin":false},"created_at":"2015-04-13T15:17:35Z","updated_at":"2015-04-13T15:17:35Z","body":"The current setup is like this:\r\n\r\n1. Atom [imports](https://github.com/atom/atom/blob/master/static/bootstrap.less) a subset of the available Bootstrap components.\r\n2. Some of them get used internally (e.g. alerts in the settings). Some get overridden and turned into \"official\" Atom components found in the Styleguide (e.g. buttons). Some get used without overriding (e.g. tooltips). And then there are also Atom only components (e.g. panes).\r\n\r\nSo I can see the argument to somehow unify it and have just a single UI/component library.\r\n\r\nThe other day, @kevinsawicki brought up the idea to move all Atom components into its own package. I think it's a good idea and should be done regardless. But it could also be combined with this unifying effort. Here the possible steps involved:\r\n\r\n1. Move `atom/atom/static/` to its own package. For now, let's call it `atom-ui`. The Less files would end up at `atom/atom-ui/styles/`. This still includes Bootstrap as a dependency.\r\n2. Then start to move all currently imported Bootstrap components into `atom/atom-ui/styles/` so they become an Atom UI component. Components that currently get overridden (like the buttons) would get \"merged\" into a single component.\r\n\r\nAt this point everything should still look and behave like before. Most components would still be based on Bootstrap, but now could be customized to fit Atom's needs."}}