Twitter's Bootstrap hit 100,000 stars on GitHub
github.com
github.com
Does anyone know of an scss-based UI framework, where I can just call mixins into my css? Or is that even possible with bootstrap?
Adapting html to a UI framework's code feels like a completely upside down approach.
Later, I start converting this stuff to be what I actually want in either a custom CSS or by integrating some other framework.
Note though. I explicitly mentioned this is for my little dashboards and apps. When I start this process, pages will look broken from time to time and there might be pages that look Frankensteined. I've never done this on a serious app although I want to do that for one client I'm consulting for. Since I wrote all the code myself, here's my speculation on how I'll do it.
Since I have a fairly structured way of arranging my divs and my forms, I'm going to hack together a parser using beautifulsoup/htmlparser to get the bootstrap stuff out and convert those to semantic names. So it'll be something that goes through a file, and then tells me it found a div.row here (show me the surrounding lines to get me an idea of where it is) and then ask me to input the semantic name. It'll spew out the sass files I want and change the jinja templates.
From there I'm going to attempt to plug in material just because I like it so much :D
Do you have any recommendations on a better, leaner scss UI toolkit?
[0] http://getbootstrap.com/css/#less
[1] https://github.com/twbs/bootstrap-sass
[2] http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/
Though it is, literally, a foundation to build your own look-and-feel on.
It's better to start out with some very simple css boilerplate, the app is new it doesn't need to look like Twitter... if the app is new it probably shouldn't look like Twitter anyway, it's current-year.
You might just like it too.
Bootstrap [1]: 118 KB
SemanticUI [2]: 537 KB
Don't forget to add the JavaScript. I know GZip is a thing, but still...
[1] https://github.com/twbs/bootstrap/blob/master/dist/css/boots...
[2] https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/...
If you're trying to maximize compatibility while also get designs up quickly, any modern framework is preferable to no framework at all.
See our examples of GitHub layout clones in SUI (be sure to hit paint can icon in top right to swap in other themes)
Modern GitHub http://semantic-org.github.io/example-github/index.html
Classic GitHub http://semantic-org.github.io/example-github/index-classic.h...
SUI is designed with 3,700+ variables under the hood, and a six level deep theming system (site default theme -> site packaged theme -> site user theme -> component default theme -> component packaged theme -> component user theme).
It becomes very possible to build large codebases around SUI that can be extended over the course of a startups growth that can build all of the company-specific changes purely in theming variables, custom components and css "override" files. After setting up your core UI in SUI you can simply fork our doc style guide to use as branded style guide for your company.
Deploying a new "on brand" microsite can be as simple as copying over a theme folder, tweaking things like @primaryColor @fontSize, @fontFamily, and changing some button shading to create a new variant.
With regards to the build size, most of why we are larger is that SUI includes 50+ components. With our gulp pipeline you can narrow it down to only the components you want. There's even a PR that I'm looking at which, when merged, will let you specify only the specific parts of a single component you want to include in your build, narrowing down file size even more.
I don't see any paint icon.
EDIT: Found it. I thought it was a trash can.
Also, Semantic UI is the most complete library that I've found. If you build an app, that is really important, you don't want to find out one day that there is a gaping hole because a certain widget hasn't been implemented.
I'm basically a novice programmer and I've built web apps with it and Web2py within an hour or two.
Both are great, but if you can, pick Semantic UI. I love it.
SUI is more compact, aligned and feature rich.
Modals: http://semantic-ui.com/modules/modal.html vs. http://getbootstrap.com/javascript/#modals
Again, here my vote goes for SUI, it's cleaner and better designed.
Untreated Bootstrap is so widely used that without extra styling it looks just another UI with no personality. Design is a sensitive, subjective topic however. Sometimes you want that crude industrial look that Bootstrap has :)
Semantic UI is a production ready app UI framework.
Bot have legit uses, but I think they cover a bit different use-cases.
> I'm certainly not going to spend much time optimising it. if it's a quick hackish tool for your team then it's certainly fine
Every use case is a bit unique. I've built apps with bootstrap, but I gradually removed it later because I simply rewrote everything I used from it.
As an example, DataTables works out of the box with Bootstrap and Foundation, but not with SemanticUI. Same with Select2, Symfony, JetBrains IDEs.
The more bespoke your application, the more Bootstrap will either be useless or counter-productive. But if you're building a standard UI, Bootstrap is great. It's easy to find junior devs who can use it, and there's good documentation and support.
I've never heard this recommendation. Why would you waste time on a framework you are never going to deploy to production?
But their use of jQuery in front page examples hardly inspires confidence. I tried to find out in a few clicks whether jQuery is required, and couldn't.
Specifically: http://semantic-ui.com/examples/grid.html
It's not a big knock on semantic-ui's part; there aren't a lot of products that don't break within an hour or so after I start using them, it is however, a big plus to bootstrap that it rarely does break when I try something.
1. The menu button doesn't get focused (or they disabled the style that makes focus apparent). It's not possible to open it with the keyboard either by pressing space or by pressing enter.
2. Tab a few more times until you get past the BEM and SMACSS links. Notice how those three tabs can't be selected with the keyboard?
3. Sign up button has no obvious focus.
4. Dropdown menu cannot be accessed with keyboard nor does it have a focus style. The same applies for the buttons in that area as well.
5. Many of the elements in the "Unbelievable Breadth" section either don't allow you to focus or have styled the focus in a really non-obvious way.
Basically, it looks pretty and you can use your clicker, but Semantic "UI" screams to me "works for me so fuck everyone else"
-- HN whenever Bootstrap comes up (paraphrasing Yogi Berra).
I find it a lot more flexible than Bootstrap, but equally useful for fundamentals and cross-browser support. It is also less opinionated about the HTML markup and styling, at the cost of requiring more setup (rather than just, say applying classes) than Bootstrap. But with the additional modules of Neat, Bitters, and Refills, you can get the same sort of UI suite going quite easily.
Bootstrap is for copy-paste website/app sketching and bourbon is for speeding up SASS coding. I tried it, but I ended up using 1-2 functions of it, so it got dropped.
It was called "twbs" when they moved the project out of the "twitter" organization as a way of saying "hey! we love our past at twitter!" :)
I remember that before BootStrap came to the scene, we used to work with BluePrint CSS. BluePrint gave a nice canvas and concealed all the IE6 related issues. However, once Google Chrome became mainstream, it was time to move up to the next level. BootStrap emerged to the scene and completely won over so many hearts. The world is a better place because of BootStrap! Many many thanks for the team that put this together.
p.s. don't get me wrong I use it myself
What are people doing? Going commando?