What CSS system do you use for your site?

There’s a lot of ways to style your site in css that I’ve lost count. There’s floats, grids, flexbox, selectors and many more out there I probably don’t even know about.

As someone who has a only basic idea of what to do, I’d like to know what layout do you use for CSS? Do you use only one type of system or do you mix multiple ones together? What do you like and dislike about it?

I’m not very great at styling anything in my site, kinda getting frustrated whenever I have to organize something and it’s not working as planned. I’ve been TRYING to make the switch to Grids, but it’s an uphill battle learning it that I often resort to floats and auto margins. I stopped doing absolutes often after realizing how shit it looked on different screens.

3 Likes

I just shove stuff into a stylesheet and hope for the best lol sad but true

8 Likes

I like to start with something fairly complete like Jekyll’s minima or bootstrap and then style it. Same story for my personal tiddlywiki to which I’ve added CSS bit by bit starting from one of the basic themes.

Another thing I like to do with an SSG that lets me mix html and markdown: add a style tag for some custom CSS just for that blog entry or page.

2 Likes

Even though I love writing CSS and I’m always chasing the shiny and new stuff that comes into the language, I’d say don’t sweat it too much! I’ve been using CSS Grid for years and I still have to look up the syntax every time I use it. :shades:

One thing that has helped me tremendously in authoring CSS is to try to decouple my styles from my content. That’s not always possible when you want this specific thing to look a specific way, but generally, I’ve found that creating reusable blocks of CSS that I can apply variations to in an expected/anticipated way has saved me from creating excess bloat of CSS, e.g. avoiding having one block of CSS to create a 4-column grid and a whole other block of CSS to create a 3-column grid.

For example, I use this “Columns Component” all over the place on my website:

.columns {
	display: grid;
	grid-template-columns: repeat(
		var(--column-placement, auto-fill),
		minmax(
			var(--min-column-size, 12em),
			var(--max-column-size, 1fr)
		)
	);
	column-gap: var(--column-gap, var(--gap, 0));
	row-gap: var(--row-gap, var(--gap, 0));
}

These four properties (with, to be fair, some non-trivial bits of chained CSS variables inside) allow a huge amount of variation for creating all sorts of different column grids (and it’s responsive out-of-the-box), so I don’t have to create so many different, custom layouts that I have to juggle to maintain.

Check out this demo of variations on CodePen.

I’ll admit, it isn’t the easiest CSS to read through and understand, but I haven’t had to do much to maintain this component in the handful of years I’ve used it. Kind of a “set it and forget it” situation.

The concept behind this particular component is called “The Grid” on the fabulous resource, Every Layout by Andy Bell and Heydon Pickering, which isn’t cheap per se, but is an absolutely incredible source of knowledge and has some free stuff to check out before deciding if you want to buy it.

I’m a big fan of of the CUBE CSS methodology, also by Andy Bell, as well. It helps reinforce building discrete and reusable CSS that works with the browser rather than wrangling troves of code each time you want to create some a new layout.

On that subject, I highly recommend checking out his talk, Be the browser’s mentor, not its micromanager (on YouTube).
Here’s the accompanying website: buildexcellentwebsit.es

I’d been dipping my toes into the waters of these concepts before the talk, but after watching it (live and in-person, lucky me!), it all clicked and I haven’t found anything since that comes as close to its simplicity and joy to author. It’s shaped my entire perception of writing CSS (for the better, imo)!

Hope this was useful!

8 Likes

I’m not using any layout CSS yet, but I think I’m planning on using a combination of flex and grid, depending on what I’m trying to achieve. I’ve had my eye on “Every Layout” for a while, and I’m hoping that once the techniques make more sense I can start using them!

Like @Ravenous, I like the idea of CSS that works with the browser rather than trying to enforce very specific layouts. In fact, I’m considering mostly using just system fonts to keep the size of my pages low, and simply accepting that it’ll look different depending on people’s devices.

I also recently came across HUG CSS, which I’d like to explore.

3 Likes

I make extensive use of Flexbox, primarily because I stick to one-column layouts most of the time. IMO Grid is very much not intuitive to work with, so I guess that affects my decision as well.

In terms of file organization, I shove everything shared between pages into one big stylesheet. Everything that is only used on a single page goes into a <style> tag. I don’t use the style="..." attribute because I almost always have to use several properties, and putting them all on a single line looks ugly.

1 Like

I use flexbox for my site header and the webrings section, and I use grids for my writings section and my animation gallery. Flexbox seems to work well for items with a variety of sizes, and grids seem to work well when you want sizes to be consistent. I also just have one CSS file for everything.

1 Like

grids? floats? idk i just go with the flex-flow…

jk, i usually just have divs flying around and centered with margin:auto
only recently i added small flexboxes to certain pages, just so it’s responsive to phones

1 Like

i use grids for my entire website! every page is basically 3 columns and 3 rows and i find it works really well in my cases. it’s difficult to figure out at first but once you get grids down i feel like they are much better and more responsive.

1 Like

I’ve gotten pretty comfortable with flexbox so I use that for pretty much everything, but I still struggle with how flex-grow and flex-shrink work, I feel like they just don’t do anything most of the time, but I’m probably using them wrong.

This is an awesome idea, I pretty much just use vars for colors but parameterizing the grid configuration is clever!

1 Like

To be honest I havent tried grids yet either ^^; I haven’t really run into the need. I mostly use floats for when I want to do sidebars/columns :3 If I want to make a gallery then I will use flexbox ^^ (I then will mix these if I am putting a gallery in a page with sidebar(s) ). The most important thing in my mind is defining widths by percentages or vw so it can adjust to any screen size (rather than pixels)

But I also don’t chuck a lot of random images in places. My images will either be backgrounds, borders, or straight up in the normal flow of the document. If you like placing decorative images in very particular spots I think grid becomes more useful for making that responsive. Or maybe if you want to divide one page up into a lot of small sections :thinking: But again I’ve never used it so i dont know for sure.

As for things like selectors, I enjoy trying to see if I can accomplish what I am want with CSS without making more classes/ids than I have to (ex. using .gallery img, rather than giving every gallery image a class - extreme example but gets my point across)

I notice some people here in the thread say they use one style sheet for everything, wow! To be honest I hate using style sheets, so i just put one pages particular styles in the style element ^^; (now if all my pages had roughly the same style id use one, but I like making different layouts/themes for each page :3)

1 Like

This is my current stylesheet.

I’ve got styles for mobile devices, desktops, and even print in here.

One stylesheet to style them all
One stylesheet to find them
One stylesheet to bring them all and in the darkness bind them

I start with CSS variables in the :root selector, style elements first, and then create classes for styles I want to apply selectively.

My current design sense is based on certain Oedipally-named websites you might have heard of. My site works on smartphones by default, and then I do progressive enhancement for desktops. I haven’t bothered much with CSS grid or a multi column desktop layout, though I might do it in the future.

I target desktop displays with a media query based on the pointer instead of identifying desktops by screen size.

@media only screen and (pointer: fine) {
  // desktop PCs and laptops generally have "fine" pointers.
}
@media only screen and (pointer: coarse) {
  // smartphones and tablets generally have "coarse" pointers.
}

I do adjust the base font size depending on the screen size. The following is a sensible default since it respects visitors’ settings and allows the use of rem units for sizing.

:root {
  --size: medium
}

html {
  font-size: var(--size);
}

However, if a visitor has a HD or even a 4K display, I try to account for that and spare them the effort of zooming.

/*
  if visitors have
  big screens, it seems cruel to
  make them read small text
*/
@media only screen and (min-width:1920px) {
  :root { --size: large; }
}
@media only screen and (min-width:2560px) {
  :root{ --size: x-large; }
}
@media only screen and (min-width:3840px) {
  :root{ --size: xx-large; }
}
5 Likes

:rofl: :rofl: :rofl:

1 Like

I use grids for mine, and I figured out a lot of how I wanted to implement that from w3schools if I’m remembering correctly. This is how my code looks, if it helps any (it’s responsive, and shows the mobile layout by default, but will show the desktop layout if it’s big enough - I also set the sidebar and main content area to be a fixed height on desktop because I find that looks better):

Code
* {
  box-sizing:border-box
}
.grid {
  display:grid;
  grid-template-columns:100%;
  grid-template-rows:auto auto auto auto auto;
  gap:0;
  margin:25px auto;
  justify-content:center;
  align-content:center;
  width:95%
}
@media(min-width: 1000px) {
  .grid {
    grid-template-columns:80% 20%;
    grid-template-rows:auto auto auto auto;
    padding:0;
    min-height:460px
  }
  .header,
  .footer,
  .navbar {
    grid-column-start:1;
    grid-column-end:3
  }
  .center,
  .right {
    height:370px
  }
}
3 Likes

I didn’t know this was possible, holy damn. I’m saving this idea for the future!

1 Like

My site’s main structure uses a very basic 3-column “holy grail” CSS grid with a header, main content, left sidebar, right sidebar, and footer sections. I hide sidebar sections depending on my site’s various themes or the screen breakpoints, so I can seamlessly switch from three columns to one for tablets and mobile. Depending on how I want to arrange main content, I occasionally throw in a flexbox in that grid area as well like on my pixel toybox era page.

1 Like

The downside is that media queries on pointer won’t work with your browser’s “responsive design mode”, which expects you to query screen sizes.

1 Like

Oh, I see. Thanks for the tip!

1 Like

You’re welcome. It’s something I figured out the hard way while trying to test a page. :crying_cat_face:

3 Likes

Not sure if it’s exactly a CSS system, but the starter I use for Flamed Fury is based on https://every-layout.dev/ and everything extra I add I try to use the same concepts. Works well!

3 Likes