janirefsnes/w3css

W3.CSS - CSS Framework

w3css

W3.CSS - CSS Framework

Official framework added by author Jan Egil Refsnes.

Tutorials at https://www.w3schools.com/w3css

w3css's Issues

w3c validation gave me 300 errors

Greetings,
I ran the css on the validator and got 300 errors.
Any thoughts?
Thanks,
Everardo

Make the width of a <figcaption> match the width of the <img> inside its <figure> tag

There's a SO question that describes the issue in more detail.

A solution is presented in this answer which I would very much like to be included to this framework.

Additional width added by consecutive w3-dropdown-hover within w3-dropdown-content

I have been seeking to use w3.css in Wordpress, with second level pull-right submenus. In doing so I have discovered a problem which is somehow down to series of w3-dropdown-hovers within a submenu.

If there are consecutive w3-dropdown-hover divs, for each one additional width is added to the submenu.
If there are non-consecutive w3-dropdown-hover divs, there is no problem.

I have found it impossible to locate the css causing the additional width.

You can 'bodge' a fix by declaring a max-width for the containing w3-dropdown-content, but that's hardly elegant.

I know that w3.css wasn't made to support sub-menus, but it's potentially easily implemented. The question is, where is the extra width in the menus with consecutive w3-dropdown-hover divs coming from?? I can't see anything in w3.css that could cause this, but something must be there.

I've attached a file that demonstrates the problem ... I've had to rename it to .txt, but just download, rename to .html and you can double-click it to display in a browser.
testpage2.txt

Update to latest version

Could you please update to the latest version? Currently 4.13.

Also there is an un-answered post in the forum at http://w3schools.invisionzone.com/topic/59628-w3css-development/?tab=comments#comment-323958 regarding the same matter

w3-bottom have problem on FireFox mobile

Open your example for w3-bottom on firefox in Android for example. Then you will see when you scroll to the end of the page, one space appear at the end of the page that have that kind of footer.

HTML Font Not working

I have two css files that I want to use on my website. The first one is my own stylesheet that sets the font type/family for the whole html file and the other one is W3.CSS. When I load up my webpage with both stylesheets in the CSS folder. It only shows the W3.CSS style and not the file that I had made for my stylesheet. How can this be fixed.
(Attached is my current webpage files)

HTML.zip

Latest checkin w3cpro...

Why have a w3c and a w3cpro? Are you planning a new branch or fork? What are your contributor guidelines? Do you plan to have an uncompressed 'Developer' and a minified 'production' version?

Showing sidebar while .w3-collapse

I believe that this line should be removed from large screen media: .w3-sidebar.w3-collapse{display:block!important}.
I'm not sure if this is a feature or a bug because it's been there for a very long time. Furthermore, I already fixed it in my fork: https://github.com/emnawer.

include template from w3css

i hope you can put template from https://www.w3schools.com/w3css/w3css_templates.asp

to github

if some one want to add new template, maybe they can use github only

Licensing is not obvious

Someone linked me to this project at https://www.w3schools.com/w3css/ and it reads, "W3.CSS is Free[.] W3.CSS is free to use. No license is necessary." The CSS file that the page links to does not have any links to this repository or license information. There is a download link which also does not mention the license, but does link to this repository. This repository is MIT.

I think it would be helpful to add a line to w3.css that points to this repository and mentions the license so that people know what license the file is under and where they could file issues and send patches. If I made a patch like this, would it be considered?

missing files

there is no js library for modals, accordion, tabs, navbar dropdown in the zip file

Add darkness and lightness to hover effects

I am wonder how can i achieve the w3-theme-d1 etc... for a hover effect

I can override that manually but i do not want because if you update this i will lose my changes and i will need again to re add them, if you can add .w3-hover-theme-d1 ..... .w3-hover-d5 and .w3-hover-theme-l1 ........ .w3-hover-theme-l5

Example, you have :

.w3-theme-l5 {color:#000 !important; background-color:#f4faf4 !important}
.w3-theme-l4 {color:#000 !important; background-color:#dbefdc !important}
.w3-theme-l3 {color:#000 !important; background-color:#b7dfb8 !important}
.w3-theme-l2 {color:#000 !important; background-color:#93cf95 !important}
.w3-theme-l1 {color:#fff !important; background-color:#6ec071 !important}
.w3-theme-d1 {color:#fff !important; background-color:#459c48 !important}
.w3-theme-d2 {color:#fff !important; background-color:#3d8b40 !important}
.w3-theme-d3 {color:#fff !important; background-color:#357a38 !important}
.w3-theme-d4 {color:#fff !important; background-color:#2e6830 !important}
.w3-theme-d5 {color:#fff !important; background-color:#265728 !important}

in these file
https://www.w3schools.com/lib/w3-theme-green.css

If you can copy theme to contain also hover effect it willbe perfect

look like this

.w3-hover-theme-l5:hover {color:#000 !important; background-color:#f4faf4 !important}
.w3-hover-theme-l4:hover {color:#000 !important; background-color:#dbefdc !important}
.w3-hover-theme-l3:hover {color:#000 !important; background-color:#b7dfb8 !important}
.w3-hover-theme-l2:hover {color:#000 !important; background-color:#93cf95 !important}
.w3-hover-theme-l1:hover {color:#fff !important; background-color:#6ec071 !important}
.w3-hover-theme-d1:hover {color:#fff !important; background-color:#459c48 !important}
.w3-hover-theme-d2:hover {color:#fff !important; background-color:#3d8b40 !important}
.w3-hover-theme-d3:hover {color:#fff !important; background-color:#357a38 !important}
.w3-hover-theme-d4:hover {color:#fff !important; background-color:#2e6830 !important}
.w3-hover-theme-d5:hover {color:#fff !important; background-color:#265728 !important}

also if you add the same for text hover effects like these:

.w3-hover-text-theme-l5:hover {color:#f4faf4 !important}
.w3-hover-text-theme-l4:hover {color:#dbefdc !important}
.w3-hover-text-theme-l3:hover {color:#b7dfb8 !important}
.w3-hover-text-theme-l2:hover {color:#93cf95 !important}
.w3-hover-text-theme-l1:hover {color:#6ec071 !important}
.w3-hover-text-theme-d1:hover {color:#459c48 !important}
.w3-hover-text-theme-d2:hover {color:#3d8b40 !important}
.w3-hover-text-theme-d3:hover {color:#357a38 !important}
.w3-hover-text-theme-d4:hover {color:#2e6830 !important}
.w3-hover-text-theme-d5:hover {color:#265728 !important}

also if you add the same for border hover effects like these:

.w3-hover-border-theme-l5:hover {border-color:#f4faf4 !important}
.w3-hover-border-theme-l4:hover {border-color:#dbefdc !important}
.w3-hover-border-theme-l3:hover {border-color:#b7dfb8 !important}
.w3-hover-border-theme-l2:hover {border-color:#93cf95 !important}
.w3-hover-border-theme-l1:hover {border-color:#6ec071 !important}
.w3-hover-border-theme-d1:hover {border-color:#459c48 !important}
.w3-hover-border-theme-d2:hover {border-color:#3d8b40 !important}
.w3-hover-border-theme-d3:hover {border-color:#357a38 !important}
.w3-hover-border-theme-d4:hover {border-color:#2e6830 !important}
.w3-hover-border-theme-d5:hover {border-color:#265728 !important}

also do the same for both border and text color

This it will be a great addition as i think and it is almost needed

Addition to w3-round

Is it possible to add:
w3-round-topleft
w3-round-topright
w3-round-bottomleft
w3-round-botomright

AMP Compatible

This is really good framework, really love it. Can an AMP Compatible version be released? without !important in css https://www.ampproject.org/docs/design/responsive/style_pages

Input rendering problems on Firefox

Hi,
On Firefox there seem to be some problems rendering the custom input elements. Shapes are not in proportion and the disabled state is not grey. I'm on version 80 here and on Chrome things look as they should.

Select input:

Radiobuttons (and the disabled item is not greyed out):

Checkboxes:

Can this be fixed easily?

Using CSS delivery system

Could I ask you write few words about using CSS packager tools with w3css.

I use Python and want to install W3CSS in my assets and compile/compacting.

Upgrade advice

Hi! are there some notes to upgrade from v3 to v4?

Update w3-margin to be mobile responsive

Hi, there is a user display situation when using W3.CSS Responsive class with Margin class, it makes a bad display when below or equal to 600px as the width becomes (100% + 16px + 16px). To fix it, we have to check for w3-margin with w3-mobile.

/* Make W3-Margin Mobile Responsive /
@media (max-width:600px){
.w3-margin.w3-mobile {
margin-left: 0px !important;
margin-right: 0px !important;
}
}
/ End Make W3-Margin Mobile Responsive */

This is a fully working bad situation: bad.txt
And this one with the expected situation: good.txt

You have to simulate a 600px display width.

Downloadable version and GitHub version differ

https://github.com/JaniRefsnes/w3css (v4.10) are not up to date with downloadable versions from https://www.w3schools.com/w3css/w3css_downloads.asp (v4.13)

Is w3schools css has an internal server?

I went to the website and it's look was like this

scss / less files?

Does this repo contain the source for w3css or a build artifact?
If not, will you publish the actual css / less / sass source?

Responsive tables

Hi there,

is there a possibility you could add a responsive table class like the one at https://foundation.zurb.com/building-blocks/blocks/responsive-card-table.html ???

I like the feature where the rows convert to columns when the width of the window is under 640px

As Reactjs developer, I want to be able to include w3css in create-react-app app

currently, i am doing: download w3.css files manually and put in the ./src directory and do @import.

i think it should be like sass, that i can do npm install --save node-w3-css (sass do npm install --save node-sass)

make available the w3css themes as github repo

Hi @JaniRefsnes ,

Could you please make the Downloadable Color Themes mentioned on the webpage (https://www.w3schools.com/w3css/w3css_color_themes.asp) available on the github.

On a side note, I'd like to appreciate for these beautiful css library, themes and typography. It's minimal, easy and simple to work.

Thanks,
Arun

Breadcrumb feature request

Can you add breadcrumb feature?

https://www.w3schools.com/howto/howto_css_breadcrumbs.asp