Bootstrap Site Blueprints Volume II
Maximize the potential of Bootstrap for faster and more responsive web applications
1. Auflage
Erschienen am 8. Juli 2025
328 Seiten
978-1-78528-491-5 (ISBN)
Beschreibung
No detailed description available for "Bootstrap Site Blueprints Volume II".
Alle Preise
Weitere Details
Weitere Ausgaben
Person
Lambert Matt :
Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Inhalt
- Cover
- Copyright
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Table of Contents
- Preface
- Chapter 1: Advanced Bootstrap Development Tools
- Theming is hard!@
- Harp.js - the static web server with built-in preprocessing
- Creating a development environment
- Installing Node.js
- Installing Harp.js
- Setting up a boilerplate project
- Setting up the CSS
- Setting up the fonts
- Setting up the JavaScript
- Setting up the partials
- Setting up _harp.json
- Configuring _data.json
- Setting up the layout
- Inserting the variables
- Setting up the header
- Setting up the footer
- Compiling for the first time
- Running the local server
- Configuring Less
- Defining your Less variables
- Colors
- Backgrounds
- Text
- Links
- Borders
- Typography
- Layout
- Mixins
- Border radius
- Animations and transitions
- Setting up your theme
- SMACSS overview
- Base rules
- Layout rules
- Module rules
- State rules
- Theme rules
- Setting up the base
- Setting up the layout
- Setting up the modules
- Setting up the states
- Setting up the theme
- Finishing up theme.less
- Summary
- Chapter 2: Building a Restaurant Website
- Building our development environment
- Adding more pages
- Expanding the layout
- Adding Google Web Fonts
- Updating the Less variables
- Backgrounds
- Links
- Updating the header
- Setting up the page title
- Setting up the navigation
- Setting up the reservations modal
- Setting up the footer
- The footer layout
- Home page
- Adding the primary header image
- Adding the about text to the home page
- Setting up the food tiles
- Adding the review carousel
- The About page
- Changing the feature image
- Setting up the large subtitle
- Adding the social media icons
- Adding the address
- Reviewing the layout
- Inserting the About text
- Don't forget the modal
- Recompiling your project
- The Menu page
- Customizing the .page-header class
- Setting up the layout
- Adding the featured modal
- Multiple modals
- The Contact page
- Inserting the Google Map
- Inserting the Google Map code
- Setting up the body of the page
- The reservation modal
- Summary
- Chapter 3: Mobile First Bootstrap
- Setting up the template
- Adding a new web font
- Adding the JavaScript to _layout.ejs
- Updating the Less variables
- Updating the text colors
- Setting up the header
- Navbar
- Modal triggers
- Search bar
- Search bar jQuery
- Filters
- Setting up the footer
- Single page apps
- Setting up the index page
- Feed
- Adding the feed header
- Filling in the posts section
- Adding pagination to the feed
- Adding the feed count and the next button
- Sidebar
- About modal
- The Contact modal
- Login modal
- Summary
- Chapter 4: Bootstrap Wiki
- Customizing the template
- Updating _layout.ejs
- Adding a new partial
- Setting up the Less variables
- Adding new colors
- Background colors
- Text colors
- Link and border colors
- Typography
- Rounder corners
- Updating the header and footer
- Coding the header
- Coding the header nav
- Coding the header search bar
- Adding custom button styles
- Adding custom well styles
- Finishing off the header search
- Adding the navigation modal
- Adding the footer
- Coding the homepage
- Setting up the page title section
- Setting up the type styles
- Coding the page body
- Coding the sidebar
- Coding the home page feed
- The article page template
- Coding the article page body
- Adding the body content
- The search results page template
- Updating the page title
- Updating the post-meta class
- Adding search posts
- Coding the search sidebar
- The Profile template
- Adding an avatar
- Mobile-specific styling
- Summary
- Chapter 5: Bootstrap News Magazine
- Customizing the template
- Updating _layout.ejs
- Setting up the Less variables
- Background colors
- Text colors
- Link colors
- Borders
- Typography
- Border radius
- Coding the header and footer
- Updating the header
- Inserting the logo
- Adding the filters
- Adding the search field
- Adding the form Less component
- Updating the footer
- Coding the top of the footer
- Adding the first two columns
- Adding the newsletter form
- Updating the button styles
- Coding the advertisement section
- Updating the well styles
- Coding the bottom of the footer
- Coding the home page
- Creating a post grid with flexbox
- Adding the pagination section
- Coding the article template
- Adding the article title
- Adding the article metadata
- Adding the article content
- Adding the comment section
- Creating the custom article layout
- Adding the trigger button
- Adding the Disqus content component
- Summary
- Chapter 6: Bootstrap Dashboard
- Customizing the template
- Updating _layout.ejs
- Setting up the Less variables
- Background colors
- Text colors
- Link colors
- Borders
- Typography
- Coding the header and footer
- Updating the header
- Customizing the navbar component
- Updating the footer
- Coding the dashboard
- Setting up the layout
- Creating the sidebar
- Customizing the nav pills component
- Creating the content section
- Customizing the typography
- Writing the pie chart HTML
- Writing the pie chart JavaScript
- Creating a Less component for the charts
- Setting up the widgets section
- Writing the widgets HTML
- Reviewing the success panel
- Reviewing the danger panel
- Writing the panels HTML
- Customizing the table component
- Adding the button
- Customizing the button component
- Inserting a line chart
- Adding the HTML for the line chart
- Updating the chart JavaScript
- Updating the chart CSS
- Mobile considerations
- Summary
- Chapter 7: Bootstrap Social Network
- Customizing the template
- Updating _layout.ejs
- Setting up the Less variables
- Background colors
- Text colors
- Link colors
- Border colors
- Typography
- Border radius
- Coding the header and footer
- Updating the header
- Inserting the brand
- Creating the navbar Less file
- Setting up the icon navigation
- Adding the search bar
- Adding the utility drop-down menu
- Adding some mobile-specific styles
- Updating the footer
- Coding the profile page
- Setting up the left sidebar
- Adding the avatar
- Adding the name and description
- Adding the content column
- Customizing the well component
- Adding the third column
- Completing the template
- Coding the activity feed
- Customizing the first column
- Adding button styles
- Adding the post form
- Adding the new post notification bar
- Styling the alert bar
- Coding the notifications section
- Updating the center column
- Adding an alert bar
- Adding a notification entry
- Coding the private messages section
- Adding a conversation
- Coding the friends section
- Adding a friend entry
- Summary
- Index
