This is a solution to the Single price grid component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See a hover state on desktop for the Sign Up call-to-action
See more designs here.
- Solution URL: frontendmentor.io - single-price-grid-component
- Live Site URL: https://leo-jp.github.io/single-price-grid-component/
- Semantic HTML5 markup
- CSS & SCSS custom properties
- Flexbox
- CSS Grid
- Mobile-first design workflow
- Bootstrap
<head>
<link rel="stylesheet" href="<path>/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="<path>/bootstrap/dist/css/bootstrap-grid.min.css"/>
</head><body>
<script source="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script source="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body> - Bootstrap v.5 sticky footer
- Key Points for a better display of footer
- Using flex and flex-shrink
- Using
footer&containerclass d-flex flex-column: set to vertical direction.flex-shrink-0: element will not shrink
<!--This type of HTML structure does not let footer overlap the main contents-->
<!doctype html>
<html lang="en" class="h-100">
<head>...</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
...
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
...
</footer>
</body>
</html> <div class="w-100"></div><div class="container-fluid container-component">...</div>- npm install sass or yarn add sass
- add the script in package.json to compile & run sass
- To compile and run:
npm run scssoryarn run scss
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "sass --watch <scss>:<css>"
},node-sass: Refers to the node-sass package.--watch: An optional flag which means “watch all .scss files in the scss/ folder and recompile them every time there’s a change.”styles/scss: The folder name where we put all our .scss files.-o styles/css: The output folder for our compiled CSS.
The Bootstrap grid system has four classes:
- xs (for phones - screens less than 768px wide)
- sm (for tablets - screens equal to or greater than 768px wide)
- md (for small laptops - screens equal to or greater than 992px wide)
- lg (for laptops and desktops - screens equal to or greater than 1200px wide)
Rule of thumb: to apply the style based on device's width/height, use the same structure as is!
div.main {
&.sub {
// default style
}
}
@media <option> <condition> and ( <width/height> ) {
div.main {
&.sub {
// new style
}
}
}-
How to Create a Free Website Using GitHub Pages
- Github Pages deployment with NoJekyll. This sample repository shows how to ignore Jekyll excluding node_modules and including specific modules (e.g. bootstrap) as well.
- Do mobile-first design development
- Add data connection, routers, and state management using ReactJS, VueJS, etc.
- Enable database connection and associate it with Javascripts.
- Follow Web security best practices
-
Visual Studio Live Server by Ritwick Dey - easy compile & run to display changes realtime.
-
Chrome Extension Go Full Page - A free screenshot application.
-
W3 Bootstrap grid system - This helped me understand the scope of media when using grid system.
-
Sass Documentation - Helped me to familiarize with Sass/Scss basics to advance scripting.
-
CSS Sticky Footer - A life-saver during the course of development! Before, the footer overlaps the main contents but using the same structure of Bootstrap's sticky footer, it works like magic!
- Frontend Mentor - @die-lowenkonigin