├── LICENSE ├── README.md ├── build ├── data │ └── themes.json ├── gulpfile.js ├── index.ejs ├── partials │ ├── components.ejs │ ├── download.ejs │ ├── footer.ejs │ └── nav.ejs ├── scripts.js ├── template.css ├── template2.css ├── template2.ejs ├── template3.css └── template3.ejs ├── dist ├── assets │ ├── hat.png │ ├── ss_deeply.png │ ├── ss_electro.png │ ├── ss_graymor.png │ ├── ss_hollar.png │ ├── ss_lymcha.png │ ├── ss_mickie.png │ ├── ss_minco.png │ ├── ss_monotone.png │ ├── ss_poypull.png │ ├── ss_preptor.png │ ├── ss_skeeblu.png │ ├── ss_sunset.png │ └── ss_wandoo.png ├── css │ ├── styles.css │ └── theme.css ├── deeply │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── electro │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── favicon.ico ├── graymor │ ├── index.html │ ├── indexold.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── hollar │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── index.html ├── lymcha │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── mickie │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── minco │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── monotone │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── preptor │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── scripts.js ├── skeeblu │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss ├── sunset │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss └── wandoo │ ├── index.html │ ├── scripts.js │ ├── template.css │ ├── template2.css │ ├── template2.html │ ├── template3.css │ ├── template3.html │ ├── theme.css │ ├── theme.min.css │ └── theme.scss └── src ├── deeply └── theme.scss ├── electro └── theme.scss ├── graymor └── theme.scss ├── hollar └── theme.scss ├── index.ejs ├── lymcha └── theme.scss ├── mickie └── theme.scss ├── minco └── theme.scss ├── monotone └── theme.scss ├── partials ├── footer.ejs ├── htb.ejs └── nav.ejs ├── preptor └── theme.scss ├── scripts.js ├── skeeblu └── theme.scss ├── sunset └── theme.scss └── wandoo └── theme.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Tophat 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tophat Themes 🎩 2 | 3 | Free, open source themes to give Bootstrap 4 a custom, stylish look. 4 | 5 | Give your Bootstrap 4 projects a unique, custom style. Simply download the `theme.css` file for any 6 | theme, and include it after the standard bootstrap.css in your project's HTML templates. 7 | Each theme also includes example layout templates to demonstrate Bootstrap 4 elements, components, and content integration. 8 | 9 | https://themesguide.github.io/top-hat/dist/ 10 | 11 | ## Usage 12 | 13 | Clone this repository or download individual themes as desired. Each theme folder contains a `theme.css` file which is the 14 | custom styles (colors, fonts, etc..) that you can use for your Bootstrap 4 projects. The `theme.css` file should always follow 15 | the `bootstrap.css`: 16 | 17 | ``` 18 | 19 | 20 | 21 | ``` 22 | 23 | Additionally, each theme folder contains example layout templates to get your started. Each template has a corresponding `template.css` 24 | with styles specific to each template, but it's use is optional, and unrelated to the theme styles in `theme.css`. 25 | 26 | - index.html (default) 27 | - template1.html 28 | - template2.html 29 | 30 | **All themes use the latest Bootstrap 4** 31 | 32 | - Bootstrap: 33 | - Ionicons: 34 | - Google Fonts: 35 | 36 | ## License 37 | 38 | ©2018 under the [MIT License](https://opensource.org/licenses/MIT). Moved from /Tophat 39 | -------------------------------------------------------------------------------- /build/data/themes.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "4.3.1", 3 | "themes": [ 4 | { 5 | "name": "Wandoo", 6 | "fonts": { 7 | "headings":"Comfortaa", 8 | "base":"Nunito" 9 | }, 10 | "desc": "A pleasant theme with red primary color.", 11 | "vars": { 12 | "gray-300": "#e0e0e0" 13 | }, 14 | "colors": { 15 | "primary": "#FF304F", 16 | "secondary": "#CACACA", 17 | "success": "#015668", 18 | "danger": "#06648C", 19 | "info": "#0F81C7", 20 | "warning": "#0DE2EA", 21 | "light": "#ececec", 22 | "dark": "#222222" 23 | }}, 24 | { 25 | "name": "Graymor", 26 | "fonts": { 27 | "headings":"Oswald", 28 | "base":"Muli" 29 | }, 30 | "vars": { 31 | "enable-rounded": false 32 | }, 33 | "desc": "Square corners with shades of gray and sea green.", 34 | "colors": { 35 | "primary": "#2f3c48", 36 | "secondary": "#6f7f8c", 37 | "success": "#3e4d59", 38 | "danger": "#cc330d", 39 | "info": "#5c8f94", 40 | "warning": "#6e9fa5", 41 | "light": "#eceeec", 42 | "dark": "#1e2b37" 43 | }}, 44 | { 45 | "name": "Lymcha", 46 | "desc": "Like a sunny summer day in Northern Italy.", 47 | "fonts": { 48 | "headings":"Muli" 49 | }, 50 | "colors": { 51 | "primary": "#07689F", 52 | "secondary": "#C9D6DF", 53 | "success": "#11D3BC", 54 | "danger": "#F67280", 55 | "info": "#A2D5F2", 56 | "warning": "#FF7E67", 57 | "light": "#FAFAFA", 58 | "dark": "#4e4e4e" 59 | }}, 60 | { 61 | "name": "Deeply", 62 | "desc": "A dark background theme with bold contrasting colors.", 63 | "fonts": { 64 | "headings":"Comfortaa" 65 | }, 66 | "images": { 67 | "bg":"https://images.unsplash.com/photo-1489846986031-7cea03ab8fd0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6c62b8e2662924c44c4725b8286ed60&auto=format&fit=crop&w=1600&q=80" 68 | }, 69 | "custom":".navbar-dark.bg-primary {background-color:#111111 !important;}", 70 | "vars": { 71 | "enable-shadows": true, 72 | "gray-300": "#000000", 73 | "gray-800": "#555555", 74 | "body-bg": "$black", 75 | "body-color": "#cccccc", 76 | "link-color": "#f0f0f0", 77 | "link-hover-color": "darken($link-color,20%)", 78 | "font-size-base": "1.1rem", 79 | "table-accent-bg": " rgba($white,.05)", 80 | "table-hover-bg": "rgba($white,.075)", 81 | "table-border-color": "rgba($white, 0.3)", 82 | "table-dark-border-color": " $table-border-color", 83 | "table-dark-color": "$white", 84 | "input-bg": "$gray-300", 85 | "input-disabled-bg": " #ccc", 86 | "dropdown-bg": "$gray-800", 87 | "dropdown-divider-bg": "rgba($black,.15)", 88 | "dropdown-link-color": "$body-color", 89 | "dropdown-link-hover-color": "$white", 90 | "dropdown-link-hover-bg": "$body-bg", 91 | "nav-tabs-border-color": "rgba($white, 0.3)", 92 | "nav-tabs-link-hover-border-color": "$nav-tabs-border-color", 93 | "nav-tabs-link-active-bg": "transparent", 94 | "nav-tabs-link-active-border-color": "$nav-tabs-border-color", 95 | "navbar-dark-hover-color": "$white", 96 | "navbar-light-hover-color": "$gray-800", 97 | "navbar-light-active-color": "$gray-800", 98 | "pagination-color": "$white", 99 | "pagination-bg": "transparent", 100 | "pagination-border-color": "rgba($black, 0.6)", 101 | "pagination-hover-color": "$white", 102 | "pagination-hover-bg": "transparent", 103 | "pagination-hover-border-color": "rgba($black, 0.6)", 104 | "pagination-active-bg": "transparent", 105 | "pagination-active-border-color": "rgba($black, 0.6)", 106 | "pagination-disabled-bg": "transparent", 107 | "pagination-disabled-border-color": "rgba($black, 0.6)", 108 | "jumbotron-bg": "darken($gray-900, 5%)", 109 | "card-border-color": "rgba($black, 0.6)", 110 | "card-cap-bg": "lighten($gray-800, 10%)", 111 | "card-bg": "lighten($body-bg, 5%)", 112 | "modal-content-bg": "lighten($body-bg,5%)", 113 | "modal-header-border-color": "rgba(0,0,0,.2)", 114 | "progress-bg": "darken($gray-900,5%)", 115 | "progress-bar-color": "$gray-600", 116 | "list-group-bg": "lighten($body-bg,5%)", 117 | "list-group-border-color": "rgba($black,0.6)", 118 | "list-group-hover-bg": "lighten($body-bg,10%)", 119 | "list-group-active-color": "$white", 120 | "list-group-active-bg": "$list-group-hover-bg", 121 | "list-group-active-border-color": "$list-group-border-color", 122 | "list-group-disabled-color": "$gray-800", 123 | "list-group-disabled-bg": "$black", 124 | "list-group-action-color": "$white", 125 | "breadcrumb-active-color": "$gray-500" 126 | }, 127 | "colors": { 128 | "primary": "#FF550B", 129 | "secondary": "#303030", 130 | "success": "#015668", 131 | "danger": "#FF304F", 132 | "info": "#0F81C7", 133 | "warning": "#0DE2EA", 134 | "light": "#e8e8e8", 135 | "dark": "#000000" 136 | }}, 137 | { 138 | "name": "Mickie", 139 | "fonts": { 140 | "headings":"Raleway" 141 | }, 142 | "desc": "Like a precocious child that doesn't go away.", 143 | "images": { 144 | "bg": "https://images.unsplash.com/photo-1495977958109-d0a07c767f0e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2b819fca66b1fedb4965a8693121df7d&auto=format&fit=crop&w=1600&q=80" 145 | }, 146 | "custom": "html {font-size: 0.8rem;}@include media-breakpoint-up(sm) {html {font-size: .9rem;}}@include media-breakpoint-up(md) {html {font-size: 1rem;}}@include media-breakpoint-up(lg) {html {font-size: 1.1rem;}}", 147 | "colors": { 148 | "primary": "#f6648C", 149 | "secondary": "#CACACA", 150 | "success": "#035668", 151 | "danger": "#FF444F", 152 | "info": "#3F81C7", 153 | "warning": "#0DE2EA", 154 | "light": "#eAeAeA", 155 | "dark": "#223322" 156 | }}, 157 | { 158 | "name": "Electro", 159 | "fonts": { 160 | "headings":"Nunito" 161 | }, 162 | "desc": "The intense, saturated blue theme with rounded buttons.", 163 | "vars": { 164 | "body-bg": "#ffffff", 165 | "display1-weight": "600", 166 | "display2-weight": "600", 167 | "display3-weight": "600", 168 | "btn-border-radius": "1.3rem", 169 | "btn-border-radius-lg": "1.6rem", 170 | "btn-border-radius-sm": ".8rem" 171 | }, 172 | "colors": { 173 | "primary": "#1633ff", 174 | "secondary": "#a0b7bc", 175 | "success": "#1633ff", 176 | "danger": "#00f900", 177 | "info": "#7ebcfa", 178 | "warning": "#00f900", 179 | "light": "#eef0f2", 180 | "dark": "#000633" 181 | }}, 182 | { 183 | "name": "Hollar", 184 | "fonts": { 185 | "headings":"Autour One", 186 | "base":"Open Sans" 187 | }, 188 | "desc": "A nature toned theme with big font.", 189 | "colors": { 190 | "primary": "#528165", 191 | "secondary": "#eed75a", 192 | "success": "#FEC100", 193 | "danger": "#703B3B", 194 | "info": "#63e792", 195 | "warning": "#FFE869", 196 | "light": "#FDFBF7", 197 | "dark": "#555555" 198 | }}, 199 | { 200 | "name": "Minco", 201 | "fonts": { 202 | "headings":"Crete Round", 203 | "base":"Nunito" 204 | }, 205 | "desc": "Unique and stylish with a readable font.", 206 | "colors": { 207 | "primary": "#083358", 208 | "secondary": "#F67280", 209 | "success": "#0074E4", 210 | "danger": "#FF4057", 211 | "info": "#74DBEF", 212 | "warning": "#FC3C3C", 213 | "light": "#F2F2F0", 214 | "dark": "#072247" 215 | }}, 216 | { 217 | "name": "Skeeblu", 218 | "fonts": { 219 | "headings":"Yantramanav" 220 | }, 221 | "desc": "A big, blue sky and no clouds in sight.", 222 | "vars": {"body-bg":"#efefef"}, 223 | "colors": { 224 | "primary": "#27a2fc", 225 | "secondary": "#a0b7bc", 226 | "success": "#37bd74", 227 | "danger": "#e8286b", 228 | "info": "#7ebcfa", 229 | "warning": "#ff9b37", 230 | "light": "#eef0f2", 231 | "dark": "#3c4055" 232 | }}, 233 | { 234 | "name": "Preptor", 235 | "desc": "A bright, hot pink theme in good taste.", 236 | "fonts": { 237 | "headings":"Lato", 238 | "base":"Muli" 239 | }, 240 | "colors": { 241 | "primary": "#D80E70", 242 | "secondary": "#dddddd", 243 | "success": "#4EF037", 244 | "danger": "#FA4659", 245 | "info": "#00BBF0", 246 | "warning": "#f4f133", 247 | "light": "#eeeeee", 248 | "dark": "#353535" 249 | }}, 250 | { 251 | "name": "Monotone", 252 | "fonts": { 253 | "headings":"Open Sans", 254 | "base":"Montserrat" 255 | }, 256 | "desc": "You become resigned to the monotony of one color.", 257 | "colors": { 258 | "primary": "#222222", 259 | "secondary": "#666666", 260 | "success": "#333333", 261 | "danger": "#434343", 262 | "info": "#515151", 263 | "warning": "#5f5f5f", 264 | "light": "#eceeec", 265 | "dark": "#111111" 266 | }}, 267 | { 268 | "name": "Sunset", 269 | "fonts": { 270 | "headings": "Voltaire" 271 | }, 272 | "desc": "Hungover on the beach at sunrise.", 273 | "images":{ 274 | "bg":"https://images.unsplash.com/photo-1503756043224-101dab0dcb30?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4bd62d181f78bd2f85ab23a677acd6f4&auto=format&fit=crop&w=1600&q=80" 275 | }, 276 | "colors": { 277 | "primary": "#2F414A", 278 | "secondary": "#F47B53", 279 | "success": "#420084", 280 | "danger": "#f2460d", 281 | "info": "#7ebcfa", 282 | "warning": "#ff9933", 283 | "light": "#eef0f2", 284 | "dark": "#000633" 285 | }} 286 | ] 287 | } -------------------------------------------------------------------------------- /build/gulpfile.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = 'production'; 2 | 3 | var gulp = require("gulp"); 4 | var ejs = require("gulp-ejs"); 5 | var sass = require("gulp-sass"); 6 | var rename = require("gulp-rename"); 7 | var fs = require("fs"); 8 | var cleanCSS = require('gulp-clean-css'); 9 | var concat = require('gulp-concat'); 10 | var mergeStream = require('merge-stream'); 11 | 12 | var bootstrapVersion = "4.3.1"; 13 | var output = "../dist"; 14 | //var output = "../"; 15 | 16 | /* helper functions for ejs */ 17 | var helpers = { 18 | brightness: function(rgbArr) { 19 | var br = ((299*rgbArr[0]) + (587*rgbArr[1]) + (114*rgbArr[2])) / 1000; 20 | return br; 21 | }, 22 | hexToRGB: function(hex) { 23 | return [this.hexToR(hex),this.hexToG(hex),this.hexToB(hex)]; 24 | }, 25 | hexToR: function (h) {return parseInt((this.cutHex(h)).substring(0,2),16)}, 26 | hexToG: function (h) {return parseInt((this.cutHex(h)).substring(2,4),16)}, 27 | hexToB: function(h) {return parseInt((this.cutHex(h)).substring(4,6),16)}, 28 | cutHex: function (h) {return (h.charAt(0)=="#") ? h.substring(1,7):h} 29 | }; 30 | 31 | /* read theme json to create theme.scss */ 32 | gulp.task('themes', function(cb) { 33 | var data = require('./data/themes.json'); 34 | var output = "../src"; 35 | for (var t in data.themes) { 36 | var theme = data.themes[t]; 37 | var foldername = theme.name.toLowerCase().replace(" ","_"); 38 | var sassString = '/*! Tophat `'+ theme.name+'` Bootstrap '+bootstrapVersion+' theme */\n'; 39 | 40 | var colors = theme.colors; 41 | var variables = theme.vars; 42 | var custom = theme.custom; 43 | 44 | var fontHeadings = theme.fonts.headings; 45 | var fontBase = theme.fonts.base; 46 | var ignoreFonts = ["Roboto","Arial","Verdana"]; 47 | 48 | // custom fonts 49 | if (fontBase && fontBase.length>1 && ignoreFonts.indexOf(fontBase)<0) { 50 | sassString += '@import url(https://fonts.googleapis.com/css?family='+fontBase.split(" ").join("+")+':200,300,400,700);\n'; 51 | sassString += '$font-family-base:'+fontBase+';\n'; 52 | } 53 | if (fontHeadings && fontHeadings.length>1 && ignoreFonts.indexOf(fontHeadings)<0) { 54 | sassString += '@import url(https://fonts.googleapis.com/css?family='+fontHeadings.split(" ").join("+")+':200,300,400,700);\n'; 55 | sassString += '$headings-font-family:'+fontHeadings+';\n'; 56 | } 57 | 58 | // styles only so turn off grid generation 59 | sassString += '\n$enable-grid-classes:false;'; 60 | 61 | for (var c in colors) { 62 | sassString += '\n$'+c+':'+colors[c]+';'; 63 | } 64 | 65 | var colorsys = "\n\n/*! Import Bootstrap 4 variables */"; 66 | colorsys += '\n@import "functions";'; 67 | colorsys += '\n@import "variables";'; 68 | colorsys += '\n'; 69 | 70 | //console.log("applying variables..."); 71 | var varString = ""; 72 | for (var v in variables) { 73 | varString += '\n$'+v+':'+variables[v]+';'; 74 | } 75 | 76 | if (varString.length>1){ 77 | sassString += colorsys; 78 | sassString += varString; 79 | } 80 | 81 | sassString += '\n@import "bootstrap";'; 82 | sassString += '\n\n// Add SASS theme customizations here..'; 83 | 84 | if (custom) { 85 | sassString += '\n' + custom; 86 | } 87 | 88 | console.log(sassString); 89 | 90 | if (!fs.existsSync(output+"/"+foldername)) { 91 | fs.mkdirSync(output+"/"+foldername); 92 | } 93 | 94 | fs.writeFileSync(output+"/"+foldername+"/theme.scss",sassString); 95 | } 96 | 97 | cb(); 98 | }); 99 | 100 | 101 | /* compile sass to create css files */ 102 | gulp.task('sass', ['themes'], function() { 103 | var themes = fs.readdirSync('../src/').filter(f => fs.statSync("../src/"+f).isDirectory()); 104 | console.log('Found folder...'); 105 | var tasks = []; 106 | for (var t in themes) { 107 | var theme = themes[t]; 108 | console.log('Theme:' + theme); 109 | tasks.push( 110 | gulp.src('../src/'+theme+'/theme.scss') 111 | .pipe(sass({ 112 | includePaths: ['../../node_modules/bootstrap/scss/','../../node_modules/bootstrap/'] 113 | }).on('error', function(e){console.log("sass error:"+e)})) 114 | .pipe(concat('theme.css')) 115 | .pipe(gulp.dest(output+'/'+theme+'/')) 116 | ); 117 | } 118 | return mergeStream(tasks); 119 | }); 120 | 121 | /* compile ejs to create html files */ 122 | gulp.task('merge', ['sass'], function() { 123 | var data = require('./data/themes.json'); 124 | data.bootstrapVersion = bootstrapVersion; 125 | for (var t in data.themes) { 126 | var template = data.themes[t]; 127 | template.helpers = helpers; 128 | template.allThemes = data.themes; 129 | var foldername = template.name.toLowerCase().replace(" ","_"); 130 | gulp.src("./*.ejs") 131 | .pipe(ejs(template)) 132 | .pipe(rename({extname:".html"})) 133 | .pipe(gulp.dest(output+"/"+foldername+"/")); 134 | gulp.src("./*.css").pipe(gulp.dest(output+"/"+foldername+"/")); 135 | // minify 136 | gulp.src(output+"/"+foldername+"/theme.css").pipe(cleanCSS({compatibility:'ie9'})).pipe(rename({extname:".min.css"})).pipe(gulp.dest(output+"/"+foldername+"/")); 137 | // copy scss 138 | gulp.src('../src/'+foldername+'/theme.scss').pipe(gulp.dest(output+"/"+foldername+"/")); 139 | gulp.src("./scripts.js").pipe(gulp.dest(output+"/"+foldername+"/")); 140 | } 141 | 142 | /* project pages */ 143 | gulp.src("../src/*.ejs") 144 | .pipe(ejs(data)) 145 | .pipe(rename({extname:".html"})) 146 | .pipe(gulp.dest(output+"/")); 147 | }); 148 | 149 | gulp.task('default',['themes','sass','merge']); -------------------------------------------------------------------------------- /build/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%- name %> Bootstrap 4 Theme Full Screen 7 | 8 | 9 | 10 | 11 | .png"> 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | <% if (typeof images!="undefined") {%> 23 | 31 | <% } %> 32 | 33 |
34 |
35 |
36 |
37 |
38 |

<%- name %>

39 |

<%- desc %>

40 |
41 |
42 |
43 | 44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 | <% include ./partials/download %> 52 |
53 |
54 |
55 |
56 |
57 |
58 | <% include ./partials/nav %> 59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |

68 |

Unique

69 |

Don't like that typical Bootstrap look? Each theme has a custom look-and-feel, while maximizing use of Bootstrap without extensive additional CSS & JS.

70 | Button 71 |
72 |
73 |
74 |
75 |
76 |
77 |

78 |

Responsive

79 |

Based on mobile-first Bootstrap 4, all themes are 100% responsive and designed to look great on everything from smartphones to tablets to desktops..

80 | Button 81 |
82 |
83 |
84 |
85 |
86 |
87 |

88 |

Consistent

89 |

Themes are crafted with care for design and performance. All themes are built on modern HTML5 & CSS3 standards to ensure consistency and cross-browser support.

90 | Button 91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | <% include ./partials/components %> 99 |
100 | <% include ./partials/footer %> 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /build/partials/components.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 7 | 8 |
9 |
10 | 11 | 12 | 13 | Text 14 |
15 |
16 |
17 |

Code Explorer

18 |

19 | Just hover over any of the Bootstrap 20 | components, and click the 21 | <> 22 | to view or copy the HTML markup for that element. 23 |

24 |
25 |
26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 |
73 |
74 | 180 |
181 |
182 |
183 |

Get Themestr.app

184 |

Theme Builder for Bootstrap

185 |

186 | Rapidy build custom themes for Bootstrap, the world's most 187 | popular front-end component library for mobile-first, 188 | responsive Web apps. Themestr.app is a customizer and theme creator for Bootstrap. 189 | Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and 190 | easily generate CSS from SASS to give your projects a unique look-and-feel. 191 |

192 |
193 |
194 |
195 |
196 |
197 |
198 |

Card Outline

199 |

Themestr.app makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.

200 | Button 201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 | Dis List Group 209 | Custom Colors 210 | Google Fonts 211 | Ionicons 212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |

Scrollspy

220 |

The top NavBar utilizes Bootstrap's Scrollspy component. You'll notice when you scroll the page the "active" nav section is highlighted.

221 | Read More 222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 | 252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |

<%- fonts.headings %>

262 |
263 |
264 |
Heading 6
265 |
Heading 5
266 |

Heading 4

267 |

Heading 3

268 |

Heading 2

269 |

Heading 1

270 |

Lead

271 |

Paragraph

272 | badge 273 |
274 |
275 |

Display 4

276 |

Display 3

277 |

Display 2

278 |

Display 1

279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 | 288 |
289 | 290 |
291 | 292 |
293 | 294 |
295 |
296 |
297 | 298 |
299 | 300 |
301 |
302 |
303 | 304 |
305 | 306 |
307 |
308 | 315 |
316 |
317 |
318 | 319 |
320 | 321 |
322 | Username is required. 323 |
324 |
325 |
326 |
327 | 328 |
329 | 330 | 331 |
332 | 333 | 334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |

The rows & columns of the world famous Bootstrap grid speak for themselves.

343 |
344 |
345 | 6 346 |
347 |
348 |
6
349 |
350 |
351 | 5 352 |
353 |
354 |
7
355 |
356 |
357 | 4 358 |
359 |
360 |
8
361 |
362 |
363 | 3 364 |
365 |
366 |
9
367 |
368 |
369 | 2 370 |
371 |
372 |
10
373 |
374 |
375 | 1 376 |
377 |
378 |
11
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 |
LocationDateVisits
Westfield08.05.18 badge2323
Galway08.05.18 badge-pill5362
Bern08.05.18153
410 |
411 |
412 |
413 |
414 | Right tooltip (hover) 415 |
416 | Bottom tooltip (hover) 417 |
418 |
419 |
420 | 424 | 425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 | 439 |
440 |
441 |
442 |
-------------------------------------------------------------------------------- /build/partials/download.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 | Download Theme 4 | 5 | 8 |
9 | theme.css 10 | theme.min.css 11 |
12 | theme.scss 13 |
14 | ">Full template 15 |
16 |
-------------------------------------------------------------------------------- /build/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /build/partials/nav.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /build/scripts.js: -------------------------------------------------------------------------------- 1 | 2 | /* simple scripts file for Themes.guide Bootstrap 4 theme templates */ 3 | 4 | // init Bootstrap tooltips & popovers 5 | $("[data-toggle=popover]").popover(); 6 | $("[data-toggle=tooltip]").tooltip(); 7 | 8 | 9 | /* copy demo sources to clipboard */ 10 | function copyTextToClipboard(text) { 11 | var textArea = document.createElement("textarea"); 12 | textArea.style.position = 'fixed'; 13 | textArea.style.top = 0; 14 | textArea.style.left = 0; 15 | textArea.style.width = '2em'; 16 | textArea.style.height = '2em'; 17 | textArea.style.padding = 0; 18 | textArea.style.border = 'none'; 19 | textArea.style.outline = 'none'; 20 | textArea.style.boxShadow = 'none'; 21 | textArea.style.background = 'transparent'; 22 | textArea.value = text; 23 | document.body.appendChild(textArea); 24 | textArea.select(); 25 | 26 | try { 27 | var successful = document.execCommand('copy'); 28 | var msg = successful ? 'successful' : 'unsuccessful'; 29 | console.log('Copying text command was ' + msg); 30 | } catch (err) { 31 | console.log('Oops, unable to copy'); 32 | } 33 | 34 | document.body.removeChild(textArea); 35 | return false; 36 | } 37 | 38 | var modalCode = $('