[HN Gopher] New.css - A classless CSS framework to write modern ...
___________________________________________________________________
New.css - A classless CSS framework to write modern websites using
only HTML
Author : sdan
Score : 727 points
Date : 2020-05-18 09:02 UTC (13 hours ago)
(HTM) web link (newcss.net)
(TXT) w3m dump (newcss.net)
| exampledev wrote:
| Hey everyone, developer of new.css here. I've gotten a lot of
| valuable feedback from everyone today! But I get it, new.css is
| very basic, and it's not the traditional definition of a
| framework.
|
| Please keep leaving your constructive feedback. I'm excited to
| keep making new.css something for everyone to enjoy.
| [deleted]
| torartc wrote:
| There is some very odd marketing speak here. "Vercel's impossibly
| fast cdn", taking about how hosting on Google is somehow
| unethical? This whole thing is weird for some basic default CSS.
| boksiora wrote:
| Good idea that leads to cleaner code
| Ndymium wrote:
| This reminds me of W3C Core Styles[1]. I remember using those in
| many quick pages to make them look somewhat presentable without
| spending any effort myself, when perfect styling just wasn't
| important. I wonder how many sites nowadays use their styles
| directly from their URLs.
|
| [1] https://www.w3.org/StyleSheets/Core/
| redka wrote:
| It might be just me but I can't look at websites with black
| backgrounds and white or yellow letters. My eyes hurt and when I
| turn my head elsewhere I can see shadows of the website for a
| bit. I use dark(ish) themes everywhere but such high contrast
| somehow is too much.
| ibiza wrote:
| The problem is using `white` on black instead of `gray` on
| black. The latter provides plenty of contrast while still being
| easy to read.
| zozbot234 wrote:
| OTOH, deep-black backgrounds and green letters (with
| red/yellow/white highlights) is perfect if you're using an OLED
| screen. Maybe browsers need adjustable (and site-specific)
| brightness and contrast knobs, like monitors and TV's.
| sdan wrote:
| Love dark blacks on OLED.
|
| However sometimes a dark navy blue would be better.
| buckminstrix wrote:
| I think new.css is themable.
| 1f97 wrote:
| i have exactly the same issue. so many websites nowadays choose
| to have dark themes which are essentially black backgrounds
| with white text and it is physically painful to read. if i'm
| invested enough in the article, i always try to change the user
| styles a bit to make it more bearable.
| redka wrote:
| Yep, exactly. Last ditch resort is to modify the values via
| devtools myself but usually I just skip that site.
| equinusocio wrote:
| It sounds weird, because it looks as a clone of Native Elements
| built 3 years ago.
|
| https://github.com/n-elements/core
| basilgohar wrote:
| Despite being classless, I still got a Flash of Unstyled Content
| FOUC) when I load one of the themed pages on Firefox for Android
| (technically Fennec F-Droid).
|
| So classless does not mean lightweight, perhaps?
| aidos wrote:
| This looks to be using the new css variables (well, new to me - I
| was checking on the state of the art in css just recently). I was
| looking into how you can do components now and this stuff looks
| pretty interesting, though styling of nested components using
| these techniques looked a little...hairy. Has anyone used these
| in anger?
|
| https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...
| Ndymium wrote:
| I used CSS custom properties (AKA variables) when rewriting my
| blog's frontend just recently. A few issues come to mind even
| when using the latest CSS features:
|
| 1. Nesting can still be an issue if you have complicated
| layouts. You can mostly get around this with good use of
| classes/IDs.
|
| 2. Custom properties cannot be used in media queries. This was
| my biggest problem, because you now have to repeat your
| breakpoint sizes in every place you want to use media queries
| (which is many places if you split your code into many files),
| or you can have one file with the breakpoints set a bunch of
| custom properties that are used then throughout the styling.
| But the latter method falls down if you need to use e.g.
| `display: grid` for one size and `display: block` for another
| -- you end up with tons of properties. An example of that in my
| blog's code [1].
|
| 3. I really missed the lighten/darken helpers from SCSS. Those
| would have been useful with all the colors, because now I'd
| have to calculate all of them again if I wanted to change the
| color scheme.
|
| [1]
| https://gitlab.com/Nicd/mebe-2/-/blob/f0f988e3d120c4cff54277...
| W4ldi wrote:
| I prefer MVP.css (https://andybrewer.github.io/mvp/) tbh
| mr-karan wrote:
| So basically a stripped down version of Tailwind?
| bluetwo wrote:
| I would say the opposite of tailwind.
| equinusocio wrote:
| It sounds weird because it seems a clone of Native Elements
| published 3 years ago.
|
| https://github.com/n-elements/core
| wysewun wrote:
| pair this up with the successor to intercoolerjs,
|
| https://htmx.org/
|
| and you can keep even more of your work directly in html.
| 100721 wrote:
| Tangentially related: I've been on the hunt for a CSS
| framework/drop-in that approximates the style of the Dracula
| theme - Dark background with bright, happy, bold, cotton-candy
| colors.
|
| Any suggestions?
| thebouv wrote:
| 1) I went searching for you and was quite impressed with how
| many apps and such that Dracula supports:
| https://github.com/dracula .. wow
|
| 2) I hope one of those helps you. I didn't see one specific to
| being classless or a framework for a website. But I did see a
| github-pages one that might be the closest?
| 100721 wrote:
| That actually was super helpful! I went to the GH-Pages
| preview [0] and pulled the compiled CSS file out. I hope the
| license permits reuse in this way. Thank you!
|
| [0]: https://dracula.github.io/gh-pages/
| superpermutat0r wrote:
| I don't know why but white on black premade theme given here is
| just horrible for my eyes. The text burns into my eyes and then
| anywhere I look I can see the blurry text lines.
|
| I code using a black on white editor but could I guess handle
| non-white on black themes if the non-white color wasn't as
| bright.
| alberth wrote:
| Bring back fond memories of http://www.csszengarden.com/
|
| Just plain HTML + CSS
| swissmanu wrote:
| i personally like https://igoradamenko.github.io/awsm.css/ which
| has a similar approach.
| ethanpil wrote:
| Checkout https://github.com/kognise/water.css
|
| I find water.css to be the prettiest of the classless bunch.
| byteface wrote:
| https://milligram.io/
| NiekvdMaas wrote:
| Milligram is not class-less, it's more like a light
| Bootstrap.
| pspeter3 wrote:
| This looks great, thanks for the link!
| henryfjordan wrote:
| I recently started a project using Skeleton CSS
| (http://getskeleton.com/) which is similar. It only uses
| classes to deal with the grid (which it looks like neither
| water.css nor new.css handle).
| dsego wrote:
| A css framework for communists?
| oxalorg wrote:
| Author of Sakura.css [0] here linked in the article. Thanks for
| the link ^_^, new.css looks super great!
|
| A bit more on "WHY" you'd want to use a classless theme:
|
| * Quick prototyping, especially when working on backend sites and
| can't yet be bothered to fidget with css/html.
|
| * Building a quick (but pretty) site/blog for your best friend or
| aunt!
|
| * Works amazingly with markdown generated HTML content. So it's a
| perfect match when rendering markdown but don't want to customise
| the rendering process to include specific classes.
|
| * Using it as a placeholder: I almost always start a project with
| sakura.css, just drop the link tag and you're done. Start working
| on features instantly.Once I've built the flows/components a bit
| I replace it with something like tailwind! There is no friction
| to this workflow as sakura and sisters are all classless anyways,
| so you can replace it easily.
|
| [0]: https://github.com/oxalorg/sakura
| mlok wrote:
| For some reason the footnote link on sakura did not make my
| view jump to the note (neither Firefox 76.0.1, nor Chromium
| 81.0.4044.138 / Linux Ubuntu) although it works in Wikipedia.
| oxalorg wrote:
| Hey are you talking about the footnote link [0] on the demo
| page?
|
| If so thanks for pointing it out, looks like I forgot to add
| the `fn1` footnote id on the element. Fixed it.
|
| [0]: https://oxal.org/projects/sakura/demo/#fn1
| exampledev wrote:
| Never in a thousand years would I even consider being on the
| same level as oxal's project. It's an absolute honor! Thanks so
| much for your support.
| oxalorg wrote:
| Haha thanks, you're being too humble ^_^
|
| BTW loving the xz logo and the website. Overall super cool!
| yoz-y wrote:
| Name and lede wise I prefer https://mblode.github.io/marx/
| brlewis wrote:
| There are reasonable arguments that CSS is best done with no
| classes, only semantic elements. There are reasonable arguments
| that CSS is best done with classes only, independent of element
| name. And there are valid arguments for various incompatible ways
| of naming and namespacing CSS class names. We are a long way from
| one "right" way of doing CSS.
| sreekotay wrote:
| Really nice work. One thing you might consider is making sure
| that tabs and modals work well/there is a model for them.
| Picnic.css does this well.
| hendry wrote:
| Using it now on my blog: https://natalian.org/
|
| Nice!
| sdan wrote:
| Cool!
| metalforever wrote:
| I wish people would stop mixing domains in this way. Sorry, I
| think this way of coding is shit.
| [deleted]
| dang wrote:
| We changed the URL from https://github.com/xz/new.css, which
| points to this. Both are great, but when a project has its own
| site it seems best to link to that one, as long as it links to
| the Github or equivalent page when there is one.
| MrBuddyCasino wrote:
| The thing about "classless" CSS or auto-generated class names is
| that it becomes much harder to customize a website via user
| scripts. Its not a good trend.
| savolai wrote:
| I'd love to see a list of CSS files that are actually usable out
| of the box i.e. have a reasonable column width for body text on
| both desktop and mobile.
| chadlavi wrote:
| Styling semantic tags in a library is a really bad idea, it
| assumes your css is going to be the only css used in an app. It's
| good manners to style class names instead.
| equinusocio wrote:
| You should use thing for what they're made for. Even using
| classes you can't solve the problem you're describing.
| chadlavi wrote:
| "You should use thing for what they're made for."
|
| You ever worked on a project where a non-technical PM got to
| pick technologies? I guarantee you someone is going to choose
| this CSS library in the future because they think it looks
| nice, then be confused or frustrated when it stomps over some
| other styling they want to use because it directly styles tag
| names
| weeboid wrote:
| Is this just a reset css with default styles?
| tylerchilds wrote:
| Yes
| StreamBright wrote:
| Any frontend dev out there would like to compare this with MVP
| and Tachyons? I am a bit lost when to pick over another.
| s17n wrote:
| Seems one of these things hits the front page every month or so.
| My question is, why don't the browser makers adopt something like
| this as the default stylesheet? Are they constrained by the spec
| here or is it just a matter of inertia?
| awb wrote:
| > Seems one of these things hits the front page every month or
| so.
|
| Yep! MVP.css was featured in March:
| https://news.ycombinator.com/item?id=22681270
| TheGoodBarn wrote:
| To continue the chain, we had 98.css last month, although a
| little more niche:
| https://news.ycombinator.com/item?id=22940564
| ketozhang wrote:
| Browsers do, it's the reading mode feature. However of course
| it's not a default stylesheet.
| brundolf wrote:
| I think it's a backwards-compatibility thing. Browsers take BC
| _extremely_ seriously, even when it comes to UX. Changing the
| unstyled look of different elements could break a legacy site
| that didn 't give those its own styles.
| ZeroGravitas wrote:
| The defaults inherit, so changes to the default made by a
| browser (or indeed a browser user) can cascade through to other
| sites.
|
| Probably part of this CSS is something like reboot or reset
| which will try to paper over the remaining differences between
| different browsers, I think the browsers probably are
| converging in that regard but IE11 and backwards compatibility
| still make them necessary.
| marban wrote:
| 5 comments with 5 alternatives so far. Oh the irony.
| mmsimanga wrote:
| This is the reason I actually "favourite" threads such as this
| one. The comments help me find alternatives to try out. There
| was an Ask HN, "Ask HN: Is there a search engine which excludes
| the world's biggest websites?'[0]. I commented that I search HN
| for different subjects and read through the comments. This is
| probably better than searching Google for minimal CSS.
|
| [0]https://news.ycombinator.com/item?id=23202850
| jmchuster wrote:
| A variation on Cunningham's Law?
| marban wrote:
| Without classes, CSS is a race to the bottom.
| cannedslime wrote:
| I disagree. For many simple things you can get a long way
| without or with minimal amount of classes. Coincidentially
| I am working on implementing some changes to a really bad
| case of the vile disease classinitis. With names such as:
| xyz_product__form and g-region--desktop-one-half. Lest not
| forget about their actual use in the markup: `class="form-
| field__input form-field__input--button button button--cta
| button--large button-mobile-full u-flex-1"`
|
| Ah how could I even live without getting hired for this job
| and all of its lustful classes?!
| ponyous wrote:
| Nice huh, it shows that ecosystem is really strong?
| amanzi wrote:
| This Github repository tracks a whole bunch of these drop-in CSS
| files: https://github.com/dohliam/dropin-minimal-css
|
| And you can use this demo site to switch between them all on the
| fly: https://dohliam.github.io/dropin-minimal-css/
| [deleted]
| spyckie2 wrote:
| Seeing all these styles, I can't help but get the feeling that
| we're heading towards the aesthetic minimalist ideal of mixed
| text media.
| elefantastisch wrote:
| It's a shame how few of these prevent horizontal scroll on
| mobile. Usually the table and/or video are not probably
| handled. My take away from this: Simple does not mean easy;
| check edge cases.
| awb wrote:
| It's a tricky problem. I've been battling with it on MVP.css
| (https://andybrewer.github.io/mvp/) but I think I found a
| good solution for responsive tables with some help from the
| community.
| brundolf wrote:
| As suggested by a sibling comment the key isn't to prevent
| horizontal scrolling, but to prevent content from overflowing
| a single screen width. Which isn't _hard_ per se but doesn 't
| have a one-size-fits-all solution.
| chongli wrote:
| So many websites overflow a single screen width by a
| trivial amount. This is just enough to cause accidental
| horizontal scrolling which disrupts the flow of scrolling
| the page. Very frustrating!
| brundolf wrote:
| Yep. The offenders are usually really long un-line-
| breakable words, images, or videos. In this case we have:
| href="https://newcss.net/theme/terminal.css">
|
| Which is not being allowed to break to a new line because
| it doesn't contain whitespace. A CSS rule can be used to
| allow it to break, though that can also have other,
| unwanted ramifications.
| thaumaturgy wrote:
| It's not super easy either. I ran into this also
| (https://doc.sscaffold-css.com/ysk/tables/) and the root
| cause is that the <table> element is not considered to be
| either a block-level or an inline element. It's special,
| and because it's special, some browsers support setting
| max-width on it and some don't. So tables need a container
| element or some other kind of special handling. It's an
| easy bug to overlook because the cause is so unexpected.
| petee wrote:
| As someone who constantly runs into mobile pages with poorly
| fitting content yet are still scroll-limited, I see this as a
| welcome feature.
|
| Most mobile browsers seem to lock the scroll direction while
| moving anyway, so atleast it isn't sloppy in practice, imho
| hotwire wrote:
| hah, reminds me of http://www.csszengarden.com but simpler.
| mathnmusic wrote:
| I would like these themes to go beyond a simple article view.
| We have tags like <header>, <nav>, <main>, <aside>, <section>
| and <footer> now. Should be possible to build a complete app-
| shell with classless CSS.
| awb wrote:
| I style those elements in MVP.css
| (https://github.com/andybrewer/mvp/)
| philistine wrote:
| As an exercice, I'm building my neighborhood newspaper
| website without any classes. It is surprisingly easy. With
| Grid and min(), I don't even need media queries. CSS and
| HTML in 2020 is great, if you take the time to choose only
| the latest solutions.
| mlok wrote:
| This is what I expected too. This one has nav, aside :
| http://classless.de/#extra
|
| Plus a couple bootstrap classes where HTML5 has no elements
| : grid and card.
| tudorw wrote:
| Pity I cannot just receive vanilla mark up and pick a client
| side theme.
| _ZeD_ wrote:
| I'm pretty sure firefox has this feature.
|
| the problem is no website offer custom css.
|
| for an example:
| https://stackoverflow.com/questions/48227413/what-is-the-
| pur...
| ancarda wrote:
| Seems Firefox doesn't remember the CSS you have selected
| (i.e. per page? per domain?)
|
| I can think of some uses for this if it were sticky - high
| contrast and dark mode versions for websites
| andai wrote:
| Oh wow. Does this only work on FF?
| pbhjpbhj wrote:
| I doubt it would work well but you could put a theme in
| user.css (on Firefox) and block all .css files (with uBlock,
| say). Not sure if uBlock will block <style> tags, but I think
| it can.
| bjarneh wrote:
| That's excellent. It would be funny if that 'LaTeX CSS' moved
| all images to the end of the web page..
| jacobush wrote:
| With references, of course. ;-)
| bjarneh wrote:
| Of course :-)
| ComodoHacker wrote:
| It's modern MSWord templates.
| metalliqaz wrote:
| shh
| louismerlin wrote:
| That's very cool ! My microframework is on there and I wasn't
| even aware.
| networked wrote:
| This is really useful! Thanks for linking to it.
|
| I also have a related repository. It is a gallery of
| screenshots of classless CSS themes:
| https://github.com/dbohdan/classless-css. I've just added a
| link to the drop-in CSS switcher there.
| [deleted]
| fouc wrote:
| Another one here: https://www.cssbed.com
| https://github.com/ubershmekel/cssbed
| hanniabu wrote:
| It's a shame that none of these (as far as I can tell with the
| 60% I clicked though) restrict the page width to 100% to
| prevent horizontal scrolling on mobile. Simple enough to add
| yourself, but still.
| [deleted]
| beders wrote:
| Cool. Looks nice!
|
| Wanted: class-based CSS that only deals with layout and
| positioning, not component-styles.
| onion2k wrote:
| It doesn't work properly. The body has a max-width of 750px, and
| the header uses a padding hack of 'calc(50vw - 50%)'. That 50%
| means '50% of the containing element', so if 50vw is more than
| 750px (eg your viewport is more than 1500px wide) the header
| element stops being centred and starts spilling over on the right
| hand side.
| horsawlarway wrote:
| Yeah... Looks terrible for me.
| Finster wrote:
| There's already a PR to fix this, looks like there's a missing
| space after one of the minus signs.
| emagdnim2100 wrote:
| A good place for the under-appreciated CSS 'clamp' function!
| onion2k wrote:
| ... that doesn't work in Safari or iOS, or non-Chrome Android
| browsers yet.
| Dragory wrote:
| Seems to work properly in Firefox
| (https://i.imgur.com/AQ2M1G3.png) but breaks in Chrome
| (https://i.imgur.com/U2tVg2k.png); Chrome doesn't accept the
| margin value (https://i.imgur.com/pH7X0ZO.png).
|
| When the margin works, the logic makes sense. 50vw sets the
| padding of the side in question (e.g. left) to the middle of
| the screen, 50% subtracts half of the containing element's
| width (<body>) from it. Doing this for both left and right and
| then negating it with equal negative margins results in the
| content area in the header being centered and having the same
| width as body, but the padding stretching out to the edges of
| the window.
| _threads wrote:
| We need more of these and less js livbraries
| richthegeek wrote:
| I'm not entirely sure this can be called a framework. If there
| was a Bootstrap v0.1 it would be this, before it decided to do a
| whole bunch of extra things to become a framework.
|
| A few years ago you might have simply named it "reset.css", but
| it's too opinionated to really have that name.
|
| It feels like I would spend more time undoing what it does than
| would be saved by using it.
|
| I don't hate it... but I don't entirely see the point of it.
| Semaphor wrote:
| > It feels like I would spend more time undoing what it does
| than would be saved by using it.
|
| They list use-cases:
|
| > A dead-simple blog
|
| > Collecting your most used links
|
| > Making a simple "about me" site
|
| > Rendering markdown-generated HTML
|
| It's when you have some basic HTML and just want it to look
| good.
|
| Agreed that framework is a very unfitting descriptor for it
| though.
| falcor84 wrote:
| But then, why not have this be defined by the client?
|
| I think I would like to see more websites entirely devoid of
| css, together with an evolving ecosystem of browser-side
| theme-like css rulesets to style and layout sites based on
| the page's semantics and everyone's unique preferences, like
| we style our desktops and terminals.
|
| But that's just my cloud cuckoo land, right?
| Finnucane wrote:
| >But then, why not have this be defined by the client?
|
| Because client defaults usually suck.
| sleepinseattle wrote:
| Reading mode does that, and you can have it auto-enable in
| Safari if you want.
| tylerchilds wrote:
| These types of stylesheets are sometimes referred to as Base
| Stylesheets.
|
| In practice, I've found its good to roll your own at some
| point, so you don't have to spend time undoing someone elses.
| crofrwd wrote:
| Just to point out there are also: https://native-
| elements.stackblitz.io/
| XCSme wrote:
| I am confused, why is it called a framework? From what I read
| it's just a default theme for HTML. Did I miss anything?
| StreamBright wrote:
| Because it is about frontend development.
| _0o6v wrote:
| Crazy. This isn't a "framework". It's a stylesheet.
| Iv wrote:
| That's my reaction as well... What am I missing? People really
| forgot that you can write a "reactive" website in pure HTML and
| that's what it was actually designed for?
| fouc wrote:
| Or did you mean "responsive" ?
| brundolf wrote:
| This is... not remotely what people mean when they say
| "reactive". And nobody thinks JS is necessary to get a visual
| theme that looks nice. CSS and JS frameworks serve radically
| different purposes.
| l5870uoo9y wrote:
| It's like normalize.css[1], unify elements across browsers.
|
| [1]: https://necolas.github.io/normalize.css/
| teknopurge wrote:
| hence the bubble.
| m12k wrote:
| Yeah, I think "blog theme" is probably the best it can be
| described.
| hombre_fatal wrote:
| "Classless" also made my brow furrow when I realized they
| didn't mean, say, CSS components styled without a bunch of
| classes (a la Twitter Bootstrap) but rather, it just has no
| components. It's classless because it only styles some basic
| html elements.
| wishinghand wrote:
| It seems like it styles more than just the basics, as it gets
| details, kbd, and a few others that I don't see around as
| much.
|
| Besides this isn't meant to supplant Bootstrap. It evens says
| so on the site.
| lucb1e wrote:
| That's exactly how I understood it and it sounds useful to
| me. No need to look up what styles do what, you can just use
| the standard elements and expect them to look coherent and as
| expected. E.g. "<header>" is descriptive enough since HTML5
| introduced it.
| hombre_fatal wrote:
| It didn't mean that for me because we've been sharing
| minimal css files for decades without without calling them
| frameworks or "classless". Usually when you see a new term,
| it describes a spin on the old act. If they had also called
| it a "serverless" CSS framework, I wouldn't have guessed
| they meant that the CSS file just doesn't make any HTTP
| requests.
| dominotw wrote:
| when i got this site
|
| https://dohliam.github.io/dropin-minimal-css/
|
| I see "unformatted" left aligned site for 1/2 a sec before it
| centers and get formatted.
| colourgarden wrote:
| This seems like a decent boilerplate+extras but line 1 is
| importing a custom font. Why?
|
| Unnecessarily opinionated and against the "lightweight" aims of
| this library (not knocking Inter btw - it's awesome).
| [deleted]
| rozenmd wrote:
| Use the code <link rel="stylesheet"
| href="https://newcss.net/lite.css"> for the lite version, which
| uses the system font stack rather than importing one.
| sleepychu wrote:
| There is a lite version (which I think does not import the
| font)
| nprateem wrote:
| I assume that the author must be in their teens/20s to call a
| stylesheet that is literally the most basic, primitive form of
| CSS possible "modern" :-D
| HugoDaniel wrote:
| like mvp.css https://andybrewer.github.io/mvp/
| cypressious wrote:
| Looks nice. I checked the network tab to see how light the page
| newcss.net really is. ~600kb looks good but interestingly enough,
| the favicon is the biggest asset.
| wx196 wrote:
| It may be not a good idea to use a grey input background for
| generic cases as it may confuse as disabled.
|
| https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_in...
| HugoDaniel wrote:
| This recent vibe of minimal CSS files for plain HTML tags feels
| the same as the CSS Zen Garden from years ago.
|
| Which is very good and quite welcome in the current state of
| overbloated JS frameworks that do everything.
|
| I wonder if this will also drive further the adoption of standard
| web components https://open-wc.org/guide/
| TheGoodBarn wrote:
| I was just thinking the same thing!
|
| I started typing a reply out to someone's criticism of this,
| and it had me think of it this way.
|
| I have my own personal stylesheet that I use as a plugin for
| overriding blog styles (just because I like to read text
| formatted in a specific way, a lot of blogs aren't very
| readable IMO). This style of library kinda extends that where
| the end user can "customize" or make the site look how they
| want it to (not that it's something people should be
| considering when building their blogs, but I think its fairly
| normal for people to have opinions on these things).
|
| ---
|
| I especially like it for quickly prototyping internal
| tools/sites at work. A lot of times I want something to look
| clean but don't have the bandwidth to really customize a lot of
| stuff. This allows you to write CSS for what you need, but have
| the overall page styled for you with minimal effort. (Also
| building your own css templates like this helps teach generic
| css. I think it's a good skill if anyone is within proximity of
| the web).
| josefresco wrote:
| Ah memories. I used to reference the CSS Zen Garden when
| convincing my clients about our _new_ approach to web building
| (CSS is awesome!). Never once achieved it (complete separation
| of content from style) in practice.
| brundolf wrote:
| Stylesheets have absolutely nothing to say about JS framework
| usage and vice-versa.
| mikeg8 wrote:
| In theory yes, but React and similar JS frameworks have been
| chomping away at the "cascading" of CSS for a while, in favor
| of embedding styles inside each JS component. They have
| become very much intertwined.
| discordance wrote:
| Hey sorry I'm not in the know, but what's wrong with classes and
| styling?
| yreg wrote:
| Nothing's wrong, the supposed advantage of this is that it's
| less complex and the only thing you need to learn is html.
| lucb1e wrote:
| Which most people that would use this already know and so
| really you can just skip the learning and go straight to
| using it.
| wallawe wrote:
| Nothing, but a lot of the web dev community feels like we've
| gone overboard in terms of bloated CSS frameworks and this is
| what I perceive to be a reversion back to the basic ability to
| style a document without much need for writing and learning CSS
| or the frameworks themselves.
| gremlinsinc wrote:
| As a full-stack dev who has started/but not finished tons of
| side projects because I hate the design part (okay, I'm more
| backend than frontend, I like vue/js but css/scss isn't my
| favorite part of the stack though I can do it in bulma,
| material-ui, vuetify/etc....)
|
| I think this sort of thing looks cool, though picnic.css
| (https://picnicss.com/tests) -- from another comment seems
| more my flavor.
|
| Might be a good way to focus on the functionality, maybe use
| it w/ tailwinds for extra styles where needed, and launch
| faster make some $$ hire a person to do the design stuff I
| hate to do in an actual framework or something and launch a
| prettier v2.
| alufers wrote:
| This looks more like an attempt at criticizing the bloat people
| add to their websites basically just to change the font from
| Times New Roman. I can't really see this competing with
| bootstrap, since it lacks all the custom components.
| woofie11 wrote:
| I don't think so. This is criticizing no one. Right tool for
| the right job.
|
| I write web apps which need real frameworks.
|
| I also write basic text pages, and something like this is very
| nice. It's a dying art (university professors seem like the
| last hold-outs), but it's often handy.
|
| The top comment gives a list of such frameworks, though, many
| of which look nicer than this one.
| schwartzworld wrote:
| It's obviously not meant to compete with Bootstrap.
| gwbas1c wrote:
| I love the terminal theme. I've been trying to do something that
| looks like an older terminal for a configuration page, and this
| version _almost_ does it.
|
| Why _almost_? The theme totally screws up wide tables. They bleed
| off the edge of the page, and there 's no vertical scrollbar.
| Furthermore, widening the page just moves everything, including
| the table, to the right. The only way to see a wide table is to
| have a giant window with a big empty space on the left.
| nateberkopec wrote:
| I don't understand the claims re: font loading.
|
| > Vercel's impossibly fast CDN delivers new.css and the font
| Inter using xz/fonts, so there's virtually no bloat added to your
| pages.
|
| It's 300kb of font downloads, hardly light. And the xz/fonts page
| says:
|
| >Break your users from unethical tracking networks
|
| I'm still making a request to a 3rd party CDN with an origin
| header that says what page I'm looking at, so I'm not sure what
| privacy I'm gaining here.
| toyg wrote:
| I guess the key word is "unethical".
| exampledev wrote:
| Hey, developer of both here. It's certainly not a light
| download, I understand. It's more of an effort to pull CDN
| requests to known unethical networks, namely Google Fonts,
| which are known to be used to track users between websites.
|
| I'll be more clear about this in the future, thanks for your
| opinions!
| Aissen wrote:
| I still don't see how switching from Google to a VC-backed
| CDN startup is better for ethical purposes.
| jstanley wrote:
| It's _better_ , but it's still not as good as just using
| the browser default font.
| CharlesW wrote:
| Or just serve them yourself.
| riquito wrote:
| Any source about the unethical bit? Their privacy section
| looks good
|
| https://developers.google.com/fonts/faq#what_does_using_the
| _...
| henriquez wrote:
| You can always set a referrer-policy HTTP header on the origin
| site to prevent the CDN from getting the path (or even the
| domain) of the web page. They'd still see user IP address but
| on its own that's not very useful.
| wodenokoto wrote:
| They also have a lite version that uses system fonts, for
| whatever it is worth.
| joeblau wrote:
| While I do like the style sheet that was created, the marketing
| spin on this page was off-putting to me as well.
| riezebos wrote:
| Slightly off-topic but this made me wonder: is it possible to
| store the 1000 most used web fonts locally and tell your
| browser to use the local version instead of the Google version?
| kevinzg wrote:
| Decentraleyes[0] does this for JavaScript files. There was a
| request to add fonts[1], but it hasn't been implemented.
|
| [0]: https://decentraleyes.org/ [1]:
| https://github.com/Synzvato/decentraleyes/issues/34
| riezebos wrote:
| Cool, thanks! Definitely going to install that extension.
| It seems they moved to Gitlab, I subscribed to the new
| issue[0].
|
| [0]: https://git.synz.io/Synzvato/decentraleyes/-/issues/34
___________________________________________________________________
(page generated 2020-05-18 23:00 UTC)