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.
This example serves as my personal sandbox and was developed with v4.0.0-beta.3 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.
In addition, it further demonstrates how a company's website can be leveraged as it's primary lead generation tool with a focus on user experience and inbound digital marketing methodologies.
- Custom UI Flat Design
- Conversion Process:
- Landing Pages
- Thank You Pages
- Social Media Sharing
- Four Tier Pricing Options
- Well-formed and Semantically Correct Markup
- Well-structured Information Architecture (IA)
- Current Releases:
- 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
This example is a dashboard designed for my hockey team and developed in the Bootstrap 4 Beta 2 version to 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 examples are based on a set of online tutorials and the source files are stored in GitHub for review.