My first thought when I saw the Hawaii Missile Warning screenshot [1] was "wow - they really should have used bootstrap".
Add a 'btn' class to those links.
Add the 'danger' class to the links that will send an actual alert and a 'info' class to the ones that are just test.
Obviously there are also about a hundred other things that should have been in place there, but it is an issue of real consequence that the default styling and UX options of "plain" HTML are so poor.
While I don't use it currently, Bootstrap helped me go from 0 design skills to build non-awful user interfaces. It's hard to overstate the impact they have had on making the web a better place.
Similar experience, but from the opposite perspective. I was a designer, but didn't know how to code in 2012. Bootstrap was the primary way I learned CSS and JS. I'm glad it's still around.
For React users I'll point out a great integration library http://reactstrap.github.io/ which supports Bootstrap 4 when installed with the @next tag. I've been using this for a while without any issues.
Both are great. Originally I used react-bootstrap. However I switched to reactstrap to get support for bootstrap 4. Reactstrap is more barebones, which is good or bad depending on your style and needs.
Ton of discussion/debate on this topic and there are clear benefits to an inline style approach, but so far nothing (that I'm aware of) has proven to be scalable enough to completely take over (yet).
For me a combination of approaches makes the best sense at present. I think of Bootstrap (or Bulma, etc.) as an advanced "reset/normalize", with the addition of some useful global variables. A better starting place, if you will. From there I use the provided class names where it makes sense, and inline styles for everything else.
For inline styles I often use either styled components or glamorous. However my experience has been mixed as I also make heavy use of recompose and often don't have a clear idea which one I want to use to handle dynamic styles. I haven't done so yet but am interested to try Fela.
The ability to use the responsive flexbox classes has been game changing for me. I can do large portions of a fully responsive flexbox layout with css classes like d-md-flex and flex-md-row, etc. This drastically cuts down on the amount of stuff that needs to be in my styles.less or whatever. And it makes maintenance easier for that reason as well.
To finish the layout I generally am making a few utility classes to control things like color and spacing (not a fan of the default bootstrap spacing classes). And then of course custom CSS for navigation, typography and other misc widgets.
But the bulk of the main layout is handled entirely with bootstrap classes. And because nearly everything can be specified with the responsive breakpoint prefixes, I don't have to write repetitive media queries.
I have been really impressed with Bootstrap 4. I've been updating our site with each beta release. Glad that there are no breaking changes between beta 3 and stable as promised!
Is Bootstrap 4 worth using if all you really want are the responsive utilities and classes? I'm aiming to make pages with less than 50KB of uncompressed CSS. I don't need all the components Bootstrap has but I find the responsive utilities and classes helpful.
You can pick and choose the parts of Bootstrap you want to use, but you'll need to compile the SCSS code (very easy).
Assuming NPM install, look at node_modules/bootstrap/scss/bootstrap.scss for a list of files that are included and pick the ones you need and include them manually in your project's SCSS file.
Here's a bit from my Makefile (because I love me some Make):
Bit late, but it's probably easier to use just sassc (the standard SCSS compiler from the libsass project) rather than node-sass if you don't need node otherwise (for webpack or whatever) in your build pipeline. Node-sass as a native linked requires gyp, hence python, node, and a couple npm packages which add to your footprint considerably.
It's worth doing this then? Given I'm going to be throwing away 80% of the CSS, I'm curious if there are better libraries I can build on top of. It's always an advantage that you'll be able to easily Google for Bootstrap fixes though.
I'd say go ahead. The nice thing is that you can start with virtually nothing and if you realize later you need really nice widgets, then you can just use those mixins.
Bootstrap is the only framework that looks nice, is responsive, and fully addresses accessibility. The only thing I can fault it for is using Jquery, but I don't use the javascript features, so it doesn't matter (to me) anyway.
I've been writing some interfaces in Angular and Vue (and Bootstrap 4) lately. Since we don't want to use jQuery with these, here are my personal preferences for "helper" libraries for these JS frameworks/libraries to work nicely with Bootstrap 4:
I'm a little surprised though, that jQuery is still a requirement. I'm guessing that this might be due to linked JS components that they don't have permission to modify?
They're really a joy to work with. My one beef with Semantic is that it could be easier to make themes. I know that someone is currently working on a theme generator site like Bootstrap and hopefully that will be a nice step forward.
I was just looking at semantic-ui-react, and it looked great.
But then I tested their examples on my mobile phone and it looked really bad. It just seemed that it wasn't responsive at all, which really surprised me.
I've tried MiniCSS[1] (which styles your default HTML without adding too many classes and has themes) and MUI[2] (Material UI styles). Both are decent, but I keep falling back to Bootstrap v4 because Bootstrap just gets a lot of sizing and padding right.
With other frameworks I'm constantly adding new rules just to add a bit of padding and margin here and there, but Bootstrap 4 gets a lot of it right by default. Plus it now has a lot of useful utility classes for small padding increments (e.g. `.mb-3` for `margin-bottom: 1.5rem` and `.px-2` for horizontal padding of 1rem). With Bootstrap 4, a previous project required only 10-ish lines of global CSS[3]. Sure, it looks and feels like a Bootstrap project, but that was fine for the purpose of the app, and Bootstrap 4 looks fresh enough that I don't feel like the design is outdated.
FWIW, I've also had a lot of luck recently with Material-UI[4], a set of React components that implement the Material UI aesthetic. My current project feels like it could fit in with any Google app from G Suite.
I’m finding the wix style guide very useful, because it provides baytle tested components for atomic elements (buttons, dropdowns, checkboxes) without imposing an overreaching design on you. (But still provides layout components)
I've seen Brutalist design being mentioned a few times here and it always shows this website gallery, I am no specialist, so I wonder, is this what brutalist design really is?
Quick Google search explains that brutalist architecture is about creating modular elements representing specific functionality often sacrificing aesthetics.
A lot of the sites on that gallery are ugly just for being ugly, they have no functionality and use different types of animations or constructs to just make something unconventional from common website aesthetics, I get why, but it feels like the word brutalist was borrowed here and is applied in a very different way.
Brutalism is features before design. A cement tower block is an example in architecture. http://skimfeed.com is an example of a website that follows brutalist ideals. Early craigslist and early search engines are good examples too.
I agree and this is what I consider to be brutalist web design, but that site(the top search result for 'brutalist websites', 'brutalist design', 'brutalist web' and so on) has a bunch of weird designs(such as http://www.xtragear.services/ ), which is the source of my confusion.
These look like they were made by a Starbucks barista with a graphic design “degree” and 100k in debt. In other words, ugly and pretentious. Yeah I know, I don’t get it.
Not being tied down to global styles is so nice. The downside though, is that anytime you make something you have to redo all the styles. I find this not to be a huge deal, though since you can just turn them into components.
This post has been flagged as a dupe, but the other posting currently only has 6 points and 0 comments, so I think the flag should be remove from this one.
I know it always goes hand in hand with jquery, but I wish there was more info on using a pared down version that only has the parts of jquery necessary to run the bootstrap components.
Add a 'btn' class to those links.
Add the 'danger' class to the links that will send an actual alert and a 'info' class to the ones that are just test.
Obviously there are also about a hundred other things that should have been in place there, but it is an issue of real consequence that the default styling and UX options of "plain" HTML are so poor.
1 - http://nymag.com/selectall/2018/01/hawaii-missile-warning-se...