Hacker News Reader

Comment by tobyhinloopen | Hacker News Reader

Next: Minimal CSS font-size system CSS framework!

Simple naming system! Only 0.5KB!

    .ten { font-size: 10px; }
    .eleven { font-size: 11px; }
    .twelve { font-size: 12px; }
    .thirteen { font-size: 13px; }
    .fourteen { font-size: 14px; }
    .fifteen { font-size: 15px; }
    .sixteen { font-size: 16px; }

Plugins available for font styles & variants!

    .bold { font-weight: bold; }
    .italic { font-variant: italic; }

Use our CDN! Always available!

https://mincss-fontsize.xyz/simple-font-sizes.0.3.1.min.css

https://mincss-fontsize.xyz/simple-font-styles.0.3.1.min.css

https://mincss-fontsize.xyz/simple-font-variants.0.3.1.min.c...

Changelog:

0.3.1

- Changed .sixteen to be actually 16px instead of 17px (typo)

0.3.0

- Added .sixteen for even larger text!

View on HN

There could be a genuine need for this sort of CSS "framework", for example mobile phones mess up font size quite a bit.

My site CSS has the following just to make sure that the mobile browser (from testing) doesn't make the font unreadable:

    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    max-height: 999999px;

No doubt there are some breaking cases still!

But agreed, this is getting quite ridiculous...

There are CSS processors that do these kinds of browser hacks and vendor prefixes. PostCSS iirc

I know you are joking .. but there are some CSS Frameworks with really terrible names and naming logic. If you have better naming system let me know.

The joke was that its a framework to do what is now natively supported. I would look into CSS grid.

That is the point that I'm failing to make. It is all about reusability not about the grid system. You can use one CSS layout system in multiple cases otherwise you need to define separate CSS logic for every different web layout.

I don't understand your reasoning.

In my opinion, classnames should say what the HTML element represents, and a stylesheet contains the definitions for styling and sizing.

Your HTML should not include information about the size of an element. Your HTML document should represent the content & structure of your document. Your stylesheet is then responsible for layout, design, color and dimensions.

It is all about semantics. See: https://maintainablecss.com/chapters/semantics/

By writing the column sizes in the HTML, you're effectively reinventing inline styles

I agree about the semantics. If you are building small web site or big web with the simple structure don't use CSS Framework.

Here is blog post about this (It is from 2008): http://www.vcarrer.com/2008/08/when-to-use-css-framework.htm...

There’s a problem with this approach, which I found out about the hard way.

Like you I thought I should keep my html “semantic”. The problem with this approach is that you end up tightly coupling the stylesheet and the html, because it requires you to recreate the html’s tag structure using contextual selectors.

Besides becoming very complex this means that every time you need to change the html you also need to change the css.

The other major downside is that all those mixins end up generating a ton of duplicate rules in the stylesheet.

Note that if you define everything using classes and then put those classes in the html you have none of these issues. The coupling is much more straightforward and the stylesheets can be much smaller. Besides that, contextual selectors are many times slower than a single classname.

The inline styles thing I can’t agree with, classes are much more DRY.

I found the methodologies outlined by Harry Roberts to change the ways I structure my css for the better. (www.csswizardry.com)

This, or something similar, should be your guideline for naming things in CSS: https://en.bem.info

IMO a "modern CSS frameworks" should have 0 classnames and should not inject any CSS statement anywhere. They should only provide mixins for LESS/SCSS to be included by the user.

Wouldn't that be better described as a "LESS/SCSS" framework?

So, something like [Bourbon](https://www.bourbon.io/), which is a Sass framework like you describe.

Any CSS framework can be included as namespaced mixins in LESS.

You laugh but https://tachyons.io/

Haha nice one

Reply on news.ycombinator.com