14 ms·
Shoelace.css – A back to the basics CSS starter kit
- apeacox 9y agoInteresting project. However, the size is still big and it doesn't use flexbox. I'll stick on bulma.io
- diggan 9y agoBig compared to what? Just downloaded 0.5.0 of Bulma and it's at 268KB while Shoelace.css seems to be 32KB
- shincert 9y agohttps://github.com/claviska/shoelace-css/pull/10 https://github.com/claviska/shoelace-css/pull/10 This PR will reduce the size down to 18KB.
- shincert 9y agoWhy is not using flexbox a bad thing? It recommends the new CSS Grid instead.
- extra88 9y agoIt's too soon to rely on CSS Grid. A lot of people don't (and sometimes can't) use a browser that's less than four months old. Can I Use estimates ~44% of users don't use a browser that supports the current syntax [0]. IE11 will never support the current CSS Grid syntax but does support Flexbox (with some bugs). Edge will support the current CSS Grid syntax but doesn't yet. Older phones and tablets won't support CSS Grid. [0] http://caniuse.com/#feat=css-grid http://caniuse.com/#feat=css-grid
- claviska 9y agoIt's soon depending on your requirements, but Shoelace is forward thinking and will only become more useful and relevant as CSS Grid adoption rises. As for Edge, it's 100% as of 16.
- extra88 9y agoIf you're developing sites for circumstances where you can control what browser clients use, fine. Very few sites developing in that situation. Edge 16 hasn't been released yet. I look forward to CSS Grid being widely available and in the meantime degrading gracefully in non-supporting browsers is often viable. My concern is for the users of sites developed by the many people who do not give any thought to how their site performs using anything other than what they personally use.
- shincert 9y agoIrrelevant for a framework that wants to be future-proof and bleeding edge.
- extra88 9y agoAnything widely implemented by browsers is future-proof. Being on the bleeding edge guarantees failure for lots of users.
- SippinLean 9y agoRelevant, however for a framework to be used in production
- Lio 9y agoI was under the impression this project also depends on CSS variables. If your target browser can't support CSS Grid it's probably too old to support CSS Variables (CSSS custom properties) anyway.
- extra88 9y agoChrome, Firefox, and Safari added support for the current CSS Grid syntax in March 2017. CSS Variable support is older. Chrome and Safari have supported CSS Variables since March 2016, Firefox since July 2014. Edge only added support (with bugs) this year and of course IE11 will never support them. Older devices that can't upgrade to iOS 10 or later, like the iPhone 4S, can use CSS Variables. http://caniuse.com/#feat=css-variables http://caniuse.com/#feat=css-variables
- petepete 9y agoFor people who want to go smaller than Bulma, I recommend Milligram. It's very well organised and easy to craft in whichever direction you need http://milligram.io http://milligram.io
- cornedor 9y agoA lot of styles are being applied without you having to set a class. For example, all tables are styled. This can get in the way really fast if you want to do your own styles for a element.
- noway421 9y agoGood point. Styling h1-h6 is good alongside the typography look and feel, but styling <table> without a class is misguided.
- claviska 9y agoSomeone else asked this so figured I'd share my response: https://github.com/claviska/shoelace-css/issues/12#issuecomment-319352472 https://github.com/claviska/shoelace-css/issues/12#issuecomm...
- jessaustin 9y agoI think you're exactly right about this. The <tag class="tag"> idiom has always annoyed me.
- SippinLean 9y ago>I've never used a <table> without <table class="table">. It's redundant. It's not redundant, an element selector has a different specificity than a class selector. Much easier to maintain when Everything Is A Class (especially when paired with BEM, for very flat selectors). It's the reason Bootstrap stopped doing this. Who cares if it's redundant? Classes are cheap and repeated strings cost you almost nothing after Gzip.
- shincert 9y agoHow is it much easier to maintain?
- SippinLean 9y agoBecause when everything is a class (even better, every selector is a single class like BEM strives for) overwriting rules is much easier because they all have the same specificity. When you mix element selectors with class, ID, and multi-class (.foo.bar) selectors the specificity of each is different, and overwriting them means writing needlessly complicated selectors that are then in turn harder to maintain. Bootstrap 4 goes as far as eliminating most sibling/child combinators (>, +, etc) because they add specificity. Anyone that's tried to write custom classes for list elements in Bootstrap 3 (.list-inline>li) has experienced this. http://v4-alpha.getbootstrap.com/migration/#navs http://v4-alpha.getbootstrap.com/migration/#navs
- adrianN 9y agoAnd here I thought that http://motherfuckingwebsite.com http://motherfuckingwebsite.com was the basics and http://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com was a more "advanced" starting kit for styling.
- philbarr 9y agobettermotherfuckingwebsite makes some good points, whilst completely avoiding the rather large elephant in the room - pictures.
- Datyedyeguy 9y agohttps://thebestmotherfucking.website/ https://thebestmotherfucking.website/ covers having images, among a few other tweaks on the motherfuckingwebsite and bettermotherfuckingwebsite formula.
- deleted 9y ago[deleted]
- Radle 9y agoWhat really annoys me is that the says his total site has a size of 34.97 KB + 27.83KB in an image, but JQuery with 32kB is to much. I wouldn't really believe that 60kb vs 90 makes a huge difference. Website get bloated at a different place.
- Radle 9y agoBootstrap gzipped is also only 20kb.
- Semaphor 9y ago> Doesn't load massive images or scripts. We should all care about people who still use IPoAC That makes no sense. IPoAC doesn't really care if you add a few megs of scripts and images. Hell, it doesn't care if you add a few gigs. It will load at more or less the same speed as a single text document.
- peter_retief 9y agoJust what I wanted, been looking at bulma/flexbox and bootstap which are great but not small/clean/simple enough - thanks!
- cdevs 9y agoSince there's a sprinkling of negative feedback I'll say something positive. Usually when I see something like this pop up it still looks horrible or does something rediculously glitchy instantly on a mobile phone when all I wanted to see was a table or a form and this looked great on a mobile phone. I used skeleton when I hated making CSS pretty in college and I probably would have dropped this in instead. I like to say I'm a minimalist when it comes to CSS and JavaScript but then I have to think about other employees and the garbage they can produce when not contained.
- TheAceOfHearts 9y agoIf you're gonna use some random CDN, you should use the integrity attribute to confirm the resource doesn't unexpectedly change. I'd encourage users to generate their own CSS bundle, so you only pull in whatever styles you need. Myth looks to be unmaintained. You can achieve the same thing with postcss and cssnext [0]. [0] http://cssnext.io http://cssnext.io
- err4nt 9y agoI don't think CSSnext is actively maintained either :/ Also, related to CSSnext — isn't the @apply spec idea dead? Does that make CSSnext “yesterday's vision of tomorrow's CSS” but not what we think the future of CSS will look like now?
- striking 9y agoRelevant discussions to "@apply": https://discourse.wicg.io/t/needed-new-champion-for-css-apply-rule/2012/12 https://discourse.wicg.io/t/needed-new-champion-for-css-appl... and the linked http://www.xanthir.com/b4o00 http://www.xanthir.com/b4o00 ("Why I Abandoned @apply")
- bpicolo 9y agoThe one time I tried postcss, I was pretty let down by how poorly plugins would interact with eachother. There's definitely a huge benefit to the less/sass model where e.g. variables are a first class concept that everything can appropriately make use of. In the first day of use I hit all sorts of edge cases that couldn't be solved with the sort of pipeline postcss does.
- deleted 9y ago[deleted]
- fareesh 9y agoIs the "you don't need a grid" meme true when you take into account support for IE10, Kitkat, IOS9 and Safari 10? Is the polyfill as painless as advertised?
- claviska 9y agoSure. If you need a grid system feel free to tack one on. There's a link in the docs to the Bootstrap grid system without any extras that works well and is familiar.
- collider 9y agoI know it's not fully supported across browsers yet but it would be cool, if the new css grid spec were supported.
- SippinLean 9y agoThe point of a library or framework is that I don't need to tack one on. I could spend time writing my own grid system that uses CSS Grid and only supports the latest browsers (without a polyfill) or just use Bootstrap 3 or 4's grid, which has been tested already, supports lots of browsers and requires no effort. I know this bills itself as a "reset" but when you look at the buttons, text utilities, spacing utilities etc it's far beyond that. In many cases it's just re-using Bootstrap's naming conventions and code. As far as I can tell there's nothing like Bootstrap's theme customization tool for it, so I'd have to do it all by hand.
- claviska 9y ago"If you need a grid system," Not "you need to add your own." In the near future, grid systems will be more and more obsolete (https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/ https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-ne...), and Shoelace is prepared for that. Why add the weight if you don't need it?
- SippinLean 9y ago
- noway421 9y agoThis is extremely cool and would definitely move the web forward. I would definitely use that for internal projects where compatibility requirements are not challenging and a proper ui kit is an overkill.
- tga 9y agoMay I suggest another great back to basics CSS framework: http://bootstrapdocs.com/v1.4.0/docs/ http://bootstrapdocs.com/v1.4.0/docs/ It's only 12K minified and it includes everything you've come to expect from Bootstrap (that's now 120K minified). As a bonus, you get full _IE7_ support for all your friendly third world enterprise customers -- and no worries about responsive design because that's not supported at all!
- jaymzcampbell 9y agoAgreed - I made the mistake of using a small CSS starter framework and regretted it a few weeks into the project. CSS size isn't usually a problem for anything I do (internal backends typically) so I tend to just put bootstrap in and go. I think things like this (Shoelace) are a great learning experience for the developer(s) in question or for fun throwaway stuff. You could make an argument for them for a team project where there's wide agreement, but for anything I will need to maintain or share with someone or hand off I pretty much only use Bootstrap as a starting point. Saves a lot of headaches down the line.
- Kiro 9y agoYou're not really agreeing though. The poster is suggesting Bootstrap v1.
- jaymzcampbell 9y agoI am IMO; V4 might be a total rewrite but there's still some commonality between it and V1 with class names & concepts. I wasn't suggesting that current bootstrap and v1 are the same thing. For anything that I would need to support or work with others on, using a well-established CSS framework like Bootstrap (v-whatever) has always been safer and more productive in the long run. YMMV.
- deleted 9y ago[deleted]
- nrjames 9y agoUse the term "third world" with your clients and they may wish to no longer be your clients. It's pretty outdated and almost never used in a professional context any longer. http://www.npr.org/sections/goatsandsoda/2015/01/04/372684438/if-you-shouldnt-call-it-the-third-world-what-should-you-call-it http://www.npr.org/sections/goatsandsoda/2015/01/04/37268443...
- hardwaresofton 9y ago"Back to basics": > css variables > 32KB (unzipped) That said, I do love it though -- I have yet to dig into the CSS variables spec but I like that it offers near-bootstrap level functionality for a lot less size. Compared to my usual go-to, https://purecss.io/ https://purecss.io/ though, it's super duper heavy, a factor of 10. Then again, pure doesn't have as many nice-to-haves. Also, I really like the height utilities... I find myself writing these two utility classes ALL the time: .full-height { height: 100%; } .full-min-height { min-height: 100%; }
- Kiro 9y agoI used Pure in one project and this thing drove me insane: https://purecss.io/grids/#using-grids-with-custom-fonts https://purecss.io/grids/#using-grids-with-custom-fonts Am I really the only one who want to use another font than sans-serif with Pure? I had to hard-override the font on so many places just because sans-serif had such high specificity already.
- harrygeez 9y agoWhen it comes to css frameworks you're not supposed to override the styles. Most of them give you an option to customize the setup or can be modified easily by changing a few SASS variables.
- hardwaresofton 9y agoWhile that might be true, I do take it as a dis-advantage that the frameworks can't be easily overridden. I can just imagine the wasted minutes now, setting a font on the page only to watch it not change and wondering why pure would pick such specificity only to set the font to sans-serif. Imagine if they'd done that with the other bits? Made the styling so specific that you couldn't easily style on top of it. Also I believe that Pure doesn't do the whole configure-with-sass thing -- though it can be customized, it's CSS only (https://github.com/yahoo/pure https://github.com/yahoo/pure). I wasn't aware of this shortcoming of Pure (maybe because I haven't used so many custom fonts), but I'm going to be keeping it in mind for the future.
- yoshuaw 9y agoI'm not sure about this one. Got my doubts how well it'll hold up after 4 months of development, under deadlines, with multiple people on the team. My gut tells me you'll end up not using half the components that are included, and bend over backwards to make the config do what you want it to. I much rather subscribe to the thinking in http://tachyons.io/ http://tachyons.io/ - just enough helper classes to create any layout you desire, and doesn't mess with defaults which means you can extend it to cover all edge cases.
- supernumerary 9y agoI like http://basscss.com/ http://basscss.com/ - @2kb... and ace if more is needed...http://basscss.com/ace/ http://basscss.com/ace/
- err4nt 9y agoThe BassCSS site (and ACE site) both contain 100% code samples, but 0 previews of what it looks like! How are you supposed to look and see what you need or what's available?
- yellowapple 9y agoIs the BassCSS website itself not a preview of what it looks like?
- supernumerary 9y agoGood point, this irked me and then I forgot about it...
- claviska 9y agoThanks for nearly crashing my server this morning xD If you like Shoelace.css, would you vote it up on Product Hunt? https://www.producthunt.com/posts/shoelace-css https://www.producthunt.com/posts/shoelace-css Thanks :)
- rado 9y agoGood to see minimal templates/frameworks. Most of them don't have many demos, here is one with 28 – https://radogado.github.io/natuive/#showcase https://radogado.github.io/natuive/#showcase
- andrewfromx 9y agosakura? https://github.com/oxalorg/sakura https://github.com/oxalorg/sakura
- Teichopsia 9y agoThanks for this. I've been working on something, if not just like this, quite similar as a learning experience - and to have as a starter kit. It isn't and was not going to be as 1/3 complete as yours, but am definitely going to be reading through your code.
- styfle 9y agoVery cool domain name! We should all start using `.style` TLD for css frameworks.
- manigandham 9y agoFor CDNs, if you're running an open-source project then it's best to go with https://www.jsdelivr.com/ https://www.jsdelivr.com/ It'll automatically handle github or npm packages or any custom setup if you need it. For example: https://cdn.jsdelivr.net/gh/claviska/shoelace-css@1.0.0-beta5/dist/shoelace.css https://cdn.jsdelivr.net/gh/claviska/shoelace-css@1.0.0-beta...
- styfle 9y agoAlso there's unpkg for npm projects. https://unpkg.com https://unpkg.com
- deleted 9y ago[deleted]
- manigandham 9y agounpkg.com is nice but it's only really supported by cloudflare (who also back cdnjs and a few others) and just "best-effort" on reliability by 1 person. jsDelivr has a lot more sponsors and a bigger network.
- styfle 9y agoThanks for the response. I found out about unpkg because of React.js and there was a discussion a few days ago regarding a "default" CDN here[0] where the author, mjackson, replies. No one mentioned jsdeliver :/ [0]: https://github.com/facebook/react/issues/10294#issuecomment-318928557 https://github.com/facebook/react/issues/10294#issuecomment-...
- oregontechninja 9y agoSkeleton.css is a treasure of a tiny css framework. http://getskeleton.com/ http://getskeleton.com/
- OverThere 9y agoSkeleton.css is my current favorite bare bones framework. Its last update on github was 3 years ago though, so I'm checking around to see if there's any similar bare bones framework. I know an update to skeleton.css might not be necessary because everything works, but Shoelace looks promising.
- dceddia 9y agoThis assumption/worldview is interesting. I recognize myself thinking this way too, but on the face of it, it's a bit weird: if a project does not see continuous updates then we consider it to be outdated and worthless. This definitely applies more to some things than others, but I think it's worth questioning, too. Does the thing still work? Was it great 3 years ago? Is there a reason it's less great now (other than that it was created 3 years ago)? FWIW I based my blog theme on Skeleton. I must admit that the 3 year age gave me pause (irrationally, probably) and that it's worked out nicely.
- aphextron 9y ago>"<style> :root { --body-color: white; --body-bg-color: black; --color-primary: #09d; } </style>" ....what? Is this even valid CSS?
- tickthokk 9y agoYep! https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v... https://developer.mozilla.org/en-US/docs/Web/CSS/:root https://developer.mozilla.org/en-US/docs/Web/CSS/:root Unfortunately since IE doesn't use it, most of us won't be able to either, as much as we want to :(
- andyford 9y agoI'm glad to see another viable CSS non-framework and Shoelace looks very promising. I haven't put it through its paces yet, but found a nitpicky thing... why have a "table td" selector? You can't have a td outside of a table anyway. This is top of mind for me because I was just grappling with Bootstrap's lovely specificity nightmare ".table > tbody > tr > td"
- mattbgates 9y agoI make it a point that with every project I do, I never use the same CSS framework. This gives all my products a different look every time. I definitely love simple and unique. I've added this CSS framework as one I will be using. Thanks for sharing!
- gorm 9y agoSounds like a good and fun plan. You must have tested a few, so which of the not so obvious ones would you recommend?
- mattbgates 9y agoHey gorm, there are a few where once you get into them.. you realize they are a bit more complicated to use or just don't suit your needs. I tend to favor CSS the most and stay away from sass and less platforms, even though performance is supposedly better. I think it really depends on personal preference. I have stayed away from using the larger CSS frameworks. I won't mention them because I don't think it's right to "call out" CSS frameworks when its just my own personal usage of some frameworks over others. I will mention ones that I have used: Bootstrap ( http://getbootstrap.com/ http://getbootstrap.com/ ) Semantic UI ( https://semantic-ui.com/ https://semantic-ui.com/ ) Skeleton ( http://getskeleton.com/ http://getskeleton.com/ ) GetFlakes ( http://getflakes.com http://getflakes.com ) Milligram ( http://milligram.github.io/ http://milligram.github.io/ ) HackCSS ( http://hackcss.com/ http://hackcss.com/ ) Furtive ( http://furtive.co/ http://furtive.co/ ) BassCSS ( http://basscss.com/ http://basscss.com/ ) w3.css ( https://www.w3schools.com/w3css/ https://www.w3schools.com/w3css/ ) Spectre ( https://picturepan2.github.io/spectre/ https://picturepan2.github.io/spectre/ ) CaiuSS ( http://ionicabizau.github.io/CaiuSS/ http://ionicabizau.github.io/CaiuSS/ )
- DonutDeflector 9y agoI moved from using Skeleton to using Spectre with the Pure grid system. I really like the stuff and fluff Spectre offers: cards, navigation bar, etc. Pure's grid is what I use exclusively. Simple, easy, and targets the screen sizes I want,
- csomar 9y agoUnless they have a rule like: Each commit must reduce the number of lines/size of code or at least keep it exactly the same. What is going to prevent this from becoming the next bootstrap if the project becomes successful?
- elliotec 9y agoI like to use Marx https://github.com/mblode/marx https://github.com/mblode/marx
- DonutDeflector 9y agoI like to use Spectre,css: https://picturepan2.github.io/spectre/ https://picturepan2.github.io/spectre/ It has styling for a navbar, panels, and empty states, which is quite neat. Spectre has a flexbox-based grid, which I ditched in favour of Pure's grid simply because it targets the screen sizes I want: https://purecss.io/grids/ https://purecss.io/grids/ Shoelace,css is interesting. Perhaps I'll choose it for my next project.