Thank you. I will learn the dark arts yet. As you can see on this page, I am trying to develop a reusable container to publish various articles. Some may have a photo, some may not. Am I on the right track. Also, what if you want to change the colors of the background or fonts. Do you need to define a different style set for each one? In know there is SCSS, but I am not ready to tackle that.
As the photo is floated it can be removed or added without causing a problem as the text will just adjust as required.
You can set up color themes using CSS variables (CSS custom properties) and then you can just change the vriable with a modifier class on sections (or even whole pages as required). CSS variables are not SCSS but native css and more powerful.
I suggest you look at some of the Kevin Powell videos as he goes through what can be done with css variables but as a very simple and heavily contrived example you can look at this codepen.
The main colours are declared at the :root level and then you can use a modifier class where you want to redefine those colors for the new section. All you need to change is the variable and anywhere the theme color is used in that section it is changed accordingly without having to change every style.
If you wanted whole page changes you can add the class to the body and make the changes for everything on the page which is how a lot of the styleswitcher and light/dark themes are designed.
You do have to be consistent in your construction and really have fine-tuned your design to use the correct colours and backgrounds etc. The most important thing is consistency and keeping to the theme you have created and not just changing stuff on a whim.
1 Like
Thank you again for all of the help. I am still wrestling with the layering issue.Please see kidsmedicalcare.com/HowTo/How_to_Change_My_Medicaid_Plan. I am trying to override the global ul,
ol {
list-style: none;
}
prior to any layers. I created a specific rule for any <ul> in the article container, but it doesnāt override the previous rule.
Your text says āoverride the global ulā but your code is for āolā. Is that just a typo?
A tad confused here with the amends to layers and what not. It seems you are now mixing base styles with reset.
A css reset I tend to import into my main scss file. I store it in an imports folder under the name __reset.scss
e.g.
/imports
__reset.scss
main.scss
Then in main.scss at the top of the file I use @use to import it.
@use 'imports/__reset.scss';
@layer base {
:root {
--text-darkest: black;
--text-dark: hsl(50, 0%, 20%);
--text-light: hsl(206, 100%, 97%);
--text-lightest: white;
--text-accent: hsl(150deg 100% 70%);
--text-secondary: hsl(15, 75%, 60%);
--background_darkorange: darkorange;
--background-dark: hsl(197, 87%, 30%);
--background-darker: hsl(197, 87%, 25%);
--background-darkest: hsl(197, 87%, 15%);
--background-light: hsl(185deg 45% 85%);
--background-lightest: hsl(206, 100%, 97%);
--background-white: white;
--background-accent: hsl(5, 85%, 70%);
--light-tint: hsla(0 100% 100% / 0.15);
}
}
@layer base {
body {
background-color: var( --background-white);
}
...
}
I am looking at Andy Bellās reset example, and thinking it could be amended to fit your requirements e.g.
@layer reset {
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Remove default margin and padding in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
ul, ol {
margin: 0;
padding: 0;
}
/* Remove list styles on ul, ol elements */
ul,
ol {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.6;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font-family: inherit;
font-size: inherit;
}
}
In @layer layout you seem to have moved the media query outside of the layer? Instead of this
@layer layout {
.container {
padding-inline: 1rem;
margin-block-end: 1.5rem;
/*outline: 1px dashed magenta;*/
}
.container-flex {
display: flex;
flex-direction: column;
gap: 1rem;
}
.section {
padding-block: 1rem;
outline: 1px dashed red;
}
.hero{
width: 100%;
}
#divnewpatientform {
margin-top: 1em;
margin-inline: auto;
}
/* Inside of the layer instead no? */
/* desktop view */
@media (width > 768px) {
/* increase left and right padding */
.container {
padding-inline: 2rem;
}
/* switch to row */
.container-flex {
flex-direction: row;
align-items: start;
gap: 2rem;
}
section {
max-width: 1200px;
margin-inline: auto;
}
.hero-image {
width: 200px;
border-radius: 0.5rem;
}
}
}
There is a lot to work through, but these things stand out immediately.
1 Like
Itās both in the style sheet e.g.
ul,
ol {
list-style: none;
}
1 Like
Inside of utilities you have
@layer utilities {
...
#whypediatrician p,
#medicalhome p,
#afterhours p,
#appointments p,
#pcpchoice p,
#medicalhome p {
max-width: none;
}
}
That is not a utility and indicates a problem that needs fixing in another way. Iām guessing it is a specificity override.
I know Paul isnāt sold on layers. Personally I like them for grouping and it also makes it quite easy to hide the entire layer/group in the editor. If you arenāt sold on them either, I would scrap them entirely rather than sporadically using them. Basically commit either way.
1 Like
For readability it can help to space and group your css rules. So for instance instead of this
.article-container {
max-width: 960px;
margin-inline: auto;
padding-block: 2rem;
padding-inline: var(--inline-padding);
padding-inline: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
color: var(--text-dark);
background-color: var(--background-light);
border-radius: 0.35rem;
border: 1px solid red;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
margin-top: 1em;
}
group the rules by their type/role and space them
.article-container {
max-width: 960px;
display: flex;
flex-direction: column;
gap: 2rem;
margin-inline: auto;
margin-block-start: 1rem;
padding-block: 2rem;
padding-inline: var(--inline-padding, 2rem); /* var takes an optional fallback if no variable */
color: var(--text-dark);
background-color: var(--background-light);
border: 1px solid red;
border-radius: 0.35rem;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}
1 Like
Thank you. All great points. ut my original question is I want <ul> and <ol> to default to no list style, but want to have the bulleting or numbering in one element article-container-white ul.
In the original reset from Andy Bell the ol and ul are defined like this
ul[role='list'],
ol[role='list'] {
list-style: none;
}
So to create a list with a list-style of none, you would do
<ul role='list'>
<li>...
</ul>
And to create a default list with bulleting etc. you would remove the role e.g.
<ul>
<li>
</ul>
Here is an updated reset with that in place. I have also removed the padding 0 rule defined for paragraphs, headings and lists. I guess you could potentially add that to the ul[role=ālistā], ol[role=ālistā]
@layer reset {
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
ul, ol {
margin: 0;
}
/* Remove list styles on ul, ol elements */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.6;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font-family: inherit;
font-size: inherit;
}
}
I wanted to create an example based on your site example and again ran into issues. For instance these two definitions.
.article-container {
max-width: 960px;
margin-inline: auto;
padding-block: 2rem;
padding-inline: var(--inline-padding);
padding-inline: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
color: var(--text-dark);
background-color: var(--background-light);
border-radius: 0.35rem;
border: 1px solid red;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
margin-top: 1em;
}
.article-container-white {
max-width: 960px;
margin-inline: auto;
padding-block: 2rem;
padding-inline: var(--inline-padding);
padding-inline: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
color: var(--text-dark);
background-color: var(--background-white);
border-radius: 0.35rem;
border: 1px solid black;
border-radius: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
margin-top: 1em;
margin-bottom: 1em;
}
I canāt just give you a quick fix or a sticking plaster. The foundation of your code need fixing.
The above definition illustrate the need to keep it DRY. All you are doing is creating mountains of duplicate code to wade through, amend and debug.
With regards the HTML, I appreciate you are learning and experimenting, but personally I would keep it simple and just use sections instead of articles.
Your html
<article id="articlecontent" name="articlecontent" class="article-container-white">
id names are unique. They can be used as hooks for Javascript and can be used as anchor links for in page navigation. āarticlecontentā is a general name, why not something along the lines of id=āmedicare-planā instead. That would be more specific and unique.
name properties are for inputs only. They enable data to be passed to the backend from forms with the name property being the key name ā they donāt belong here.
Here is an example with some amended code based on your page.
HTML
<section>
<div class="section-container border-radius-1">
<ul>
<li>Medicaid Open Enrollment which runs from October 1 to November 30 each year.</li>
<li>"For Cause". This happens when your PCP is no longer with the plan or if you moved.</li>
<li>Within 60 days of obtaining or renewing your Medicaid.</li>
</ul>
</div>
</section>
<section id='medicare-plan' class='medicare-plan'>
<div class="section-container border-radius-3">
<ul role='list' class="medicare-plan-list">
<li>Medicaid Open Enrollment which runs from October 1 to November 30 each year.</li>
<li>"For Cause". This happens when your PCP is no longer with the plan or if you moved.</li>
<li>Within 60 days of obtaining or renewing your Medicaid.</li>
</ul>
</div>
</section>
CSS
@layer reset {
...
}
@layer base {
:root {
--background-light: whitesmoke;
}
}
@layer base {
html {
font-family: system-ui, sans-serif;
color-scheme: only light;
}
body {
padding: 2rem;
}
}
@layer utilities {
.border-radius-1 {
border-radius: .35rem;
}
.border-radius-2 {
border-radius: .75rem;
}
.border-radius-3 {
border-radius: 1rem;
}
}
@layer components {
.section-container {
max-width: 960px;
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 1rem;
margin-inline: auto;
padding-block: 2rem;
padding-inline: var(--inline-padding, 2rem);
color: var(--text-dark);
background-color: var(--background-light);
border: 1px solid red;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}
.medicare-plan {
/*
no duplication for a .section-container-white
just two changes to the container inside of .medicare-plan
*/
.section-container {
background-color: white;
margin-block: 1rem;
}
.medicare-plan-list {
display: flex;
flex-direction: column;
gap: .75rem; /* spacing between list items */
/* remove the padding */
padding-inline-start: 0;
}
}
}
And a codepen
1 Like
Just to add the main issue here is that you are putting the cart before the horse.
You need to think about your design for the whole site, sketch it out, use figma or a paint package etc to come up with designs.
You want to think about consistency and how general styles can be applied across the pages. That way you will be able to create less code and make sweeping changes in one place.
At the moment it seems you are making it up as you go along, something I am certainly guilty of. The end result is a mountain of spaghetti code. I seem to remember your background is in coding ā the same principles of clean coding apply to CSS.
Take a step back for a minute
1 Like
@layer priority
So a bit of knowledge I had forgotten about, you can define multiple layers in one go. e.g.
@layer base, layout, utilities;
This sets a priority order from left to right with the last layer having the highest priority e.g. āutilitiesā.
For example this
@layer base, components, utilities;
@layer base {
... some rules
}
@layer utilities {
... some rules
}
@layer components {
... some rules
}
is equivalent to this
@layer base {
... some rules
}
@layer components {
... some rules
}
@layer utilities {
... some rules
}
This is quite useful because ideally you want āutilitiesā to override the other layer rules, but you donāt necessarily want to have to keep that block/layer at the end of your css.
Example with this css
@layer components, utilites;
@layer utilities {
.background-white {
background-color: white;
}
}
@layer components {
.box {
width: 200px;
height: 200px;
background-color: red;
}
}
This divās background will be overridden with the background color white
<div class='box background-white'></div>
1 Like
With the above post in mind, I have created a second example.
I have also added a flex-column layout which utilises data attributes to change the gap between rows.
@layer layout {
.flex-column {
display: flex;
flex-direction: column;
gap: .5rem;
/* shorthand for .flex-column[data-gap='small'] */
&[data-gap='small'] {
gap: .5rem;
}
&[data-gap='medium'] {
gap: 1rem;
}
&[data-gap='large'] {
gap: 2rem;
}
}
}
This can be applied like so e.g.
<ul class='flex-column' data-gap='medium'>
<li>...
</ul>
The html for the section is now
<section id='medicare-plan' class='section medicare-plan'>
<div class='section-container border-radius-3 background-white'>
<ul role='list' class='medicare-plan-list flex-column' data-gap='large'>
<li>Medicaid Open Enrollment which runs from October 1 to November 30 each year.</li>
<li>"For Cause". This happens when your PCP is no longer with the plan or if you moved.</li>
<li>Within 60 days of obtaining or renewing your Medicaid.</li>
</ul>
</div>
</section>
codepen here
1 Like
Thank you so much for all of your help and patience. I really am trying to take your advice to heart, but there is a lot to unpack here. Iāll circle back after Iāve studied everything you put up here. One question. In your example above @layer base, components, utilities; where does reset go?
1 Like