8 ms·
Bootstrap 4
- paul7986 9y agoBesides Bootstrap what frameworks and or tools are the hipsters using for designing & building web apps & sites instead?
- misframer 9y agoI started using Pure. https://purecss.io/ https://purecss.io/
- forlorn 9y agoTachyons is pure joy! http://tachyons.io/ http://tachyons.io/
- kohanz 9y agohttps://bulma.io/ https://bulma.io/ (just on a side-project so far)
- glownshow 9y agoi love bulma as Well. it is a no brainer css framework
- jannejava 9y agoTailwind: https://tailwindcss.com https://tailwindcss.com Bulma: https://bulma.io https://bulma.io
- graedus 9y agoI don't think it rates as "hipster", but Foundation works fine. https://foundation.zurb.com/ https://foundation.zurb.com/
- glownshow 9y agoCheck out bulma, you wont regret.
- gbugniot 9y agoBrutalist design http://brutalistwebsites.com http://brutalistwebsites.com
- mrisoli 9y agoI'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.
- tzahola 9y agoThis is not brutalism. It’s more like dada.
- brador 9y agoBrutalism is features before design. A cement tower block is an example in architecture. http://skimfeed.com http://skimfeed.com is an example of a website that follows brutalist ideals. Early craigslist and early search engines are good examples too.
- mrisoli 9y agoI 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/ http://www.xtragear.services/ ), which is the source of my confusion.
- tzahola 9y agoThese 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.
- atonse 9y agoI like a lot of these but personally bootstrap has inertia going for it. I have a dozen projects that use Bootstrap and it just feels like a lot of work to change that paradigm now for one solitary project. 22 year old me: "Man you sound old."
- paxy 9y ago"Frameworks and tools" is a very broad category. Check out React, Angular and Vue if you're looking beyond design/CSS.
- statico 9y agoI'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. [1]: https://minicss.org/ https://minicss.org/ [2]: https://www.muicss.com/ https://www.muicss.com/ [3]: https://github.com/statico/aspen/blob/master/pages/index.js#L118-L136 https://github.com/statico/aspen/blob/master/pages/index.js#... [4]: https://material-ui-next.com/ https://material-ui-next.com/
- Jaepa 9y agoI'm a fan of spectre(https://picturepan2.github.io/spectre/getting-started.html https://picturepan2.github.io/spectre/getting-started.html). There is also: - UiKit - https://getuikit.com https://getuikit.com - Bulma - https://bulma.io/ https://bulma.io/ - Sematic - https://semantic-ui.com/ https://semantic-ui.com/ NOTE: I'm not a front end person, have used a couple of these for various personal projects.
- temuze 9y agoWorth mentioning that Semantic has some first-rate React bindings: https://react.semantic-ui.com/ https://react.semantic-ui.com/ 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.
- mjmein 9y agoI 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.
- proyb2 9y agohttps://codepen.io https://codepen.io to search for tips and tricks which you probably never knew you could do more than Bootstrap, Tailwind, Bulma, etc.
- achairapart 9y agoBasscss[0] + some add-ons[1], everything you need in ~5Kb. [0]: http://basscss.com/ http://basscss.com/ [1]: https://github.com/basscss/addons https://github.com/basscss/addons
- pookeh 9y agoThere's also AntD: https://ant.design/ https://ant.design/ Check the links at the bottom of that site for more addons (such as this: http://motion.ant.design/ http://motion.ant.design/)
- tabeth 9y agoI really like Tachyons. 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.
- atoko 9y agoI’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) https://github.com/wix/wix-style-react https://github.com/wix/wix-style-react
- hmhrex 9y agoCongrat Bootstrap team! 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!
- 0xADADA 9y agoNice!
- pg_bot 9y agoCongrats on shipping the new version! 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.
- ryanSrich 9y agoSimilar 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.
- crescentfresh 9y agoIs there a resource to get an overview of the difference(s) between v4 and Bootstrap 3? Speaking as someone who has not been following v4 development.
- blowski 9y agoThe biggest change I’m aware of is using flexbox.
- merb 9y agothey now use different colors and removed panels, wells, etc.. this is pretty big aswell.
- slantedview 9y agohttp://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/ http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
- forgot-my-pw 9y agoDetailed list: https://getbootstrap.com/docs/4.0/migration/ https://getbootstrap.com/docs/4.0/migration/
- butz 9y agoLook out for dropped push and pull modifier classes and new breakpoints.
- uses 9y agoThe 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.
- dwg 9y agoFor React users I'll point out a great integration library http://reactstrap.github.io/ 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.
- Kiro 9y agoI would love something similar but without CSS files and classes. Something that makes it CSS-in-JS.
- dwg 9y agoTon 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.
- dwg 9y agoShould also mention that it's probably just a matter of time, especially given that "mixed" approach doesn't really work in react-native.
- williamstein 9y agoHelp: in general, should I use http://reactstrap.github.io/ http://reactstrap.github.io/ or https://react-bootstrap.github.io/ https://react-bootstrap.github.io/ ?
- dwg 9y agoBoth 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.
- kentosi 9y agoWell done to the Bootstrap team! 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?
- styfle 9y agoI was surprised too. This issue[0] basically says the team is too small to rewrite and remove jQuery as a dependency. [0]: https://github.com/twbs/bootstrap/issues/23204 https://github.com/twbs/bootstrap/issues/23204
- petetnt 9y agoThere's a PR nearing close to jQueryless version: https://github.com/twbs/bootstrap/pull/23586 https://github.com/twbs/bootstrap/pull/23586 One of the remaining pieces also has a PR: https://github.com/twbs/bootstrap/pull/24879 https://github.com/twbs/bootstrap/pull/24879 Too bad this didn't land to BS4 though.
- seanwilson 9y agoIs 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.
- subbz 9y agoYou can strip off the things you don't need using SASS.
- gbuk2013 9y agoYou 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): SASS = ./node_modules/.bin/node-sass %.min.css: %.scss $(SASS) \ --output-style compressed \ --source-map true \ --source-map-contents true \ $< $@
- tannhaeuser 9y agoBit 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.
- dqv 9y agoIt's a very good builder library with a lot of useful SCSS utilities. You can pick and choose what you want to include in the final output.
- seanwilson 9y agoIt'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.
- eli_gottlieb 9y agoWoah, it's finally out? We'd been using the alphas for so long!
- mcescalante 9y agoI'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: Bootstrap: https://ng-bootstrap.github.io/#/getting-started https://ng-bootstrap.github.io/#/getting-started Vue: https://bootstrap-vue.js.org/docs https://bootstrap-vue.js.org/docs
- matthoiland 9y agoVue + Bootstrap 4 + Bootstrap-Vue = Ah yiss.
- michaelbuckbee 9y agoMy 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. 1 - http://nymag.com/selectall/2018/01/hawaii-missile-warning-set-off-by-bad-design.html http://nymag.com/selectall/2018/01/hawaii-missile-warning-se...
- bovermyer 9y agoBootstrap's been a great asset to the community. For my own projects, though, I've moved to using Bulma instead for baseline design.
- zhirzh 9y agoI respect the fact that the migration guide[1] is detailed and fine-grained [1]: https://getbootstrap.com/docs/4.0/migration/ https://getbootstrap.com/docs/4.0/migration/
- Pigo 9y agoI 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.
- styfle 9y agoWhy is this marked as a duplicate? Where is the main discussion happening?
- rhapsodic 9y agoThis 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.
- jimmcslim 9y agoAnyone successfully combining CSS Grid and Bootstrap (for the latter's other components, typography and styles)?