vitorlans / w3-css

W3.CSS is a modern CSS framework with built-in responsiveness:

W3-CSS

What is W3.CSS?

W3.CSS is a modern CSS framework with built-in responsiveness:

• Smaller and faster than other CSS frameworks.
• Easier to learn, and easier to use than other CSS frameworks.
• Uses standard CSS only (No jQuery or JavaScript library).
• Speeds up and simplifies web development.
• Supports modern responsive design (mobile first) by default.
• Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more.
• Provides CSS equality for all devices. PC, laptop, tablet, and mobile:
• Type some Markdown on the left
• See HTML in the right
• Magic

NPM

npm install w3-css

Usages:

Lastest Version (Version 4)
import 'w3-css/w3.css';

Version 3
import 'w3-css/3/w3.css';

W3.CSS - Pro
import 'w3-css/4/w3pro.css';

W3.CSS - Mobile
import 'w3-css/4/w3mobile.css';

And to you know about the different among versions see the link https://www.w3schools.com/w3css/w3css_versions.asp

You can read more about w3-css on http://www.w3schools.com/w3css/default.asp:

w3-css's Issues

Column disappears when content is empty

If you try this example: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_two_equal&stacked=h
and remove the <p>s6</p> content, the right column will shift to the left...

Expected behavior: Left column should be blank (visibility: hidden).

Not clear on use of `import` statement

Can you provide further information or a link to examples of how the import would be used in either a react/ webpack implementation or something similar?
Thank you.

Greetings

Vitor,
Just to tell you how much I like this project! Why did yo create it? I am curious because it looks like Bootstrap but is much smaller! Also, the navigation, is there a way to only code the html only once ? According to the documentation you must enter it twice: one for the wide screen and again for smaller screens?
Thanks,
Everardo

Is this project still being maintained

I really enjoy using this css library, I was hoping that w3 will continue developing this library.

collapsible navigation bar

Hi Sir,
How to do collapsible navigation bar with clickable drop-down with at least 3 levels (as shown below)

Link 1 Link 2 Link3
-Link 1.1 - Link 2.1 - Link 3.1

• link 1.2 - Link 2.2 - Link 3.2
  -- Link 1.2.1
  -- Link 1.2.2
  -- Link 1.2.2.1
  -- Link 1.2.2.2

Question on lib

Do you like if I do a PR to add all colour library?
/lib/w3-colors-flat.css
/lib/w3-theme-indigo.css
...

Flexbox Property Suggestion

He there, I'm using your framework in my projects. I think it is quite simple and therefore it reflects the glimpse of brilliance.

One thing that could be a great addition to this framework (in my humble opinion though), the ability to use flexbox class in a simple (w3 framework style) way. In particular vertical direction. Something similar to Responsiveness class that works similarly but only horizontally.

w3-table not working as expected

w3-striped and others table properties are ignored when used in angular(10)

And, is there a way to use templates ?

hello, not synced with w3schools.com/w3css

current version is v4