Live data from Hacker News

Spectre.css – A Lightweight, Responsive and Modern CSS Framework

github.com

111–120 of 135 posts

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#111
post #23

The more web development I’ve done the more I’ve swung back to just writing CSS myself rather than depending on CSS frameworks; I’ve ended up seeing these less as ways to accelerate development for a team that is skilled at frontend, but instead as a way for people who don’t like styling or have little experience in frontend development/low design sense to style things reasonably. But I keep seeing frontend framework…

> am I/teams like mine that include at least one person fluent enough in CSS to write reasonable style sheets/styled components, just not the target audience?

I think this is only partly correct. I am an experienced front-end dev who is very CSS-capable, but I enjoy using Bulma[0] as of late because its default styling is very close to what I want already. The default style works well enough for me because the projects that I work on (prototypes, experimental stuff) generally don't involve or need custom designs.

Edit: However, I work mostly alone... back when I was on a larger team working on different stuff, we'd usually use Bootstrap. In my experience most Bootstrap users don't even know how to use Bootstrap well though...

[0]: https://bulma.io

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#112

Earlier quoted context omitted.

Perhaps I should clarify. I've got no issue with engineers seeking compensation for their work. I know the world can be a harsh place, and some people truly need the money. Michael, you're absolutely right. People can insert whatever markup and JS they choose. It simply seems an odd strategy for a CSS framework to squeak by on ads in the docs. An unfortunate side effect in this case is it makes it unclear what parts…

Can you seriously say it's hard to distinguish the ads from content here with a straight face? Bootstrap 3 docs had ads too.

On mobile, yes.

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#113
post #5
post #3

I'm just gonna say it. We don't need another "lightweight, responsive, modern" CSS framework. It's a solved problem.

IMHO Everyone should write at least one framework of some kind. Bonus if it's open source. It's a huge learning experience. Gives you a deeper understanding of how other other frameworks work. Helps you understand user and customer support. How to write documentation. Great for your resume. Etc. In other words, if you only ever consume frameworks it makes it difficult to know what to do or how to approach solving som…

Do you have any personal experience in doing so? They seem like tempting projects from the outset, but getting started with some clear goals in mind, alongside philosophical/idealistic differences from what's already out there so you're not simply rewriting something for the sake of it has prevented me from getting too far down a particular rabbit-hole.

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#114

Earlier quoted context omitted.

> At some point a large'ish team should be able to dive in to the project... FWs are primarily a means of standardization for me. I don't work with a large team internally, but externally I do. Every website built using my platform has potentially multiple people editing it. Also, wouldn't you consider long term support just as important as team size? As much I don't like other people's frameworks, the more common th…

This is exactly why Bootstrap is so useful. As it's so well used and known there's generally a solution out there for any weird problem you might have, and any developer can pick it up and be productive immediately. Yes it's big, and to get the most from it you have to design for it from the start, rather than make it fit whatever the design is. For a large web project I'm leading, we're using Bootstrap 4 with our ow…

It's good to get more confirmation that Bootstrap is the way to go. Just today a cohort from Startup School sent a link to a screencast where he had built his entire admin in Bootstrap, and it looked like it saved him a ton of time.

That being said, I built a CMS with a key idea that the site editing/configuring should be under the control of the designer. (as much as reasonable) And anything that couldn't be should be as easy as possible to understand. (down the road exporting the entire site to static files will be an option as well)

I think we all have limits on what control we want to give up but it's easy to set aside when there's a large community support around a framework. I picked up Vue and I am dumping my custom framework that it replaces. And made a new micro-framework to replace jQuery functionality not easily found in vanilla js.

(isn't Racket a programming language?)

Is it hard to design on top of/customize Bootstrap 4? A colleague of mine knows version 3, and is concerned about diving into 4 because community support isn't robust around it yet. (ie, low number of answers on Stackoverflow for 4)

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#115

Earlier quoted context omitted.

The patterns are easy to learn (for me) and makes building components very quick while still being very customizable without having to add a whole bunch of one-off styles. And everything is still standardized. It also removes the need to constantly reference CSS at all, and can just stick to HTML/JSX instead. It can get very verbose though, but that's a minor trade-off I think.

It's a direct 1-to-1 mapping to inline styles so why not just use inline styles? If the answer is "standardization" then using CSS as it is normally used is the logical conclusion of that concept.

Inlines styles are verbose and hard to change. Component styles allow us to build up components and customize as needed, but the styles themselves are well defined and coherent.

For example: MA1 (margin-all-size1) and MA2 (margin-all-size2) allow me to make a component with more margin, but the margin steps are standardized so everything will follow the same sizing and fit together well, and can be changed easily in one spot later if necessary.

It really only takes a few days at most to get used to the class names, and then you can easily tell everything about the component by just looking at the HTML. We follow an internal rule to place spacing first, then borders, then text, then colors at the end.

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#116
post #98

Earlier quoted context omitted.

I'm going to have to agree. Out of all the technologies my team had to juggle while I was on a web team, CSS and its various components (CSS precompilers, sass/scss/less, frameworks, etc) were the hardest to keep neat. You don't _have_ to write CSS well to get it to work. People wouldn't follow naming conventions, wouldn't group common components near others... some people didn't understand CSS precedence and it coul…

This is where I have seen stylelint personally come into play and shine. https://github.com/stylelint/stylelint It lints and validates the styles written and does it ruthlessly.

As useful as this tool may be, it doesn't seem to prevent redundant or repetitive styles from being created, which is a bigger issue than ensuring correct syntax (since your editor is likely to do that already).

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#117
post #97

Earlier quoted context omitted.

This, in my opinion, is why frameworks of any ilk exist at all. Too many developers out there don't want to take the time to learn the language and the frameworks give them a (false, again, my opinion) sense of productivity. But, especially with CSS, I really don't see the value provided by a framework. CSS isn't hard to learn or master! And as OP suggested, doing so means you get more done with less code. I know a g…

Frameworks aren't at odds with knowing CSS or any other language. You're missing the point with "CSS isn't hard!" And you're wrong. CSS is incredibly hard to maintain. It easily becomes an append-only list of rules. Medium.com for example hired a team a CSS developers including a co-creator of Bootstrap just to work full-time on its CSS. This is a good example of developer hubris and the HN trope of "it isn't that ha…

I think I fall somewhere between the two extremes you guys represent. It's not hard and it's not easy.

Also, some developers are developers because they wanted to GTFO of some situation and don't give two shits about personal development, best practices, efficiency, long term maintenance, or any else. They're just showing up for a paycheck.

Ideally you want to avoid those developers but realistically you don't always have a choice because not everyone who is passionate about software can work for Goopplebooksoft.

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#118

Earlier quoted context omitted.

It's a direct 1-to-1 mapping to inline styles so why not just use inline styles? If the answer is "standardization" then using CSS as it is normally used is the logical conclusion of that concept.

Inlines styles are verbose and hard to change. Component styles allow us to build up components and customize as needed, but the styles themselves are well defined and coherent. For example: MA1 (margin-all-size1) and MA2 (margin-all-size2) allow me to make a component with more margin, but the margin steps are standardized so everything will follow the same sizing and fit together well, and can be changed easily in…

> MA1 (margin-all-size1) and MA2 (margin-all-size2)

Honestly these aren't too bad. But all the CSS frameworks I've seen of this style instead are like MA-10 (margin all 10- pixels) and MA-20 (margin-all 20 pixels) which of course completely defeats the idea of standardized steps beyond limiting you to that subset.

I think there is some value to a few of these styles in any project but ultimately you get more standardization with semantic names. "alert-danger" instead of "alert-red" for example.

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#119

Earlier quoted context omitted.

Inlines styles are verbose and hard to change. Component styles allow us to build up components and customize as needed, but the styles themselves are well defined and coherent. For example: MA1 (margin-all-size1) and MA2 (margin-all-size2) allow me to make a component with more margin, but the margin steps are standardized so everything will follow the same sizing and fit together well, and can be changed easily in…

> MA1 (margin-all-size1) and MA2 (margin-all-size2) Honestly these aren't too bad. But all the CSS frameworks I've seen of this style instead are like MA-10 (margin all 10- pixels) and MA-20 (margin-all 20 pixels) which of course completely defeats the idea of standardized steps beyond limiting you to that subset. I think there is some value to a few of these styles in any project but ultimately you get more standard…

There's no reason you can't combine then, and frameworks like Tailwinds mentioned above let you make those combined styles through config automatically.

However, my point was that it's a great fit for React and other SPA frameworks, where you can just create a component instead, and inside you can use component styles.

But whatever works for you.

Re: Spectre.css – A Lightweight, Responsive and Modern CSS Framework

#120

Earlier quoted context omitted.

> MA1 (margin-all-size1) and MA2 (margin-all-size2) Honestly these aren't too bad. But all the CSS frameworks I've seen of this style instead are like MA-10 (margin all 10- pixels) and MA-20 (margin-all 20 pixels) which of course completely defeats the idea of standardized steps beyond limiting you to that subset. I think there is some value to a few of these styles in any project but ultimately you get more standard…

There's no reason you can't combine then, and frameworks like Tailwinds mentioned above let you make those combined styles through config automatically. However, my point was that it's a great fit for React and other SPA frameworks, where you can just create a component instead, and inside you can use component styles. But whatever works for you.

But if you're isolating styles inside react components, you're back to being able to use inline-styles. You can just functions and variables if you need standardization. Something like Tailwinds adds a level of indirection not a level of abstraction.
Post reply on HN