CutCodeDown

Web Development => HTML / CSS => Topic started by: k64 on 20 May 2020, 04:14:57 pm

Title: Sharing A Simple CSS Grid
Post by: k64 on 20 May 2020, 04:14:57 pm
Sharing A CSS Grid

The CSS
.row{clear:both;width:100%;display:block;margin:0 auto 0 auto;padding:0;vertical-align:top}
[class^="col"]{display:inline-block;position:relative;margin:0.5% 0.5% 0.5% 0.7%;padding:0.3%;vertical-align:top}

.col1{width:100%}
.col2{width:47.9%}
.col3{width:31%}
.col4{width:22.8%}
.col34{width:73%}
.col2s{width:45.5%!important;float:left}
.wauto{width:auto}
.w{width:94%}

ul.col{margin:0 auto 0 auto;position:relative;margin:0 1% 0 1%}

The HTML
<div class="row">Row Row Your Boat

<div class="col2">Down Columns</div>
<div class="col2">In The Steam</div>
</div>

What I'm looking to do is making it slimmer if possible?  It's responsive too, w/ the proper code.
Title: Re: Sharing A Simple CSS Grid
Post by: Jason Knight on 20 May 2020, 11:32:11 pm
pre-determined percentage grids are -- sorry to say -- some of the most broken nonsense out there, and pissing on the markup with classes to say what they are is even WORSE in the age of responsive layout.

I've never subscribed to them as a viable idea, and using classes in that way -- much less extra div for things like "rows" -- never once made a lick of sense to me when HTML's job is to say what things ARE structurally or would be for grammatical reasons, and NOT WHAT THEY LOOK LIKE.

Hence classes like .col1 or wauto or the needlessly aggravatingly cryptic .w utterly defeat the purpose of HTML and why CSS is separate from it. Just like the mentally enfeebled garbage found in the dumbass "frameworks" like bootcrap, tailwind, or W3.css.

Especially in an age where you can use use display:flex as we really can stop giving a damn about IE9/earlier apart from feeding them vanilla markup with no JS or CSS whatsoever.

Oh, and if you have to use !important, you're probably doing something wrong.

WHAT is the content, WHY would it get a style for certain media targets. Until you can answer that you don't have a lick of business throwing classes at them. Much less presentational code bloat garbage like class="text-center w3-red col-4-s col-6m".

Your class -- IF needed -- should say what it is, not what you want it to look like. Just like how you should be using proper semantic markup for your content not just blindly slopping it into DIV. Your example is just disconnected text with no semantics, and you should have complete semantics of your content or a reasonable facsimile of future content completed before you even start THINKING on tarting it up with appearance.
Title: Re: Sharing A Simple CSS Grid
Post by: Jason Knight on 20 May 2020, 11:52:17 pm
Just to give you an example of why pissing on the markup with presentational classes is a bad idea, take responsive layouts. Let's say you have four sections in a parent wrapper.

Code: [Select]
<div id="test">
<section>
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis, tortor eget pellentesque cursus, ipsum purus tempor lorem, nec malesuada sem magna a ex.
</p>
</section><section>
<h2>Section 2</h2>
<p>
Donec rhoncus, diam vitae lobortis facilisis, purus neque sodales lorem, at egestas risus velit vel purus. Aliquam laoreet nec velit quis pharetra.
</p>
</section><section>
<h2>Section 3</h2>
<p>
ulla aliquam auctor aliquam. Ut sed malesuada augue, sed tincidunt lectus. Duis ut mi mauris. Morbi sit amet suscipit dolor
</p>
</section><section>
<h2>Section 4</h2>
<p>
Nunc leo nunc, placerat eget cursus et, blandit eget dolor. Vestibulum sagittis magna cursus eros commodo, at aliquet purus tincidunt.
</p>
</section>
<!-- #test --></div>

And on screens over 60em you want a max-width of 72em in four columns, at 40em you want to drop to two columns, and at 28em drop to one column.

Code: [Select]
#test {
display:flex;
flex-wrap:wrap;
width:100%; /* like display:table, flex likes to shrink to content */
}

#test section {
flex:1 1 auto;
box-sizing:border-box;
width:21%;
margin-right:2em;
padding:2em 2em 0.5em;
}

#test p {
margin:0;
padding:0 0 1.5em;
}

#test section:nth-child(4n) {
margin-right:0;
}

gets us four easy columns. Sneaky trick, flex WILL grow them to fit, setting the divider BELOW the one you want plus 1% (or rounding up) will net you the number of columns... so for four columns declare 21%, for three columns declare 26%, for two columns declare 34%. That way if border-box fails or something else interferes, there's still a ton of "Wiggle room".

Now for two columns at 40em

Code: [Select]
@media (max-width:40em) {
#test section {
width:34%;
}
#test  section:nth-child(even) {
margin-right:0;
}
}

Then to drop columns altogether:

Code: [Select]
@media (max-width:28em) {
#test {
display:block; /* no flex zone */
}
#test section {
margin-right:0;
}
}

You're not going to get that slopping classes for nothing on everything, much less using classes for presentation.

Presentational classes -- like "row", like "col1", and so forth -- are the antithesis of good HTML and CSS writing; reeking of failing to divine the purpose of either language and the intent that created them.

More fun, if you don't want them to fill the width, set a min and max-width and let flex-wrap handle things for you. Piss simple way to build things like image galleries much akin to just using inline-block with fixed sizes.
Title: Re: Sharing A Simple CSS Grid
Post by: k64 on 21 May 2020, 03:40:18 pm
I use these css media queries to cover most screen sizes.

@media only screen and (min-width:801px) and (max-width:1024px){
@media only screen and (min-width:541px) and (max-width:800px){
@media only screen and (min-width:481px) and (max-width:540px){
@media only screen and (min-width:321px) and (max-width:480px){
@media only screen and (min-width:200px) and (max-width:320px){

I prefer % & px over those rem'em bad headaches... get the pun?

I don't use use css/js frameworks, however I do look at them for some ideas. Most are so bloated it's not even funny.

I like caniuse.com to see how widely supported that new css idea is... Most of the time I just stick to tried and true css - keep it simple and supported.
Title: Re: Sharing A Simple CSS Grid
Post by: Jason Knight on 21 May 2020, 11:15:48 pm
I use these css media queries to cover most screen sizes.
pre-determined queries are as big a steaming pile as predetermined grid sizes. Your sizes and queries should be based on the needs of the content, not some alleged "hammer content into the grid" nonsense. Layout should adapt to the content, not the other way around.

Hence why complete semantic markup of the content or a reasonable facsimile of future content should be written COMPLETELY for a page or template before a single line of CSS is written or single thought about what it's going to look like goes through your mind.

I prefer % & px over those rem'em bad headaches... get the pun?

The only headaches are when px tells users -- LIKE MYSELF -- to go take a flying leap with broken layouts. EM are piss simple, often EASIER than PX and sure as shine-ola more accessible. It's only when you start with the derpy "print mentality" trash like pre-determined grids and breakpoints -- things that are inherently piss poor inept and ignorant design -- that there are issues.

PX is broken trash for many users, which is why for OVER TWENTY BLASTED YEARS competent developers have been trying to get people to stop using them!

In my codebases the only times you'll see px is the occasional text-shadow or border. They're no more difficult and are often easier to deal with. I just don't get where people come up with these wild unfounded nonsensical claims about how "hard" they are to use, or nonsensical "headaches" that don't actually exist apart from not having learned enough about layout, content, and accessibility in the first place.

See the PSD jockey artists under the DELUSION they're "designers" -- where all they know how to do is push pixels around in their glorified paint program, piss on websites accessibility with broken font sizes and illegible contrasts, and slop endless pointless presentational images into websites dragging performance down into the 9th circle of hell.

I don't use use css/js frameworks, however I do look at them for some ideas. Most are so bloated it's not even funny.
Most of that bloat is from the fact they are ALL based on not just outdated outmoded ways of thinking left over from the 1990's, but also that the very means by which they work is flawed. Hence the LAST place you should be looking for ideas at is in what they do or how they do it. The people who made them are UTTERLY unqualified to design or code websites. In fact their ignorance is how they cooked up such half-baked rot and thought it was a good idea.

I like caniuse.com to see how widely supported that new css idea is... Most of the time I just stick to tried and true css - keep it simple and supported.
I go there too, but recently I drew a new line in the sand on my support. Three years ago? Sure I'd still bend over backwards to support at LEAST the layout back to IE8... but today? I'm DONE with IE9/earlier and put my style and scripting in !IE CC's so all they get now is the vanilla unstyled markup.

Flex is too good to pass up, as is the unfortunately named CSS3 Grid Layout module. (display:grid). It's truly sad that one of the most useful additions to making HTML/CSS layouts has been named after one of the most dumbass ignorant incompetent ways of building websites.

Title: Re: Sharing A Simple CSS Grid
Post by: k64 on 22 May 2020, 12:18:26 am
I don't even bother with supporting IE any more. Most will use Firefox like me or some WebKit browser, I use  Otter for that. It's a privacy browser, unlike google chrome.

I try to use % for everything, I just wished I figure out how use them for media queries too ;)

I might have to find/make a chart for rem/em.... my head is throbbing again.  Since I started out in fine art and switched to commercial art... look at the bight side, my layouts are not in pt/pc   ::)

I use Bluefish Code Editor on Linux ;)

I might have to find/make a chart for rem/em.... my head is throbbing again.  Since I started out in fine art and switched to commercial art... look at the bight side, my layouts are not in pt/pc   ::)

I use Bluefish Code Editor on Linux. I like static sites and not a fan of cms or WordPress with that Hack Me Sign on it's back! Here's Why -- In 2019's Hacked CMS websites 94% was WordPress all others were between 0.9%-4.3%.
Title: Re: Sharing A Simple CSS Grid
Post by: Jason Knight on 22 May 2020, 03:36:26 am
I don't even bother with supporting IE any more. Most will use Firefox like me or some WebKit browser, I use  Otter for that. It's a privacy browser, unlike google chrome.
I'm a Vivaldi fan... mostly for things that Opera USED to have that they told us to go plow ourselves over when they switched to being a chrome-like.

Such as rocker navigation and portrait tabs.

I try to use % for everything, I just wished I figure out how use them for media queries too ;)
% doesn't even make sense in media queries... but then most of the time it doesn't make a lot of sense for major flow columns. There are smaller cases where it makes sense, but an elastic width next to a fluid, or a elastic max-width and min-width (in em) and letting flex-wrap or inline-block do your heavy lifting is way better than declaring much of anything in percent.

... and when I do % it's either 100% for something that doesn't by default,

I might have to find/make a chart for rem/em.... my head is throbbing again.
That you're even thinking a "chart" means you're not thinking about layouts properly. Likely because:

Since I started out in fine art and switched to commercial art
Which means you have to UNLEARN most of the "art" stuff you're thinking about. Web design is DESIGN, and design isn't art unto and of itself. Design is engineering that incorporates art as one of its many facets, alongside accessibility, usability, user experience, and the inherent specifications and limitations of the technologies involved.

It's why most of the PSD jockeys who call themselves "web designers' are nothing of the sort. They're ignorant fools who know Jack about ****, and the only way they continue to be a thing is by preying upon those who know even less by providing flash instead of substance. Kind of like the mouth-breathers who call themselves "experts" because they can sucker fools with bootstrap and jquery.

EM is dynamic from the start, even on body it doesn't mean "16px" all the time. On my workstation and primary laptop 1EM on BODY, aka 1REM, STARTS OUT at 20px. On my media center with the 4k display it starts out at 32px. This way I don't have to dive for the zoom and deal with how many shoddily coded px based websites fall apart when you do so. Well written EM based sites just automatically scale to the user's preferences. That's what it's for.

Hence why that whole 0.625em / 62.5% font-size == 10px BULLSHIT is exactly that. 100% farm fresh prarie pies from absolute know-nothings who don't know the first damned thing about what EM is, what it's for, or how to use it properly.

That was probably the first big bold bald-faced LIE I came across when I moved over from Accounting programming to developing websites. The LIES from alleged "experts" in the industry like the Yank-hole or Eric Meyer wieners just kept pouring in from there.

I wish there were less Eric Meyer wieners, that is what I'd really like to see. 'Cause if there were less Eric Meyer wieners, sites would be more useful can't you see?

Note, my problem isn't with Meyer, it's with the fanboys who quote him out of context, misinterpret his meanings, use out of date posts and concepts of his like they were the gospel written in stone, and actually give the poor guy a bad rep. See "reset reloaded" as an example of a monster that got out of control.

... look at the bight side, my layouts are not in pt/pc   ::)

Some of mine are in pt... you know when/where/why?

Code: [Select]
<link rel="stylesheet" href="template/print.css" media="print">
That's why. :D

Nothing wrong with points if you're using CSS for print.

I use Bluefish Code Editor on Linux
I've used it at a certain jobsite, and it annoyed me no end... but then I find a lot of the "aids" built into browsers that people say "helps make you more productive" do the exact opposite for me, and just get in the damned way.

But to be fair, I'm someone who thinks that tabbed editors are a colossal step BACKWARDS in web technologies, and finds colour syntax highlighting to be an annoying illegible rainbow-striped acid trip.

Syntax highlighting sucked way the *** back when I first encountered it in Turbo Pascal 4, and it sucks even harder today. I've watched people have blatant errors staring them in the face, but they couldn't see it because of the derpy illegible colour choices.

My eyes just can't focus on it, probably because I can actually see colours. Kind of like how unlike most people, I don't associate distortion with volume.

I like static sites and not a fan of cms or WordPress with that Hack Me Sign on it's back! Here's Why -- In 2019's Hacked CMS websites 94% was WordPress all others were between 0.9%-4.3%.
I'm mostly with you on that, but there's nothing wrong with the "poor man's" approach of letting PHP or some other server-side language act as glue between your bits and pieces.

But yeah, do you remember back in '08 when turdpress won the Pwnie for M4ss 0wnage? Won an award for having the most CVE vulnerabilities that year.

99% or more of the templates for turdpress -- including the default one -- CLEARLY weren't written by people qualified to write a single damned line of HTML. Given that HTML is the "easy stuff" that many developers mock for not being a "Real langauge", if these assclowns can't even get that right, how are we supposed to trust them on the back-end?!?

Then you go under the hood and it's got endless entry vectors, the security information isn't secured, ANY code elevation at any point in the code has full access to both the database connection AND the credentials -- that in a monument to the stupidity of mankind they put into DEFINE...

Is it any wonder this "media darling" of idiocy is about as secure as a open door?
Title: Re: Sharing A Simple CSS Grid
Post by: k64 on 22 May 2020, 01:04:45 pm
Thanks for the CSS Advice! A little harsh, but I knew what I was getting into when I came here  ::)
I already know... No Whining!
I've also have a certificate in web design from around 2k. I've seen first hand what Adobe and MS does to code  >:(

The pt/pc css pun was a !important sarcastic joke  ;D

I agree Bluefish can drive you nuts at times!
Syntax highlighting can be turned off or changed.

You might like small Geany Editor or bloated Eclipse IDE better? I prefer smaller with some conveniences.

WP security woes are mostly related to extensions as I understand it? Don't add any or unnecessary phun will surly follow.
Title: Re: Sharing A Simple CSS Grid
Post by: Dave on 23 May 2020, 07:46:21 am
Basic WP has enough issues to go around never mind the extensions!
Title: Re: Sharing A Simple CSS Grid
Post by: Jason Knight on 23 May 2020, 09:19:32 pm
You might like small Geany Editor or bloated Eclipse IDE better? I prefer smaller with some conveniences.
My preferred editor is Flo's Notepad 2, which is Scintilla based without being a total piece of Scite. (that's a joke, the demo editor for scintilla is called Scite!)

I could probably get by with Scite on Linux if I had to. Right now, I don't have to as the dearth of other quality software for MY needs -- much less proper hardware support, especially audio and video -- doesn't EXIST on Linux, nor is it likely to due to the architectural "flaws" of *nixisms. They're great for security purposes on a server, they suck ASS when it comes to realtime hardware interfacing.

WP security woes are mostly related to extensions as I understand it?

True and false. The reason extensions are so easily able to open up security holes is that Wordpress has ZERO "internal" security policy or practices. It blindly puts the connection, the security information, and a whole slew of other things into the global scope. Almost anything can be called from anywhere inside it with not even the slightest attempt at sandboxing anything.

... and if anything should be sandboxed and need permissions to it GRANTED, it's mods written by some yahoo who probably doesn't understand what to and what not to do.

That said "mods" are even ABLE to open security holes is the fault of the underlying system. MOST of that blame falls on Wordpress' doorstop and the general architecture of the platform... It was poorly planned from the start and that lack of concern for security -- inside and out -- is what plagues it to this day.

Sadly fixing said issues would involve a rewrite from the ground up that would be incompatible with any existing mods/plugins or even templates.

SOME of the blame can be thrown PHP's way too though. It's still utterly dumbass that include/require can operate on any file, or that fopen, file_get_contents, and their kin/kine can read/write .php files. It's equally moronic that include/require operates in the local scope of which it is called, making it impossible to include a function library without a derpy helper function like:

Code: [Select]
function safeInclude($name) { include($name); }
Needed JUST to break scope.

I'd ballpark that 90% of PHP exploits could be squashed if include/require was only allowed to open files with the .php file extensions, all other file operations were BLOCKED from reading .php files or another extension were added for files you don't want to be able to read/write, and include/require were only allowed to contain functions and classes without blindly executing any code, with library includes not bleeding scope.