Take Command of CSS Flexbox

As a kid I loved playing with toy plastic army men. I would line them up and pretend to be in command giving orders to my soldiers in order to defeat the enemy. Since I was in full command, the soldiers would look to me for their orders. Sometimes a hot shot recruit would overstep… Read more »

Continue Reading

Category: Tutorials

How can I find a full Bootstrap class reference with descriptions?

I recently put together a desk reference of all of the Bootstrap CSS classes. It also includes sample code snippets of frequently used components. The download page also has a sortable table to help find classes by component. Bootstrap 3 Full Classes Reference Cheat Sheet Bootstrap 4 Full Classes Reference Cheat Sheet

Continue Reading

Category: Common Questions

Which framework is better, W3.CSS or Bootstrap?

Both of these are essentially style guides. A way of doing things. I recommend Bootstrap because of the following points. The large number of websites currently using it The large number of contributors and bug testers on the open source project Being more marketable for jobs because more teams use it and you don’t have… Read more »

Continue Reading

Category: Common Questions

Can I adjust text size with Bootstrap in a responsive design?

Since Bootstrap is a “Mobile First” CSS framework you need to write your styles mobile up. So, your smallest bold font size will be written outside of a media query and then you will make adjustments as the viewport gets larger. There isn’t a class already setup in Bootstrap for this so you have to… Read more »

Continue Reading

Category: Common Questions

How to Detect and Run JavaScript When Bootstrap Media Query Breakpoints Change

Update: I created a small jQuery plugin that adds media query detection for Bootstrap 3 and 4 projects. You can learn more about IfBreakpoint.js here. Have you ever wanted to trigger some javascript at a certain media query value? Relying on document.width() has problems because it includes browser scrollbars. A simpler and more accurate solution… Read more »

Continue Reading

Category: Tutorials

How to Reorder Columns with Bootstrap 4 Order Classes

With Bootstrap 4 column ordering it is best to start out understanding how the natural or default column ordering works. When your browser reads your HTML code it reads from the top and works its way down reading left to right. So in a two column grid, the first column will be the first one… Read more »

Continue Reading

Category: Tutorials

How to Create a Full Width Bootstrap 4 Responsive Carousel

Do you want your Bootstrap carousel to extend the full width of the browser window? Do your images look cut off or have unwanted padding on the left and right? In this tutorial we will take a closer look at the Bootstrap 4 carousel and determine the best approach in making it full width and… Read more »

Continue Reading

Category: Tutorials

What Are the Pros and Cons of Using Bootstrap in Web Development?

Is a CSS Framework Like Bootstrap Even Necessary? If you are new to CSS frameworks, you are probably wondering what the benefits are of using Bootstrap in your project. Prior to using Bootstrap, I used a boilerplate I wrote myself that consisted of a reset, basic grid, typography, utilities, and media queries. Below are the benefits I… Read more »

Continue Reading

Category: Articles

5 Important Things to Keep in Mind When Making a Responsive Web Design?

1. Write your CSS mobile first Write as though you are only targeting a mobile device. 2. Work in gradual stages Once the mobile device looks good add styles in media queries for larger viewports in stages working your way to larger sizes. 3. Keep your media queries grouped by component and not in a… Read more »

Continue Reading

Category: Articles

Why Is Responsive Web Design Good?

I believe responsive web design is good because it solves the mobile friendly website challenge in the least amount of time/cost. Pros One stylesheet for all devices Can be setup by one designer/developer Easy to maintain and update Less expensive – Does not require server side device detection or complicated mobile app programming Does not… Read more »

Continue Reading

Category: Common Questions

When Will Bootstrap 4 Be Released?

I recommend keeping track of the project milestones to gauge the progress. Track Bootstrap Milestones As of 5/24/2017 the Beta is 92% complete. You can drill down to see what is still needed to be completed in the ship list. You could even help out if you are able. Patience is the secret to good… Read more »

Continue Reading

Category: Common Questions

What Is the Best Way for a Beginner to Learn Responsive Design and Bootstrap 4?

Compare Learning Responsive Web Design to Learning How to Paint a Picture If you were an absolute beginner, how would you feel if your first painting ever looked like the one below? You would probably feel really proud and want to share it with someone. The person you share it with would say… Wow! You painted… Read more »

Continue Reading

Category: Articles

Design Trends, the Power of Influence, and Appropriate Design

Design Trends Think about all of the things you look at everyday: websites, movies, billboards, menus, youtube videos… Your eyes and brain are constantly absorbing information. All of this visual content is influencing your frame of reference. Some streams of images are more powerful and persistent than others. Take for example your computer, you could… Read more »

Continue Reading

Category: Articles

Going from Print Design to Web Design – My Learning Story

Early in my career I worked as a graphic designer for an advertising agency. I mostly designed brochures and sales flyers but on one project we discussed building a website to get leads. After I had the design ready we met with the development team to discuss the project. Half way through the meeting I… Read more »

Continue Reading

Category: Articles

The Four Stages of Learning

Education is the kindling of a flame, not the filling of a vessel.” – Socrates The four stages of learning Earlier this month I received an email from Henry who shared his experience learning Java and web programming. It was so inspiring I decided to interview him to learn more about his motivation and learning path…. Read more »

Continue Reading

Category: Articles

How Setting Goals and Losing Sleep Can Help You Learn Programming

In this post I will be interviewing Henry Grammy who who has learned the basics of HTML, CSS, C++, C#, and PHP in just 4-5 months. His story is motivational because it shows what can be accomplished when you set goals and challenge yourself to achieve them. If you are just starting out as a… Read more »

Continue Reading

Category: Articles

Style Guides are Important but Often Ignored

“We began to refer to this living document as “a toolkit built in style guide form.” This achieved our goal to communicate our work…” – Mark Otto, creator of Bootstrap Framework   Style Guides are Important but Often Ignored Recently at work, one of our websites was redesigned to be mobile responsive. It was developed by… Read more »

Continue Reading

Category: Articles

Sparky Bootstrap 3 Sass Starter Project and Tutorial

It was a challenge for me to understand Grunt, Sass, and GitHub. So I decided to share a starter project I use for each Bootstrap 3 Sass project as well as a video tutorial series to help you learn the workflow.. Sparky: A Bootstrap 3 Sass starter project I created a starter project that provides… Read more »

Continue Reading

Category: Articles

Starting Front-end Development with Bootstrap Sass

“It’s through mistakes that you actually can grow. You have to get bad in order to get good.” – Paula Scher, designer Good Reads Ways to Make Bootstrap Columns the Same Height JavaScipt for Web Designers: DOM Scripting [tool] I just heard about Adobe XD which looks like a great way to build prototypes other than… Read more »

Continue Reading

Category: Articles

Bootstrap 3 PSD Grid Template – Photoshop Download

Do you design websites in Adobe Photoshop or in the browser? Personally, I recommend designing websites in Photoshop because it removes the design imposed by default styling of browser CSS and frameworks like Bootstrap. This will help websites look less like Bootstrap and more customized. The templates I created contain the minimum information you need… Read more »

Continue Reading

Category: Articles