TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Bulma: Modern CSS framework based on Flexbox

146 点作者 dkannan超过 9 年前

9 条评论

RickS超过 9 年前
Did a quick pass of the docs, and the grid system seems to be opinionated&#x2F;unconfigurable w&#x2F;r&#x2F;t changing column ratios as device width scales. Everything is 100% width at mobile size, and once you pass that breakpoint, there&#x27;s no adjustment mechanism at any other size.<p>That&#x27;s a big step backwards from bootstrap&#x27;s col-breakpoint-width, IMO.<p>It also fails to address nesting columns within each other.<p>This feels more like a rudimentary grid system that happens to have some button styles, rather than a &quot;framework&quot;.<p>If you want a bootstrap-like grid experience with flexbox and sans the bloat, I&#x27;ve had a decent experience with this: <a href="http:&#x2F;&#x2F;flexboxgrid.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;flexboxgrid.com&#x2F;</a>
评论 #11006015 未加载
评论 #11005685 未加载
评论 #11005671 未加载
评论 #11005704 未加载
Tomte超过 9 年前
I haven&#x27;t found a way to handle &lt;aside&gt; with Flexbox.<p>Intended behaviour is that you&#x27;re writing paragraphs of &lt;p&gt;, then a &lt;p&gt; that you wish to annotate, then the &lt;aside&gt;, then some more &lt;p&gt;.<p>The aside should be, well, on the side. In the margin.<p>So far, with floating &lt;aside&gt; you need to have the &lt;aside&gt; before the &lt;p&gt; that it belongs to, which is semantically false.<p>I had hopes with Flexbox to finally solve this issue, but it doesn&#x27;t look possible, because if you imagine it as a big grid of two columns, the text would have to flow through only the left column, while only the &lt;aside&gt; would have to be pushed to the right column.
评论 #11006756 未加载
评论 #11007465 未加载
评论 #11006655 未加载
评论 #11006057 未加载
romanovcode超过 9 年前
Am I the only one who doesn&#x27;t understand why every single piece of code needs to be installed through npm?<p>Even css? Come on!
评论 #11006830 未加载
评论 #11006825 未加载
评论 #11008158 未加载
wanda超过 9 年前
Just as popular JavaScript libraries spawn many superfluous forks and microframeworks, the landing of Flexbox has resulted in dozens of these CSS &#x27;frameworks&#x27; and grid systems:<p>1. <a href="http:&#x2F;&#x2F;basegui.de" rel="nofollow">http:&#x2F;&#x2F;basegui.de</a><p>2. <a href="https:&#x2F;&#x2F;github.com&#x2F;ButaneCSS&#x2F;butanecss" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ButaneCSS&#x2F;butanecss</a><p>3. <a href="http:&#x2F;&#x2F;juicedcss.com" rel="nofollow">http:&#x2F;&#x2F;juicedcss.com</a><p>4. <a href="http:&#x2F;&#x2F;bowlingx.github.io&#x2F;flexcss" rel="nofollow">http:&#x2F;&#x2F;bowlingx.github.io&#x2F;flexcss</a><p>5. <a href="http:&#x2F;&#x2F;codepen.io&#x2F;geoffyuen&#x2F;pen&#x2F;ogrPbZ" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;geoffyuen&#x2F;pen&#x2F;ogrPbZ</a><p>6. <a href="https:&#x2F;&#x2F;github.com&#x2F;meerita&#x2F;flexsasscandy" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;meerita&#x2F;flexsasscandy</a><p>7. <a href="http:&#x2F;&#x2F;getmdl.io&#x2F;components&#x2F;index.html#layout-section&#x2F;grid" rel="nofollow">http:&#x2F;&#x2F;getmdl.io&#x2F;components&#x2F;index.html#layout-section&#x2F;grid</a><p>8. <a href="https:&#x2F;&#x2F;kevinpy.com&#x2F;Projects&#x2F;Flexo" rel="nofollow">https:&#x2F;&#x2F;kevinpy.com&#x2F;Projects&#x2F;Flexo</a><p>9. <a href="http:&#x2F;&#x2F;philippkuehn.github.io&#x2F;gridilydidily" rel="nofollow">http:&#x2F;&#x2F;philippkuehn.github.io&#x2F;gridilydidily</a><p>10. <a href="http:&#x2F;&#x2F;stylusgrid.com" rel="nofollow">http:&#x2F;&#x2F;stylusgrid.com</a><p>11. <a href="https:&#x2F;&#x2F;github.com&#x2F;IonicaBizau&#x2F;gridly" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;IonicaBizau&#x2F;gridly</a><p>12. <a href="https:&#x2F;&#x2F;github.com&#x2F;colourgarden&#x2F;avalanche" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;colourgarden&#x2F;avalanche</a><p>13. <a href="https:&#x2F;&#x2F;milligram.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;milligram.github.io&#x2F;</a><p>14. <a href="https:&#x2F;&#x2F;github.com&#x2F;ButaneCSS&#x2F;butanecss" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ButaneCSS&#x2F;butanecss</a><p>15. <a href="http:&#x2F;&#x2F;bulma.io&#x2F;documentation&#x2F;grid&#x2F;" rel="nofollow">http:&#x2F;&#x2F;bulma.io&#x2F;documentation&#x2F;grid&#x2F;</a><p>16. <a href="http:&#x2F;&#x2F;gridlex.devlint.fr&#x2F;" rel="nofollow">http:&#x2F;&#x2F;gridlex.devlint.fr&#x2F;</a><p>17. <a href="http:&#x2F;&#x2F;crabcss.com" rel="nofollow">http:&#x2F;&#x2F;crabcss.com</a><p>and that&#x27;s but a fraction of the full list.<p>I haven&#x27;t bothered to sit down and actually assess whether these flexbox grids actually differ from each other (my gut says that it&#x27;s not possible for them to differ too much). My gut also tells me that there has to be an apex, an optimal Flex-based grid from which there can be no improvement.<p>I think a big part of the problem of why websites all look a bit similar is because they&#x27;re all developed using Bootstrap, Bourbon or Foundation, and apparently on the rare occasion where a front-end framework is not used, an offshoot or &quot;heavily-inspired by&quot; alternative is used instead.<p>Nobody is thinking about what &#x2F;could&#x2F; be, but rather what can be done in the least time to produce the best approximation of a contemporary website. Nobody wants to push the boundaries. Maybe we&#x27;ve reached an optimal paradigm for the design and layout of websites. I don&#x27;t think so.<p>I always implement my own CSS, mainly because I really don&#x27;t like carrying frameworks around. If I need all of a framework&#x27;s features, I&#x27;ll consider using it. Since I never need all of a framework&#x27;s freatures, that never happens. If I ever do need a full front-end framework&#x27;s worth of features, here&#x27;s a framework that seems flexible, modular and solid to me: <a href="http:&#x2F;&#x2F;www.basscss.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.basscss.com&#x2F;</a><p>and if you want a great grid, look at this: <a href="http:&#x2F;&#x2F;peterramsing.github.io&#x2F;lost&#x2F;" rel="nofollow">http:&#x2F;&#x2F;peterramsing.github.io&#x2F;lost&#x2F;</a><p>and if you want to wait for a more powerful future grid tool, investigate the CSS Grid Spec:<p><a href="http:&#x2F;&#x2F;gridbyexample.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;gridbyexample.com&#x2F;</a><p><a href="http:&#x2F;&#x2F;gridbyexample.com&#x2F;examples&#x2F;page-layout&#x2F;" rel="nofollow">http:&#x2F;&#x2F;gridbyexample.com&#x2F;examples&#x2F;page-layout&#x2F;</a><p><a href="http:&#x2F;&#x2F;abookapart.com&#x2F;products&#x2F;get-ready-for-css-grid-layout" rel="nofollow">http:&#x2F;&#x2F;abookapart.com&#x2F;products&#x2F;get-ready-for-css-grid-layout</a><p><a href="https:&#x2F;&#x2F;24ways.org&#x2F;2015&#x2F;grid-flexbox-box-alignment-our-new-system-for-layout&#x2F;" rel="nofollow">https:&#x2F;&#x2F;24ways.org&#x2F;2015&#x2F;grid-flexbox-box-alignment-our-new-s...</a> <a href="https:&#x2F;&#x2F;rachelandrew.co.uk&#x2F;archives&#x2F;2015&#x2F;11&#x2F;03&#x2F;three-years-with-css-grid-layout&#x2F;" rel="nofollow">https:&#x2F;&#x2F;rachelandrew.co.uk&#x2F;archives&#x2F;2015&#x2F;11&#x2F;03&#x2F;three-years-w...</a> <a href="https:&#x2F;&#x2F;rachelandrew.co.uk&#x2F;archives&#x2F;2015&#x2F;04&#x2F;14&#x2F;grid-layout-automatic-placement-and-packing-modes&#x2F;" rel="nofollow">https:&#x2F;&#x2F;rachelandrew.co.uk&#x2F;archives&#x2F;2015&#x2F;04&#x2F;14&#x2F;grid-layout-a...</a>
评论 #11007005 未加载
评论 #11006291 未加载
评论 #11006978 未加载
评论 #11008307 未加载
评论 #11007359 未加载
评论 #11006292 未加载
cfv超过 9 年前
This can be beautiful, but I&#x27;d need SOME KIND of back-compatible functionality, even if it&#x27;s just to tell old IE users &quot;hey you&#x27;re totally missing on stuff, check this out&quot;
yawaramin超过 9 年前
I&#x27;ve been working on a toy CRUD app in Elm, after hearing that Richard Feldman wants to &#x27;make the backend team jealous!&#x27; and wanting to see why I should be jealous.<p>Anyway, I managed to quickly style it with Bulma yesterday, and I think it looks nice: <a href="https:&#x2F;&#x2F;dl.dropboxusercontent.com&#x2F;u&#x2F;130414&#x2F;elm-doc-mgr&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;dl.dropboxusercontent.com&#x2F;u&#x2F;130414&#x2F;elm-doc-mgr&#x2F;index...</a>
mjibson超过 9 年前
Having previously built some medium-sized apps with bootstrap and material, this is something I&#x27;d like to try for my next project. It looks simpler than either of those other two, and has enough other stuff to make it usable out of the box, unlike something like skeleton which was too minimalist for me to use easily.<p>I haven&#x27;t used flexbox ever myself. Could someone summarize why flexbox makes this framework effective?
评论 #11005668 未加载
评论 #11005670 未加载
inlineint超过 9 年前
It looks great. I think I will use it in my hobby projects instead of Bootstrap.
SwellJoe超过 9 年前
Flexbox is lovely, and this framework looks great...but, does it work with crappy browsers (e.g. every IE version prior to Edge)?
评论 #11005672 未加载
评论 #11006187 未加载