CHAPTER 16
There are two additional versions of the framework, depending on your needs. Both versions are also free, and are smaller than the base W3.CSS file. However, they do not include any colors; it is up to you to define your own colors.
The CSS Pro version, available here, is 16 KB. You can add your own color support with your own style sheet, in-line styles, or a W3 theme. For example, if you wanted to use the flat color scheme, rather than the default material design colors, you could import the following style sheets.
Code Listing 79
<html> <head> <title>W3 mobile with metro colors</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/w3pro.css"> <link rel="stylesheet" href="css/w3-colors-flat.css"> |
This will result in a smaller style sheet, and only make the flat CSS colors available to your site.
The CSS Mobile version, available here, is 14KB. You can add your own color support with your own style sheet, in-line styles, or a W3 theme. In addition to no colors, this sheet also has no mobile-first media queries—it is strictly intended for mobile devices.
To use this style sheet with the metro colors, you could use the following code snippet.
Code Listing 80
<html> <head> <title>W3 mobile with metro colors</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/w3mobile.css"> <link rel="stylesheet" href="css/w3-colors-metro.css"> |