
Minimal Responsive Grid System - vladocar
https://vladocar.github.io/SMART-CSS-GRID/
======
tobyhinloopen
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-sizes.0.3.1.min.css)

[https://mincss-fontsize.xyz/simple-font-styles.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...](https://mincss-fontsize.xyz/simple-font-
variants.0.3.1.min.css)

Changelog:

0.3.1

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

0.3.0

\- Added .sixteen for even larger text!

~~~
vladocar
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.

~~~
tobyhinloopen
This, or something similar, should be your guideline for naming things in CSS:
[https://en.bem.info](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.

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

------
fabian2k
I've played around a bit with CSS grid, and to me it seemed like it would just
make this kind of grid frameworks unnecessary. Everything I see on that page
are native CSS grid features.

After looking at the CSS, it seems entirely redundant. It's 36 lines, and only
contains the basic grid setup you'd do by hand. Using CSS grid directly would
not be hardly more difficult or verbose, and far more powerful than
restricting yourself to the subset used in this.

What I also find strange is that this project still calculates the column
width based on percentages, instead of the native support for fractions in CSS
grid.

~~~
vladocar
The general idea is that because is already a grid you don't need another
grid. The point of this project is not to make just another grid, but to make
reusable system using the same CSS classes in your entire project.

P.S Yes, using fr is good idea..

------
reaperducer
I don't understand how this is "Responsive." When I resize the browser window,
it doesn't respond. All it does is go off-screen like a standard table.

Is the home page, itself, not using this responsive framework?

~~~
chrismorgan
It’s broken between 960px and 480px, that’s all.

------
regularfry
On Monday, I was at a very interesting talk about what's coming up and what's
available in modern CSS. Apart from one exception, I can't use _anything_ that
was gone over in an hour's talk. Why? IE11.

~~~
andrei_says_
Exactly. I would so much love to use css grid but it won’t be possible for the
foreseeable future. Financial organizations stuck on windows 7 locked
workstations represent a major part of our clients.

~~~
tatersolid
1000 times this. We do SaaS for the Banking industry and 72% of our traffic is
IE11/Win7. In May 2018.

<crytoselfincorner />

------
drinchev
Are grids still a thing? I hardly had to use any for the last 2-3 years. I
just have a `display: flex` and control the direction with media queries.
Seems much more easy than learning a grid css file

~~~
purerandomness
CSS Grid is a newer concept than Flexbox, and solves a different problem.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_La...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_flexbox)

------
tfeldmann
This is not responsive when resizing the browser window in Safari...

~~~
italiancheese
I don't understand how they're demonstrating a _responsive_ grid framework
with a non-responsive demo.

~~~
remi
It’s not really responsive, it just stacks grid elements vertically when the
viewport width is < 480px.

[https://github.com/vladocar/SMART-CSS-
GRID/blob/a0cfd2c730e9...](https://github.com/vladocar/SMART-CSS-
GRID/blob/a0cfd2c730e900c9e62d24b3eeedcb1b4ad14319/smart-grid.css#L31-L36)

------
vladocar
Few words about this CSS layout solution. It is meant to be starting point.
Because is only 36 lines of code you could personalise anything in the main
CSS file. Example you can change the main width form 960px to 60 % or 70 em.
You can change the grid margin from 10px to xyz px. You can personalise how
the responsive layout works. Like I said before is only a starting point..

------
tzahola
Minimal JS Integer Framework:

    
    
        function plusOne(x) { return x + 1 }
        function plusTwo(x) { return x + 2 }
        function plusThree(x) { return x + 3 }
        function plusFour(x) { return x + 4 }
    

Using this framework, you can truly adhere to the DRY principle: instead of
repeating x++ all around your codebase, you can simply do:

    
    
        x = plusOne(x)

------
boffinism
Lovely... but works in < 90% of browsers [0], so it's kind of for academic
consideration only for now.

[0] [https://caniuse.com/#feat=css-grid](https://caniuse.com/#feat=css-grid)

~~~
originalsimba
> works in < 90% of browsers [0], so it's kind of for academic consideration
> only for now.

Says your particular organizations policies, why is the line drawn at 90%, why
not 95%? Is this restriction based on calculations or was it simply
arbitrarily chosen?

If it's arbitrary, allow me to offer an alternative, focus support only on
"modern generation" browsers which auto-update by default. All popular
browsers adopted auto-updates as a collective effort to improve end-user
security, and so as web developers we're able to encourage this by only
supporting those platforms.

As you can see on caniuse, grid support on those modern browser platforms is
100%. The only ones lacking are IE which microsoft has abandoned, and Opera
Mini (I can't speak good or bad about that, I haven't examined it).

The idea that you must support as many browsers as possible is a relic of the
1990s dot com bubble when it was unclear which browser was best and there were
no agreed upon standards. It's now 2018 and you're either using Firefox or
Chrome and to a much smaller extent, Edge or Safari. Any other browser that
wants to be taken seriously is going to support the standards set by those
platforms.

~~~
notahacker
If you're a business with actual customers, your decision about which browsers
to support and where to draw the line is going to be driven by whether not
supporting them costs more money than supporting them, not by whether the dev
team would prefer people to download software worth taking seriously or buy a
newer phone if they wish to continue being customers.

------
timwis
I want to check this out but I'm on my phone so there's no way to "view
source" and see how to actually use the framework. All I can see is the
resulting grid on the demo page. Maybe add code snippets?

~~~
regularfry
Follow the github link. The CSS file itself is tiny, and the demo HTML is in
the repo.

------
jordache
the demo is not responsive.... hmm

