The following selection is a partial listing of some additional web–based projects using Bootstrap V4 that demonstrates the latest in mobile-first designs. I've developed these prototypes to showcase my ability to use the most popular framework for building responsive, mobile-first projects on the web. However, I designed and coded this site from scratch in an effort to remain self–reliant and not dependent on frameworks.
Custom Product Template
This example serves as my personal sandbox and was developed with v4.0.0 in an effort to build an actual functional prototype using the latest enhancements. In addition, I've been experimenting with Material Design to really focus on the visual design and the importance of whitespace, shadows, typography, colors and layout grids.
- Sass - 3.5.1
- bootstrap.min.css – v4.0.0-beta.3
- mdb.min.css – 4.4.3
- jquery.min.js – 3.2.1
- popper.js - 1.12.9
- bootstrap.min.js – v4.0.0-beta.3
- mdb.min.js – 4.4.1
Newbie Web Services
This example is a single-page web presentation designed and developed in the Bootstrap 4.1.0 to again demonstrate the framework's latest release.
Music Download Website
This example is a simple six-page web presentation designed and developed in the Bootstrap 4.1.3 to again demonstrate the framework's latest release.
- Custom UI Flat Design
- Fixed Background Image
- Use of new card components
- Well-formed and Semantically Correct Markup
- Created SCSS overrides mapped to a custom CSS file to override the default settings
- Created a modular SCSS directory structure to manage the various partial SCSS files
- Valid CSS
- Valid HTML5
This example is a dashboard designed for my hockey team and developed in the Bootstrap 4 Beta 2 version to again demonstrate the framework's latest release.
This example is a scaled-down version of my current site and developed in Bootstrap to demonstrate how this particular framework can be leveraged to build a responsive interface.
News and Magazine Website
This example is a prototype developed from a popular template. I downloaded the project files, cleaned-up much of the markup and updated the interface in an effort to apply my own unique style.
- Completely updated the content, images and color-scheme
- Updated the bootstrap.min.css file to current version
- Updated the custom CSS file to include additional rulesets, and where applicable, used the “Atomic CSS” approach to create separate classes for each reusable property
- Used Bootlint to indentify and correct errors with the markup
- Used CSS Lint to indentify and correct errors in the stylesheet
- Used DirtyMarkup to restructure the custom CSS stylesheet
- Source: Grafreez
The following example links to my custom template that helps to facilitate the build process. Also, the screen shot shows both the setup of my main.scss file and overall directory structure.