Lambert M. - Bootstrap Site Blueprints Volume II [2015, PDF/EPUB/MOBI, ENG] + Code

Chapter 1: Advanced Bootstrap Development Tools 1 Theming is hard!@ 2 Harp.js – the static web server with built-in preprocessing 2 Creating a development environment 3 Installing Node.js 3 Installing Harp.js 3 Setting up a boilerplate project 4 Setting up the CSS 6 Setting up the fonts 7 Setting up the JavaScript 7 Setting up the partials 7 Setting up _harp.json 8 Configuring _data.json 8 Setting up the layout 9 Inserting the variables 10 Setting up the header 11 Setting up the footer 12 Compiling for the first time 13 Running the local server 13 Configuring Less 14 Defining your Less variables 15 Colors 15 Backgrounds 16 Text 16 Links 16 Borders 17 Typography 17 Layout 18 Mixins 18 Border radius 18 Animations and transitions 19 Setting up your theme 19 SMACSS overview 20 Base rules 20 Layout rules 20 Module rules 20 State rules 20 Theme rules 20 Setting up the base 21 Setting up the layout 22 Setting up the modules 22 Setting up the states 24 Setting up the theme 24 Finishing up theme.less 25 Summary 26 Chapter 2: Building a Restaurant Website 27 Building our development environment 28 Adding more pages 28 Expanding the layout 28 Adding Google Web Fonts 29 Updating the Less variables 30 Backgrounds 31 Links 31 Updating the header 31 Setting up the page title 33 Setting up the navigation 34 Setting up the reservations modal 35 Setting up the footer 37 The footer layout 37 Home page 40 Adding the primary header image 41 Adding the about text to the home page 42 Setting up the food tiles 43 Adding the review carousel 44 The About page 51 Changing the feature image 52 Setting up the large subtitle 52 Adding the social media icons 53 Adding the address 53 Reviewing the layout 54 Inserting the About text 54 Don't forget the modal 55 Recompiling your project 57 The Menu page 59 Customizing the .page-header class 60 Setting up the layout 60 Adding the featured modal 62 Multiple modals 65 The Contact page 68 Inserting the Google Map 70 Inserting the Google Map code 70 Setting up the body of the page 71 The reservation modal 72 Summary 73 Chapter 3: Mobile First Bootstrap 75 Setting up the template 78 Adding a new web font 78 Adding the JavaScript to _layout.ejs 78 Updating the Less variables 80 Updating the text colors 80 Setting up the header 83 Navbar 84 Modal triggers 85 Search bar 88 Search bar jQuery 90 Filters 90 Setting up the footer 94 Single page apps 95 Setting up the index page 96 Feed 96 Adding the feed header 98 Filling in the posts section 99 Adding pagination to the feed 101 Adding the feed count and the next button 102 Sidebar 103 About modal 104 The Contact modal 107 Login modal 110 Summary 117 Chapter 4: Bootstrap Wiki 119 Customizing the template 121 Updating _layout.ejs 121 Adding a new partial 122 Setting up the Less variables 123 Adding new colors 123 Background colors 124 Text colors 124 Link and border colors 124 Typography 125 Rounder corners 125 Updating the header and footer 127 Coding the header 127 Coding the header nav 129 Coding the header search bar 130 Adding custom button styles 130 Adding custom well styles 131 Finishing off the header search 132 Adding the navigation modal 134 Adding the footer 136 Coding the homepage 139 Setting up the page title section 139 Setting up the type styles 140 Coding the page body 141 Coding the sidebar 142 Coding the home page feed 143 The article page template 149 Coding the article page body 150 Adding the body content 151 The search results page template 154 Updating the page title 155 Updating the post-meta class 155 Adding search posts 155 Coding the search sidebar 156 The Profile template 160 Adding an avatar 161 Mobile-specific styling 165 Summary 167 Chapter 5: Bootstrap News Magazine 169 Customizing the template 171 Updating _layout.ejs 171 Setting up the Less variables 173 Background colors 173 Text colors 173 Link colors 173 Borders 174 Typography 174 Border radius 174 Coding the header and footer 177 Updating the header 177 Inserting the logo 177 Adding the filters 178 Adding the search field 179 Adding the form Less component 180 Updating the footer 181 Coding the top of the footer 181 Adding the first two columns 182 Adding the newsletter form 183 Updating the button styles 184 Coding the advertisement section 184 Updating the well styles 185 Coding the bottom of the footer 186 Coding the home page 188 Creating a post grid with flexbox 189 Adding the pagination section 191 Coding the article template 194 Adding the article title 195 Adding the article metadata 196 Adding the article content 196 Adding the comment section 197 Creating the custom article layout 197 Adding the trigger button 198 Adding the Disqus content component 198 Summary 201 Chapter 6: Bootstrap Dashboard 203 Customizing the template 205 Updating _layout.ejs 205 Setting up the Less variables 207 Background colors 207 Text colors 207 Link colors 207 Borders 208 Typography 208 Coding the header and footer 210 Updating the header 210 Customizing the navbar component 212 Updating the footer 214 Coding the dashboard 215 Setting up the layout 215 Creating the sidebar 216 Customizing the nav pills component 217 Creating the content section 218 Customizing the typography 219 Writing the pie chart HTML 220 Writing the pie chart JavaScript 221 Creating a Less component for the charts 224 Setting up the widgets section 225 Writing the widgets HTML 225 Reviewing the success panel 227 Reviewing the danger panel 229 Writing the panels HTML 230 Customizing the table component 231 Adding the button 232 Customizing the button component 233 Inserting a line chart 233 Adding the HTML for the line chart 234 Updating the chart JavaScript 235 Updating the chart CSS 236 Mobile considerations 243 Summary 243 Chapter 7: Bootstrap Social Network 245 Customizing the template 247 Updating _layout.ejs 247 Setting up the Less variables 249 Background colors 249 Text colors 249 Link colors 249 Border colors 249 Typography 250 Border radius 250 Coding the header and footer 252 Updating the header 252 Inserting the brand 253 Creating the navbar Less file 253 Setting up the icon navigation 254 Adding the search bar 255 Adding the utility drop-down menu 256 Adding some mobile-specific styles 256 Updating the footer 257 Coding the profile page 258 Setting up the left sidebar 259 Adding the avatar 259 Adding the name and description 260 Adding the content column 261 Customizing the well component 263 Adding the third column 264 Completing the template 266 Coding the activity feed 269 Customizing the first column 271 Adding button styles 272 Adding the post form 272 Adding the new post notification bar 274 Styling the alert bar 274 Coding the notifications section 279 Updating the center column 281 Adding an alert bar 282 Adding a notification entry 282 Coding the private messages section 285 Adding a conversation 287 Coding the friends section 292 Adding a friend entry 293 Summary 297 Index 299