FlexBox is a flexible box layout model for the web. This model gives you a way to automatically rearrange responsive elements. They can adjust in size either increasing or decreasing depending on the device size. FlexBox can be a great addition to your CSS toolbox. It helps you to write adjustable and adaptive CSS.
If you need to fix a problem right away, you can use Solved By Flexbox to find a solution to common problems.
3 different ways to use it in your projects
1. Centering items on a page
Without FlexBox, it can be challenging to center items like text or images on a page. Sometimes, you have to resort to hacks to get it to look the way you want. FlexBox makes it so much easier. Use these tips to center items either horizontally or vertically.
You want to create a photo gallery that is responsive. Use this photo gallery to make one that looks like Flickr or Google Photos.
A print stylesheet allows you to print a webpage. Testing a print stylesheet can be challenging. You create print styles to manage how the page prints, but it still doesn’t look right. What do you do when you need to fix or find a problem that occurs when the page is printed?
You have two options use the Print Preview or the browser’s developer tools.
Print Preview lets you see how your web page looks on the printed page. You can see which elements to hide like navigation bars, footers or certain images. It also helps you to identify simple problems. Problems like large text, too much space between elements and extra styling that may use too much ink.
Print Styles in the browser
What do you do when you can’t find the source of a problem? Use your browser. Chrome, FireFox and Safari allow you to display print styles directly in your browser. This option is great for seeing how your design looks without print the page out. You can use the inspector to diagnose issues with your CSS. It can help you identify design issues that need a print style either created or modified.
For example, I had an app that printed a receipt. It printed on two pages instead of one. First, I used the Print Preview to find out what elements to hide when printed. After that, I saw that it was still printing on two pages. I couldn’t see what was causing the issue.
I changed the Developer Tools to show the print CSS. When I used this option to view the receipt with the print styles, I found the source of the problem. The problem was in the footer. I started to look at the styles for it. The footer had a height of 10.75 ems. I experimented by turning off the height. It changed from printing on one page instead of two. To fix this issue, I added a new print style for the footer and made the height auto. When I looked in print preview, it printed an one page.
We all manage projects. Whether we are working on a team or independently, we have our part that needs to get done. Chris Ford, Project Manager at Reaktiv Studios shared her practical project management tips at WordCamp US in November 2019.
1. Projects are about people
Projects are about working and collaborating with people to achieve a goal or build something. It’s not about the technology. People are trying to do the best they can with the tools they have.
2. Work with people you like.
People don’t like to work with jerks. You don’t always get to choose who you work with. When you do, choose to work with people you like. Projects work out better when you work with people you like.
3. There is no such thing as a perfect project.
Something always happens. The client adds new features. Team members quit. Delays and other problems occur. When that happens, be flexible. Stay calm and do the best you can.
4. Measure what matters to you.
You can’t measure what matters to you if you don’t track it. Do you know how much time you spend on a task? Are you using a project management tool to keep track of team’s progress? There are plenty of tools like Harvest to help you collect and analyze your progress.
5. You will be wrong. It will suck.
You’ll make mistakes. Everyone does. Chris likes to say “The wrong mistake is the one you make more than twice.” Accept this and be ok with it.
6. Bad news doesn’t age well.
When you’re wrong, don’t hide it. It is better to tell people bad news right away than delay it.
7. Celebrate the small victories.
When you have a success no matter how small, celebrate it with your team.
8. Create a culture of helping.
Be helpful. Share knowledge and encourage helping others.
9. Take care of yourself.
Remember to take care of your team and especially yourself. Schedule time for breaks and whatever else your or your team needs.
The challenge I chose was the pricing component with toggle. It has three options: Basic, Professional and Master. You have to use a toggle switch to show the prices for Annually or Monthly.
How I Built It
What I Learned
The style guide defined colors in HSL and included a linear gradient. The linear-gradient is a CSS function that allows you to create a transition between two or more colors along a straight line. You can choose the direction or angle of the transition. For two of the buttons and toggle, the gradient moves from left to right. The professional plan card moves from top to bottom.
I used two structural pseudo-classes in CSS to create the design. The :first-of-type and :last-of-type selectors allow you to target the first and last occurrence of an element in a container.
Bootstrap has a toggle switch available. It was not customizable with CSS. You have to compile custom Bootstrap in order to change how it looks. I found CSS toggle solution that works like the design. I modified it to work with my CSS.
Frontend Mentor asks developers to post their solutions to their site. If you get stuck on a project, you can look at their solution to see how they approached it.
A notification bar is a horizontal bar that appears at the top or bottom of your website. You can display emergency messages or announcements to your visitors. Messages about closings, updates, news or sales offers.
How can you add a notification bar to your website?
It depends on how you want to do it. If you like to write code, you can make it yourself with HTML and CSS. If not, you can add a plugin or a third-party tool to your website.
1. Make your own
Are you using Bootstrap? Bootstrap has alerts. You can create your own bar with Bootstrap alerts. If you are using a different CSS framework, you can write your own.
You can choose to use a third-party tool like Getsitecontrol. They offer different ways of creating announcement bars for your website. You can add a sticky announcement bar or a slide-in banner that appears from the side.