9 ms·
Writ – Opinionated, classless styles for semantic HTML
- pentestercrab 11y agoReminds me of a more complete version of Tacit [1]. [1] http://yegor256.github.io/tacit/ http://yegor256.github.io/tacit/
- captn3m0 11y agoI've been using tacit a lot, and its working out great for my one page apps.
- andybak 11y agoThe body font size seems tiny to me.
- chrismorgan 11y agoYeah, font-size: 14px is a bad idea. It should really, really be put back to 16px (just leave the definition out!).
- err4nt 11y agoFont sizes are even better if defined in PT instead of PX!
- chrismorgan 11y agoEh, 16px = 12pt, simple 4:3 ratio, why bother with the pt unit at all?
- theandrewbailey 11y ago16px will always be 16px, unless you redefine CSS pixel size. pt is more scalable.
- err4nt 11y agoCSS 'px' units don't map directly 1:1 with pixels in your screen, it's weird. :/ In general, CSS 'PX' is great for spacing inside and outside containers. I often use 5px or 15px padding in places that don't directly touch or contain text. Where text is involved I like to define my spacing in 'em' units because those are relative to the 'font-size', so if I change the font size the spacing will still look great!
- err4nt 11y agoI come from a graphic design background with training in typography. While you _can_ specify font-size in any units CSS understands, typography as a field has traditionally used PT and EM units for sizing and spacing. - for container size I use % or PX - for margins, spacing, and padding I use EM or PX - for text sizes I use PT or % Here's a short, good primer for typography on the web: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography http://www.markboulton.co.uk/journal/five-simple-steps-to-be...
- leni536 11y agoYeah, on 96 DPI. Anywhere else you rely on browser scaling if you don't use pt. Edit: Ok, so I'm not a web developer, so I read after it: http://www.w3.org/Style/Examples/007/units.en.html http://www.w3.org/Style/Examples/007/units.en.html Turns out I'm wrong about that 1px is required to be 1 device pixel. But the 3/4 rule is not universal and only applies to print. I don't know how different implementations handle this.
- err4nt 11y agoCSS 'pixels' are a dark, dark magic, come back to the light! CSS pixels are a measure of your viewing angle, the physical measurement of the device, and your screen's pixel density. Basically 15px should look like 15px should look like 15px, no matter what you're looking at, but because the actual pixel densities of screens differ it can be really weird to think about. You may need a 30px icon to display 15px wide on a retina screen, even though it sounds like a 15px image should be 100% large (and therefore crisp) at 15px in CSS.
- programble 11y agohttps://github.com/programble/writ/issues/7 https://github.com/programble/writ/issues/7
- renke1 11y agoWhen I first learned about CSS I was pretty intrigued by the W3C Core Styles [1]. They were a pretty good illustration of the separation of presentation from the underlying markup. [1]: http://www.w3.org/StyleSheets/Core/ http://www.w3.org/StyleSheets/Core/
- dbaupp 11y agohttp://www.csszengarden.com/ http://www.csszengarden.com/ is a neat example of that too: some wildly different visual designs with the same markup.
- ahoge 11y agoZen Garden is pretty much the opposite of what one should do nowadays. Someone wrote some markup and sprinkled a ton of CSS hooks on top and then someone else came along and wrote the CSS. It uses these 12 IDs: css-zen-garden, design-archives, design-selection, zen-benefits, zen-explanation, zen-intro, zen-participation, zen-preamble, zen-requirements, zen-resources, zen-summary, zen-supporting And these 39 classes: archives, benefits, css-resources, design-archives, design-name, design-selection, designer-name, explanation, extra1, extra2, extra3, extra4, extra5, extra6, indicator, intro, main, next, page-wrapper, participation, preamble, requirements, resources, select, sidebar, summary, supporting, view-css, viewall, wrapper, zen-accessibility, zen-faq, zen-github, zen-license, zen-resources, zen-submit, zen-translations, zen-validate-css, zen-validate-html If you've ever wondered how some websites end up with a meg of CSS, that's exactly how that happens. Each view/page starts with some markup, then you sprinkle some one-off CSS hooks over it, and then you write some overly specific CSS rules which are impossible to reuse. Rinse and repeat. It's more efficient to create a library of reusable building blocks and then build your views/pages out of these. All of the more organized approaches (BEM, SUIT, etc) work this way. You always use what's already there and you only extend a component or create a new one if it's absolutely necessary.
- k__ 11y agoI use the last approach, libraries that make up my elements. But I always feel bad with all the CSS classes in my markup. Back in the days I often had only <10 CSS classes and created my styles relative to that. I had the hope that those 10 classes would vanish with HTML5 and its special div-tags. But now I'm running around throwing bootstrap classes around like there is no tomorrow.
- namuol 11y agoThe notion that this feels refreshing enough to be compelling news is a testament to how incredibly convoluted our use of browser technology has become. It's nice to be reminded of CSS's humbler, less-radioactive days...
- nathankleyn 11y agoI agree. The more worrying thing is that with proposals like CSS Modules, we're going even deeper down the rabbit hole with classes everywhere for everything.
- namuol 11y agoPerhaps, but I think we're actually on the right track. With enough tumbling down the proverbial rabbit hole, we might finally just pop up on the other side. Our tools have gotten good enough to allow us to imagine many permutations of a hypothetical future-browser, and the best ideas coming from these experimental technologies are being embraced by companies like Facebook and Google, who represent an obvious power-player in terms of spec influence. In particular the recent trend of eliminating all the global scope/cascade issues (most notably via "CSS in JS" from the React community) is a good sign that our technology is evolving -- not merely mutating.
- amelius 11y agoCSS has always been broken. For example, for many years it was impossible to vertically center an element in its parent (without extensive hacks). And still there are weird things like not being able to select all elements A which have B in them with a single CSS rule. In my opinion, the reason that web technology sucks is that the standards are being created for novices instead of for developers. If the web was a place for developers, we would have seen multiple competing replacements for CSS years ago.
- namuol 11y agoAs a developer whose job is to deal with the ugly details of implementation, it's easy to forget the original purpose of the technology we're building. Creating something for novices (or humans, as I like to call them) is the noble thing to do. Maybe the standards committee missed the target somewhat, but their goal was to empower anyone to participate in the web. I'm getting a bit sidetracked now, but I highly recommend watching this fantastic talk by Bret Victor; it has really changed the way I think about the work I do: https://vimeo.com/115154289 https://vimeo.com/115154289
- hit8run 11y agoFeels like a response to: http://motherfuckingwebsite.com http://motherfuckingwebsite.com and http://bettermotherfuckingwebsite.com http://bettermotherfuckingwebsite.com But it breaks the font sizing. Also it would be cool if H1 would be smaller inside an ARTICLE than H1 outside of an article like the default setting in Safari etc. Would be good if useful defaults wouldn't be destroyed by too general css.
- programble 11y agohttps://github.com/programble/writ/issues/5 https://github.com/programble/writ/issues/5
- S4M 11y agoI honestly can't see why the Writ stylesheet is better than the standard html output. It seems to me that he just used a new font.
- oneeyedpigeon 11y agoIt's almost more of a reset, than anything, but when you're authoring a classless stylesheet, the line is blurry. Using a readable width for the overall document makes it several times better than the default styles alone. The preformatted styles are much nicer than the defaults, too.
- joshuacc 11y agoThe line-height change alone is a huge improvement in readability.
- drinchev 11y agoThis looks so good and nice. I would definitely use it with some modifications for a drop in replacement of markdown block inside some blog. But will wrap it in a class ( e.g. .article-content ). What is a beneficial stylesheet system, according to me, is a system that can scale and gives you the opportunity to create a complicated website. This unfortunately doesn't. Sorry.
- programble 11y agoI agree that would be a good stylesheet system, but it is not Writ's intended purpose.
- deleted 11y ago[deleted]
- andreapaiola 11y agoumm ok but why not box-sizing? html{box-sizing:border-box} *,:after,:before{box-sizing:inherit}
- chrismorgan 11y agoPersonally I think a much better question is why change the box-sizing? I’d call it out of scope for something like this. Very seldom have I encountered a situation where I actually want border-box rather than content-box; there are normally better ways of doing things. (Truth to tell, I’ve wanted padding-box more often than border-box in recent times, but only Firefox supports it.) Ideally calc() can be used too; it’s more powerful and expressive and well supported nowadays. The last piece of the puzzle to make it all fit together well on more complex arrangements is CSS variables, but they’re only available in Firefox at present. http://caniuse.com/#feat=css-variables,calc http://caniuse.com/#feat=css-variables,calc
- andreapaiola 11y agoAs you say... browser support, but also is more concise. And personally I love the other box-sizing :)
- alwillis 11y agoPersonally I think a much better question is why change the box-sizing? Because the default content-box is a pain in the ass to work with, so to be able to use border-box all the time is a good thing: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ http://www.paulirish.com/2012/box-sizing-border-box-ftw/.
- deleted 11y ago[deleted]
- skippednote 11y agoFYI writ.bassam.co
- red_admiral 11y agoOn the reference page https://cmcenroe.me/writ/reference.html https://cmcenroe.me/writ/reference.html the aside note causes a horizontal scrollbar for me. Chromium 43.0.2357.81 (64-bit) on linux.
- taco_emoji 11y agoSame here, Chrome 44.0.2403.157 m on Windows 7.
- programble 11y agoThe <aside> styling was an experiment, since I'm really not sure how to style those nicely. On a large enough screen, the aside sites off beside the body text, and on a mobile browser, the grey line is visible on the right and you can scroll over to see the aside. Unfortunately this doesn't work well at all on screen sizes small enough that the aside half fits. Edit: https://github.com/programble/writ/issues/6 https://github.com/programble/writ/issues/6
- notNow 11y agoDo people realize here that classes in HTML were actually invented to hook styling info through CSS and that it's actually the approved and promoted use case by the standards body?
- namuol 11y agoI can't speak for everyone, but I suspect web developers are used to staring at "markup soup" when viewing the source of a pretty-nice-looking website such as the one showcased here, and so this seems refreshingly elegant.
- thegayngler 11y agoI know I certainly appreciate as little of the markup soup as possible. I tend to try and use as little markup as needed to write semantically correct code. However, these days people expect you to use the twitter bootstrap and markup soup to build sites and web apps. I don't understand why people are fighting the web rather than working with it.
- nkrisc 11y agoYes, but clearly in this case classes were not needed to make clean, responsive, and readable design.
- wisty 11y agoA CSS framework that actually separates content from presentation. I wish that kind of things was more common.
- HNSucksAss 11y agoThat doesn't tell us jack shit.
- gioele 11y agoCan we please use this as the new basic stylesheet that is used in browsers like Firefox and Chrome? Who decided that those ugly default stylesheets must be be applied to unstyled documents? Why cannot unstyled document be nice by default?
- ahoge 11y agoIt would probably break some websites. Run this on some websites and you'll see some things moving around: document.head.insertAdjacentHTML('afterbegin', '<link rel="stylesheet" href="https://cmcenroe.me/writ/writ.min.css">')
- blowski 11y agoChrome and Firefox both support user stylesheets, so you could do that.
- chrismorgan 11y agoul li { list-style-type: disc; } ul li li { list-style-type: circle; } ul li li li { list-style-type: square; } ol li { list-style-type: decimal; } ol li li { list-style-type: lower-roman; } ol li li li { list-style-type: lower-alpha; } These are bad. Very bad. Example: <ul><li><ol><li> uses unordered styling on the ordered inner list. A little better: ul > li { list-style-type: disc; } ul ul > li { list-style-type: circle; } ul ul ul > li { list-style-type: square; } ol > li { list-style-type: decimal; } ol ol > li { list-style-type: lower-roman; } ol ol ol > li { list-style-type: lower-alpha; }
- programble 11y agoOops, I didn't notice this, thanks! Edit: https://github.com/programble/writ/issues/4 https://github.com/programble/writ/issues/4
- Raphmedia 11y agoVery nice project. This is a quality normalize stylesheet. It however pains me how this is heralded as something new by HN. "Finally, someone figured out how to do CSS correctly!" ... Shows how most people have no idea how to work with CSS yet comment on it. CSS Resets and Normalize stylesheets have been used for decades. Edit: I feel like I should add this I'm not bashing this project. I recognize the quality of it.
- alwillis 11y agoThis actually doesn’t normalize anything; that is, it doesn’t account for differences in the various UA stylesheets and how they render things by default so things are consistent between browsers. Perhaps there are some things that could be incorporated from Normalize, which documents the subtle (and not so subtle) differences in how browsers handle certain elements: https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css
- Raphmedia 11y agoI agree that "normalize" wasn't the right word. It's however closer to what this do than "reset". I don't know how I would call Writ. "Baseline" perhaps? Something like that.
- ZeroGravitas 11y agoNot all abbreviations are initialisms, and small caps therefore aren't always appropriate. Bootstrap (and various other similar systems) lets you specify this, by adding a class of .initialism to the <abbr> http://getbootstrap.com/css/#type-abbreviations http://getbootstrap.com/css/#type-abbreviations
- programble 11y agohttps://github.com/programble/writ/issues/16 https://github.com/programble/writ/issues/16
- simlejeune 11y agoSick.
- fiatjaf 11y agoSee also https://github.com/mblode/marx https://github.com/mblode/marx and https://github.com/fiatjaf/classless https://github.com/fiatjaf/classless
- alwillis 11y agoIt’s 2015--have the browser use real small-caps if the font supports them. Even if it doesn’t, you’re probably better off letting the browser make them instead of you creating them. font-feature-settings: “smcp”; on an element turns lowercase letters into small-caps; font-feature-settings: “c2sc”; turns uppercase letters into small-caps. More at https://drafts.csswg.org/css-fonts/#font-variant-caps-prop https://drafts.csswg.org/css-fonts/#font-variant-caps-prop. Safari’s renderring engine WebKit just got font-feature-settings: support: https://twitter.com/webkit/status/631827777319256064 https://twitter.com/webkit/status/631827777319256064.