#css flexbox grid

[codingflicks]

Responsive Neumorphism Service Section

[tesco-finest-aromantics]

every so often i rediscover css and rediscover why i hate it

[jcmarchi]

The Mistakes of CSS

New Post has been published on https://thedigitalinsider.com/the-mistakes-of-css/

The Mistakes of CSS

Surely you have seen a CSS property and thought “Why?” For example:

Why doesn’t z-index work on all elements, and why is it “-index” anyways?

Or:

Why do we need interpolate-size to animate to auto?

You are not alone. CSS was born in 1996 (it can legally order a beer, you know!) and was initially considered a way to style documents; I don’t think anyone imagined everything CSS would be expected to do nearly 30 years later. If we had a time machine, many things would be done differently to match conventions or to make more sense. Heck, even the CSS Working Group admits to wanting a time-traveling contraption… in the specifications!

NOTE: If we had a time machine, this property wouldn’t need to exist.

CSS Values and Units Module Level 5, Section 10.4

If by some stroke of opportunity, I was given free rein to rename some things in CSS, a couple of ideas come to mind, but if you want more, you can find an ongoing list of mistakes made in CSS… by the CSS Working Group! Take, for example, background-repeat:

Not quite a mistake, because it was a reasonable default for the 90s, but it would be more helpful since then if background-repeat defaulted to no-repeat.

Right now, people are questioning if CSS Flexbox and CSS Grid should share more syntax in light of the upcoming CSS Masonry layout specifications.

Why not fix them? Sadly, it isn’t as easy as fixing something. People already built their websites with these quirks in mind, and changing them would break those sites. Consider it technical debt.

This is why I think the CSS Working Group deserves an onslaught of praise. Designing new features that are immutable once shipped has to be a nerve-wracking experience that involves inexact science. It’s not that we haven’t seen the specifications change or evolve in the past — they most certainly have — but the value of getting things right the first time is a beast of burden.

Direct Link →

[josegremarquez]

La propiedad display en CSS: Desde lo básico a los diseños más avanzados.

La propiedad display determina el tipo de caja que un elemento forma y cómo se comporta dentro del flujo del documento. En otras palabras, indica si un elemento se mostrará como un bloque, una línea o si se ocultará por completo. Valores de la propiedad display La propiedad display admite varios valores, cada uno con un comportamiento específico: Valores básicos: block: Crea un bloque que…

[abdelfattah-ragab]

CSS Flexbox Layout by Abdelfattah Ragab

CSS Flexbox Layout by Abdelfattah Ragab

Welcome to "CSS Flexbox Layout". In this book I explain the flexbox layout model. I explain the properties of containers and elements and show you how to use Flexbox to create modern and responsive web designs. By the end of this book, you will know everything about Flexbox, use it to create responsive designs and handle all kinds of scenarios. Let’s get started.

Available on https://shop.tredition.com and https://www.amazon.com

[khushnuma123]

CSS Grid vs. Flexbox: Choosing the Right Layout Tool for Full Stack Developers

CSS Grid and Flexbox are both modern CSS layout techniques that make web design more flexible and efficient. Mastering these tools is crucial for Full Stack Developers, as they help create responsive and visually appealing designs. If you want to become a Full Stack Developer and gain top-notch skills, the Best Institute for Full Stack Developer Course in Pune, Mumbai, Nagpur, Delhi, Noida, and other cities in India is the perfect place for you. courses will deepen your understanding of essential tools like CSS Grid and Flexbox. Read on for more insights! 

[landlessbud]

knowing the inner workings of css is making me too powerful

[bruisedconscience-reblogs]

the hardest thing abt learning flexbox or grid is constantly having dave matthews band stuck in your head

[littledragonkana]

I feel you, Feli....I feel you

I wanted to move a headline to the lower right of the header. CSS put it everywhere but where I wanted it to be. My entire flex box broke because I wanted to have my headline on the right instead of the left 🥲

you put in css whose sole purpose is "move button to the left", think it works (you are a fool) and once implimented the move button left code somehow started cannibalizing all headlines directly below it

[izicodes]

it seems like my ask from a few days ago didn’t get sent 😭 argh stupid tumblr

i was basically asking there what resources you would recommend for everything that could be useful for neocities,, like html, css,,(and you mentioned java script i think?) especially beginner-beginner stuff and then maybe for intermediate 👉👈 i know you probably have all those on your blog already but you know me in a bit 😵‍💫

also yes i’d love to work on ours together, even if we didn’t make them match! cause you know you have millions of brilliant ideas :33 🌻🌻💛

Hiya,

These are the stuff I used / still use, hope it's useful:

W3Schools

Mozilla Developer Network (MDN)

Codecademy

freeCodeCamp

Khan Academy HTML/CSS Course

Shay Howe's HTML and CSS tutorial

HTML Dog

CSS-Tricks

CSS Layout

Flexbox Froggy

Grid Garden

CSS Zen Garden

CSS Animation

Try them out and see what works best for you! 👍🏾

[eggdesign]

how did you learn coding?

I am pretty much entirely self taught as far as front end goes!

I started messing around with HTML and CSS with tumblr themes back in 2016-ish.

For javascript I looked at https://developer.mozilla.org/en-US/ for a lot of documentation + examples. And also used codepen a lot to kinda reverse engineer existing snippets of code.

I also read a lot of https://css-tricks.com/

And for flexbox + css grid there's these:

After I got a good foundation of vanilla JS, I learned Vue for a little while and then moved on to React. The new react documentation is really good in my opinion so I definitely recommend reading that if you're interested in learning.

Most of my learning came from trial and error and working on projects that I was really excited about. I used to be so proud of findtags (the original version) which was in jquery...

The react version is miles ahead of it. And even then, the theme builder is also way ahead of findtags. I learned way more between those two projects than reading documentation alone!

[dragonsleather]

If anyone is proper good at html/css can you please help me understand how to organise containers in complex grids 😭 everytime i try to do it, they do NOT go where I want them to. (Am I nesting divs wrong? Am I not using flexbox attributes correctly? WHO KNOWS!!! I am God's experiment)

[widowskins]

widowbase v3 and v4

Whooboi, there is a lot of discourse going on right now about JCINK coders. Perfect time for me to update some base skins!

For those who just want to streamline their coding process, I have updated my widowbase v3 to include a day/night theme toggle and made a few responsive tweaks to the vertical nav and sidebar. For those looking to learn how to use CSS grid and flexbox to create responsive forum designs, I added a new base, widowbase v4. This version includes some HTML templates that have a very ugly, extremely basic, but functional fluid grid layout. These templates also incorporate hidden divs (read as, display: none) that include the PHP variables frequently used inside those respective HTML templates, so you can easily delete everything I've done and start from scratch with your own. Then just delete the hidden div when you've used everything you need. Easy peasy!

For those of you just beginning your coding journey, I wish you the best of luck! It is such a fun and rewarding hobby. You are also free to rip apart any of the codes on my preview site and cobble them back together. These experiments can be a great learning tool! You are more than welcome to use any of my free resources as a base, as long as the finished product remains free. As for my actual skin bases (or template sets specifically labeled as bases), these can be used for free or paid skins. Make money or give it away, whatever works for you, just leave the credits given to resources intact so others can find out how to accomplish the same thing!

[jcmarchi]

8 CSS Snippets for Creating Bento Grid Layouts

New Post has been published on https://thedigitalinsider.com/8-css-snippets-for-creating-bento-grid-layouts/

8 CSS Snippets for Creating Bento Grid Layouts

Another day, another design trend! Bento grid layouts are the subject this time around. They’re bold and beautiful. Plus, they satisfy those with a need for symmetry.

So, what exactly is a Bento layout? Think of it as a puzzle. Different-sized containers fit together to create a seamless look. Inspired by Japanese culture, it’s popping up all over the web.

There’s good reason for Bento’s growing popularity. You can use these layouts in a multitude of ways. Everything from listing blog posts to product features is possible. They’re also perfect for dashboard screens.

We should also mention the role that the evolution of CSS has played. Both CSS Grid and Flexbox make these layouts easier to build. No hacks or workarounds are necessary!

With that, here’s a look at 8 beautiful Bento grid layouts.

Complex Bento CSS Grid Layout

CSS Grid packs a lot of power into a tiny bit of code. For example, this complex grid layout requires only 43 lines of CSS. The layout is both efficient and naturally responsive. Therefore, you won’t have to play around with media queries.

See the Pen Complex Bento Layout

Bento-Style Responsive Dashboard

Here’s a gorgeous dashboard layout that benefits from Bento. The layout offers a great way to display relevant content. Everything is neatly organized and easy to follow. The use of photography and color makes this example stand out.

See the Pen Responsive Dashboard | Bento Style by Ecem Gokdogan

Bento Design Concept Layout

This page layout is a different take on the Bento aesthetic. There’s a sidebar featuring in-page navigation. Clicking a button expands it. Meanwhile, the content container maintains a consistent height.

See the Pen bento design concept by Abhishek Bhardwaj

Bento-Box-V1.0.1

Bento layouts also benefit from minimalism. This layout features fewer bells and whistles. Notice the use of white space and legible typography. The animated charts catch your eye without being overwhelming.

See the Pen Bento-Box-V1.0.1 by Gwenaël Guiraud

Sticky Bento on Scroll

This “sticky” presentation adds special effects to the mix. Watch how certain elements stick as you scroll. The idea is that you can go beyond static grids. Bento can be fun, too!

See the Pen Sticky Bento on Scroll ✨ by Jhey

Bento Grid Using CSS Flexbox

Let’s check out another fun example using Flexbox. This grid has a neon look and includes cool hover effects. Bonus points here for maintaining legibility and responsiveness.

See the Pen bento grid – challenge (Chrome +111) by EaterUsr

Card-Based Layout with Gradient Borders

Here’s an example for those wanting to stand out from the crowd. This card-based layout features animated borders, “wipe” effects, and beautiful hover styling. The layout remains clean – even with all those goodies.

See the Pen Cards (gradient border) by Dan

CSS Grid & :has() Grid Layouts

We can achieve a lot with the CSS :has() pseudo-class. This example uses it to adjust the layout as boxes are added and subtracted. Watch as the layout maintains perfect symmetry throughout.

See the Pen Always great grid – CSS grid + :has() + view transitions by Adam Argyle

Use Bento Grids to Keep Your Layout Nice and Tidy

The idea of using Bento aesthetics in web design isn’t new. However, older CSS layout techniques made them difficult to build. That’s no longer the case.

Perhaps the best part is that modern CSS does all the dirty work. We don’t need to compute complex calculations. CSS Grid and Flexbox can do this for us.

That leaves us free to experiment. The examples above demonstrate what is possible. And you can get as creative as you like.

Want to see more Bento grid examples? Check out our CodePen collection!

Related Topics

Top

[josegremarquez]

Propiedades de las Cajas o Bloques en HTML y su Importancia

En HTML, todos los elementos, desde un simple párrafo hasta una imagen compleja, se representan como cajas. Estas cajas tienen propiedades que nos permiten controlar su tamaño, posición, espaciado y otros aspectos visuales. Comprender estas propiedades es fundamental para crear diseños web personalizados y atractivos. ¿Qué es el Modelo de Caja en CSS? El modelo de caja es una representación…

[codesbyadeline]

CSS: Flexboxes

I am working on the 'Tea Cozy' project that is part of CodeCademy's 'CSS: Flexboxes and Grids' course.

I just have to be really honest and say...

Learning flexboxes is kicking my butt!

There, I said it. I spent hours working on this project while getting a whole lot of nowhere. Everything I did seemed to somehow make my code worse, and it made me want to scream *just a little anyways*.

This morning, after spending some more time on it, I decided that I needed to look at this project as a way to learn instead of as a way to test my existing knowledge.

Bearing this in mind, I decided to do something no web developer wants to do... I opened up Visual Studio Code, selected each and every last line of my code, and deleted it. Hours of work gone in an instant *cries*.

While it sucked to do that, I can genuinely say that I have learned way more by changing up my goal with this project. I've done way more research into how flexboxes work and learned how to do things I couldn't do before. Though I've been following along with a tutorial as well, there were quite a few things that I wanted to set up differently which has forced me to experiment with different HTML and CSS code.

My project isn't done yet; there's still some sections I need to add as well as some styling changes I need to make to the existing code. But if you'd like to check out my code and what the web page looks like at the moment, you can check out my GitHub repository here!