3 ms·

Thanks for the feedback, although I would like to make the point: Water.css does style structured websites and doesn't involve any floats or div tags anywhere.

Thanks for the feedback, although I would like to make the point: Water.css does style structured websites and doesn't involve any floats or div tags anywhere. If not for semantic html Water.css wouldn't work at all because that's what enables the classless approach. And I'm purposely not including support for navbars and such as this is meant more for article pages and tiny demos and the sorts. If you're interested in adding a footer, though, I'm accepting PRs :)

Theodores 8y ago
Sorry we got off on a bad meeting of minds!!! However, I think you have the makings of something quite brilliant. Most of the web 'div soup industry' is stuck in the past, the tools are there and the world actually needs a really good HTML5 + CSS Grid starting kit for one off pages. I think you can make some skeleton templates in HTML5 with what you are working with on the CSS. So no classes, a template with a header, main, aside and footer at the top level, then in the main the page title as h1, then an article with its own header in h2 with sections with their own h3 titles. Then in the aside a basic form. People can delete it but if they want a contact us then it is good to go. Then in the footer have a nav. Put social media links. Also an address tag in the footer for the copyright notice. Yep, address tag. If you also add a figure and an image with a couple of srcsets in a section then it is all done for people. Next, styling. So no ids or classes. Basically a reset.css that uses css variables with fallbacks. The variables default to mobile and the fallbacks are for desktop. Do it all in ems. Also add in a details/summary. These are not being used enough and they come with default styling that few know how to do. The arrow and the blue focus box need addressing. The form, that needs to be simple label/input pairs with the css grid with the css variables and fallbacks making it responsive. The aside is also responsive. It falls below the main content in the document structure and on desktop it turns into a sidebar, left of the main content. It might take a week or two to put that together but it will put you far ahead of everyone out there who has been floating divs into 'responsive designs' with 5000 class tags for the last five years. Forget frameworks, forget divs and spans. Invent some new rules for classes, so in the template you have one article with class 'blog entry' and another with something like 'recipe'. Put the CSS together for some styling so that the whole component just needs the one class on the parent and element selectors do the rest. If you build this out then there won't be a finer educational material out there for people wanting to learn to code. All the lessons can be applied to any other 'big project', the sort that have 500 div per page in them, needlessly. If you use a small handful of css variables for 'color', 'background-color', 'font' and main document font size, perhaps with another for main content width then you can also have a 'night mode' button on there to swap these variables around to demonstrate however many themes you want, all achievable with a few variables instead of some compiled CSS bloat. As mentioned, sorry to get off on the wrong footing but you are the greatest hope for sensible CSS I have come across yet. There are many, many people who are using website builder things such as Wix to build simple sites. You can build something easier than those things for people wanting just a simple web presence on a page. Structure in a web page does matter but nobody has it now as the world wide web is a sea of divs and spans. Search engines don't have structure as a metric but sometimes we do things because we want accessible, maintainable, simple quality design and not just hacks to game search engines. You have made a great start, I think that you are green enough to be able to create something that really does make the web dev world think again as well as bring something that scratches not just your itch for a simple page well themed but for a lot of people who need a really good starting point for their own 'simple' pages. Simple sounds stupid in some contexts, I assure you that 'simple' is a virtue, any fool can make a complicated bloat of a web page, simple and elegant needs thinking. You can do it!

Theodores 8y ago

Sorry we got off on a bad meeting of minds!!! However, I think you have the makings of something quite brilliant. Most of the web 'div soup industry' is stuck in the past, the tools are there and the world actually needs a really good HTML5 + CSS Grid starting kit for one off pages. I think you can make some skeleton templates in HTML5 with what you are working with on the CSS. So no classes, a template with a header, main, aside and footer at the top level, then in the main the page title as h1, then an article with its own header in h2 with sections with their own h3 titles. Then in the aside a basic form. People can delete it but if they want a contact us then it is good to go. Then in the footer have a nav. Put social media links. Also an address tag in the footer for the copyright notice. Yep, address tag. If you also add a figure and an image with a couple of srcsets in a section then it is all done for people. Next, styling. So no ids or classes. Basically a reset.css that uses css variables with fallbacks. The variables default to mobile and the fallbacks are for desktop. Do it all in ems. Also add in a details/summary. These are not being used enough and they come with default styling that few know how to do. The arrow and the blue focus box need addressing. The form, that needs to be simple label/input pairs with the css grid with the css variables and fallbacks making it responsive. The aside is also responsive. It falls below the main content in the document structure and on desktop it turns into a sidebar, left of the main content. It might take a week or two to put that together but it will put you far ahead of everyone out there who has been floating divs into 'responsive designs' with 5000 class tags for the last five years. Forget frameworks, forget divs and spans. Invent some new rules for classes, so in the template you have one article with class 'blog entry' and another with something like 'recipe'. Put the CSS together for some styling so that the whole component just needs the one class on the parent and element selectors do the rest. If you build this out then there won't be a finer educational material out there for people wanting to learn to code. All the lessons can be applied to any other 'big project', the sort that have 500 div per page in them, needlessly. If you use a small handful of css variables for 'color', 'background-color', 'font' and main document font size, perhaps with another for main content width then you can also have a 'night mode' button on there to swap these variables around to demonstrate however many themes you want, all achievable with a few variables instead of some compiled CSS bloat. As mentioned, sorry to get off on the wrong footing but you are the greatest hope for sensible CSS I have come across yet. There are many, many people who are using website builder things such as Wix to build simple sites. You can build something easier than those things for people wanting just a simple web presence on a page. Structure in a web page does matter but nobody has it now as the world wide web is a sea of divs and spans. Search engines don't have structure as a metric but sometimes we do things because we want accessible, maintainable, simple quality design and not just hacks to game search engines. You have made a great start, I think that you are green enough to be able to create something that really does make the web dev world think again as well as bring something that scratches not just your itch for a simple page well themed but for a lot of people who need a really good starting point for their own 'simple' pages. Simple sounds stupid in some contexts, I assure you that 'simple' is a virtue, any fool can make a complicated bloat of a web page, simple and elegant needs thinking. You can do it!