Bootstrap site blueprints. Volume II 9781785281099, 9781785284915, 1785284916

Cover -- Copyright -- Credits -- About the Author -- About the Reviewer -- www.PacktPub.com -- Table of Contents -- Pref

434 100 4MB

English Year 2016

Report DMCA / Copyright

DOWNLOAD FILE

Bootstrap site blueprints. Volume II
9781785281099, 9781785284915, 1785284916

Author / Uploaded
Lambert
Matt

Table of contents :
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.