├── .gitignore ├── README.md ├── bootstrap4 ├── app.js ├── app.scss ├── index.html └── webpack.config.js ├── bulma ├── app.js ├── app.scss ├── index.html └── webpack.config.js ├── foundation ├── app.js ├── app.scss ├── index.html └── webpack.config.js ├── milligram ├── app.js ├── app.scss ├── index.html └── webpack.config.js ├── package.json ├── pure ├── app.js ├── app.scss ├── index.html └── webpack.config.js ├── semantic ├── app.css ├── app.js ├── index.html └── webpack.config.js ├── uikit ├── app.js ├── app.scss ├── index.html └── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | */main.css 3 | */main.css.gz 4 | */bundle.js 5 | */.DS_Store 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Partner code to the CSS Framework comparison at 2 | 3 | https://medium.com/@imothee/evaluating-css-frameworks-bulma-vs-foundation-vs-milligram-vs-pure-vs-semantic-vs-uikit-503883bd25a3 -------------------------------------------------------------------------------- /bootstrap4/app.js: -------------------------------------------------------------------------------- 1 | import './app.scss'; 2 | -------------------------------------------------------------------------------- /bootstrap4/app.scss: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/scss/bootstrap-reboot"; 2 | 3 | @import "~bootstrap/scss/_utilities"; 4 | @import "~bootstrap/scss/_type"; 5 | 6 | @import "~bootstrap/scss/_navbar"; 7 | @import "~bootstrap/scss/_jumbotron"; 8 | @import "~bootstrap/scss/_grid"; 9 | @import "~bootstrap/scss/_forms"; 10 | @import "~bootstrap/scss/_buttons"; -------------------------------------------------------------------------------- /bootstrap4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | 20 |
21 |

Blog Title

22 |

Blog Subtitle

23 |
24 | 25 |
26 |
27 |

Bloggy McBlogface

28 |

Today, Date Monthy

29 | 30 |
31 |
32 | 33 |
34 |
35 |

Lorem Ipsum Hereum

36 |
37 |
38 | 39 |
40 |
41 |

Comments

42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | Is this spam? 54 |
55 | 58 |
59 |
60 | 63 |
64 |
65 | 66 |
67 |
68 |
69 |
70 |
71 | 72 |
73 |
74 |

Made using Bootstrap4 Beta

75 |
76 |
77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /bootstrap4/webpack.config.js: -------------------------------------------------------------------------------- 1 | // webpack.config.js 2 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: "./bootstrap4/app.js", 6 | output: { 7 | path: __dirname, 8 | filename: "bundle.js" 9 | }, 10 | devServer: { 11 | publicPath: "/", 12 | contentBase: "./bootstrap4" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.scss$/, 18 | loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?minimize=true!sass-loader' }) 19 | } 20 | ] 21 | }, 22 | plugins: [ 23 | new ExtractTextPlugin("[name].css") 24 | ] 25 | }; -------------------------------------------------------------------------------- /bulma/app.js: -------------------------------------------------------------------------------- 1 | import './app.scss'; 2 | -------------------------------------------------------------------------------- /bulma/app.scss: -------------------------------------------------------------------------------- 1 | @import "~bulma/sass/utilities/initial-variables"; 2 | 3 | @import "~bulma/sass/utilities/_all"; 4 | @import "~bulma/sass/base/_all"; 5 | @import "~bulma/sass/layout/_all"; 6 | @import "~bulma/sass/components/media"; 7 | @import "~bulma/sass/grid/columns"; 8 | @import "~bulma/sass/elements/box"; 9 | @import "~bulma/sass/elements/button"; 10 | @import "~bulma/sass/elements/form"; 11 | @import "~bulma/sass/elements/other"; 12 | @import "~bulma/sass/elements/title"; 13 | @import "~bulma/sass/components/nav"; 14 | 15 | .is-gray { 16 | background-color: #eeeeee; 17 | } 18 | .margin-20-top { 19 | margin-top: 20; 20 | } -------------------------------------------------------------------------------- /bulma/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 18 |
19 | 20 |
21 |
22 |
23 |

24 | Blog title 25 |

26 |

27 | Blog subtitle 28 |

29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 |

Bloggy McBlogface

37 |

Today, Date Monthy

38 | 39 |
40 |
41 |

42 | 43 |

44 |
45 |
46 |
47 |

48 | Lorem Ipsum Hereum 49 |

50 |
51 |
52 |
53 | 54 |
55 |
56 |

Comments

57 | 58 |
59 | 60 |

61 | 62 |

63 |
64 | 65 |
66 | 67 |

68 | 69 |

70 |
71 | 72 |
73 |

74 | Is this spam? 75 | 79 | 83 |

84 |
85 | 86 |
87 |

88 | 89 |

90 |
91 |
92 |
93 | 94 |
95 |
96 |
97 | 98 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /bulma/webpack.config.js: -------------------------------------------------------------------------------- 1 | // webpack.config.js 2 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: "./bulma/app.js", 6 | output: { 7 | path: __dirname, 8 | filename: "bundle.js" 9 | }, 10 | devServer: { 11 | publicPath: "/", 12 | contentBase: "./bulma" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.scss$/, 18 | loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?minimize=true!sass-loader' }) 19 | } 20 | ] 21 | }, 22 | plugins: [ 23 | new ExtractTextPlugin("[name].css") 24 | ] 25 | }; -------------------------------------------------------------------------------- /foundation/app.js: -------------------------------------------------------------------------------- 1 | import './app.scss'; 2 | -------------------------------------------------------------------------------- /foundation/app.scss: -------------------------------------------------------------------------------- 1 | @import '~foundation-sites/scss/foundation'; 2 | 3 | @include add-foundation-colors; 4 | @include foundation-global-styles; 5 | @include foundation-button; 6 | @include foundation-callout; 7 | @include foundation-flex-grid; 8 | @include foundation-flex-classes; 9 | @include foundation-forms; 10 | @include foundation-menu; 11 | @include foundation-top-bar; 12 | @include foundation-typography; 13 | 14 | .bg-primary { 15 | background-color: #ccdfff; 16 | } 17 | 18 | .bg-gray { 19 | background-color: #eeeeee; 20 | } 21 | .margin-20-top { 22 | margin-top: 20; 23 | } 24 | .footer { 25 | background-color: #dddddd; 26 | } -------------------------------------------------------------------------------- /foundation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 | 15 |
16 |
17 | 18 |
19 |
20 |
21 |

Blog title

22 |

Blog subtitle

23 |
24 |
25 |
26 | 27 |
28 |
29 |
30 |
31 |

Bloggy McBlogface

32 |

Today, Date Monthy

33 | 34 |
35 |
36 | 37 |
38 |
39 |

Lorem Ipsum Hereum

40 |
41 |
42 | 43 |
44 |
45 |

Comments

46 | 47 |
48 |
49 |
50 | 53 |
54 |
55 |
56 |
57 | 60 |
61 |
62 |
63 |
64 | Is this spam? 65 | 66 | 67 |
68 |
69 |
70 |
71 | 72 |
73 |
74 |
75 | 76 |
77 |
78 | 79 |
80 |
81 |
82 |
83 | 84 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /foundation/webpack.config.js: -------------------------------------------------------------------------------- 1 | // webpack.config.js 2 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: "./foundation/app.js", 6 | output: { 7 | path: __dirname, 8 | filename: "bundle.js" 9 | }, 10 | devServer: { 11 | publicPath: "/", 12 | contentBase: "./foundation" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.scss$/, 18 | loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?minimize=true!sass-loader' }) 19 | } 20 | ] 21 | }, 22 | plugins: [ 23 | new ExtractTextPlugin("[name].css") 24 | ] 25 | }; -------------------------------------------------------------------------------- /milligram/app.js: -------------------------------------------------------------------------------- 1 | import './app.scss'; 2 | -------------------------------------------------------------------------------- /milligram/app.scss: -------------------------------------------------------------------------------- 1 | @import '~normalize.css'; 2 | 3 | @import '~milligram/src/_Color'; 4 | @import '~milligram/src/_Base'; 5 | @import '~milligram/src/_Button'; 6 | @import '~milligram/src/_Form'; 7 | @import '~milligram/src/_Grid'; 8 | @import '~milligram/src/_Image'; 9 | @import '~milligram/src/_Link'; 10 | @import '~milligram/src/_Spacing'; 11 | @import '~milligram/src/_Typography'; 12 | 13 | .navigation { 14 | border-bottom: .1rem solid #d1d1d1; 15 | display: block; 16 | height: 5.2rem; 17 | } 18 | 19 | .navigation .navigation-title { 20 | display: inline; 21 | font-size: 1.8rem; 22 | line-height: 5.2rem; 23 | padding: 0; 24 | text-decoration: none; 25 | } 26 | 27 | .hero { 28 | background-color: $color-quaternary; 29 | } 30 | 31 | .main { 32 | background-color: $color-tertiary; 33 | } 34 | 35 | .box { 36 | margin-top: 2rem; 37 | margin-bottom: 2rem; 38 | padding: 1rem; 39 | background-color: #fff; 40 | } 41 | 42 | .footer { 43 | background-color: $color-quaternary; 44 | text-align: center; 45 | } 46 | 47 | .margin-20-top { 48 | margin-top: 20; 49 | } -------------------------------------------------------------------------------- /milligram/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 |
17 |
18 |
19 |
20 |

21 | Blog title 22 |

23 |

24 | Blog subtitle 25 |

26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 |
36 |

Bloggy McBlogface

37 |

Today, Date Monthy

38 | 39 |
40 |
41 | 42 |
43 |
44 |

Lorem Ipsum Hereum

45 |
46 |
47 | 48 |
49 |
50 |

Comments

51 |
52 |
53 | 54 | 55 | 56 | 57 |
58 | Is this spam? 59 | 60 | 61 |
62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | 73 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /milligram/webpack.config.js: -------------------------------------------------------------------------------- 1 | // webpack.config.js 2 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | 4 | module.exports = { 5 | entry: "./milligram/app.js", 6 | output: { 7 | path: __dirname, 8 | filename: "bundle.js" 9 | }, 10 | devServer: { 11 | publicPath: "/", 12 | contentBase: "./milligram" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.scss$/, 18 | loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?minimize=true!sass-loader' }) 19 | } 20 | ] 21 | }, 22 | plugins: [ 23 | new ExtractTextPlugin("[name].css") 24 | ] 25 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-framework-eval", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "bootstrap": "4.0.0-beta.2", 8 | "bulma": "^0.4.2", 9 | "css-loader": "^0.28.4", 10 | "extract-text-webpack-plugin": "^2.1.2", 11 | "foundation-sites": "^6.3.1", 12 | "milligram": "^1.3.0", 13 | "node-sass": "^4.7.2", 14 | "purecss": "^1.0.0", 15 | "sass-loader": "^6.0.6", 16 | "semantic-ui-css": "^2.2.10", 17 | "style-loader": "^0.18.2", 18 | "uikit": "^3.0.0-beta.25", 19 | "webpack": "^2.6.1" 20 | }, 21 | "devDependencies": { 22 | "webpack-dev-server": "^2.4.5" 23 | }, 24 | "scripts": { 25 | "bootstrap4": "webpack-dev-server --progress --colors --config bootstrap4/webpack.config.js", 26 | "bootstrap4-build": "webpack --config bootstrap4/webpack.config.js && gzip -c bootstrap4/main.css > bootstrap4/main.css.gz", 27 | "bulma": "webpack-dev-server --progress --colors --config bulma/webpack.config.js", 28 | "bulma-build": "webpack --config bulma/webpack.config.js && gzip -c bulma/main.css > bulma/main.css.gz", 29 | "foundation": "webpack-dev-server --progress --colors --config foundation/webpack.config.js", 30 | "foundation-build": "webpack --config foundation/webpack.config.js && gzip -c foundation/main.css > foundation/main.css.gz", 31 | "milligram": "webpack-dev-server --progress --colors --config milligram/webpack.config.js", 32 | "milligram-build": "webpack --config milligram/webpack.config.js && gzip -c milligram/main.css > milligram/main.css.gz", 33 | "pure": "webpack-dev-server --progress --colors --config pure/webpack.config.js", 34 | "pure-build": "webpack --config pure/webpack.config.js && gzip -c pure/main.css > pure/main.css.gz", 35 | "semantic": "webpack-dev-server --progress --colors --config semantic/webpack.config.js", 36 | "semantic-build": "webpack --config semantic/webpack.config.js && gzip -c semantic/main.css > semantic/main.css.gz", 37 | "uikit": "webpack-dev-server --progress --colors --config uikit/webpack.config.js", 38 | "uikit-build": "webpack --config uikit/webpack.config.js && gzip -c uikit/main.css > uikit/main.css.gz" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /pure/app.js: -------------------------------------------------------------------------------- 1 | import './app.scss'; 2 | 3 | import 'purecss/build/base.css'; 4 | import 'purecss/build/buttons.css'; 5 | import 'purecss/build/menus.css'; 6 | import 'purecss/build/grids.css'; 7 | import 'purecss/build/forms.css'; -------------------------------------------------------------------------------- /pure/app.scss: -------------------------------------------------------------------------------- 1 | .l-box { 2 | padding: 2em; 3 | } 4 | 5 | .bg-hero, .footer { 6 | background-color: #ccc; 7 | } 8 | 9 | .bg-gray { 10 | background-color: #eeeeee; 11 | } 12 | 13 | .box { 14 | background-color: #ffffff; 15 | padding: 10px; 16 | } 17 | 18 | .margin-20-top { 19 | margin-top: 20; 20 | } 21 | 22 | .footer { 23 | text-align: center; 24 | } -------------------------------------------------------------------------------- /pure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 | Example Blog 12 | 16 |
17 |
18 | 19 |
20 |
21 |

22 | Blog title 23 |

24 |

25 | Blog subtitle 26 |

27 |
28 |
29 | 30 |
31 |
32 |
33 |

Bloggy McBlogface

34 |

Today, Date Monthy

35 | 36 |
37 |
38 | 39 |
40 |
41 |

Lorem Ipsum Hereum

42 |
43 |
44 | 45 |
46 |
47 |

Comments

48 | 49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | Is this spam? 58 | 62 | 66 | 67 | 68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | 77 |