Getting Started With CSS Framework
Contents
Custom properties and variables
CSS Frameworks
Bootstrap
TailwindCSS
References and Resources
CSS Custom Properties and Variables
CSS custom properties (aka CSS variables or cascading variables) allow you to store and reuse values throughout your stylesheet.They act as placeholders for values that can be easily changed in one place, affecting all styles that use them.
Benefits:
- Maintainability: Reduce code duplication and make your styles more organized and easier to update.
- Themeability: Easily switch between different themes by changing only the values of custom properties.
- Dynamic styles: Create dynamic styles that react to user interaction or browser features using JavaScript.
How to use them:
-
Declare the custom property:
- Using two dashes as a prefix (
--variable-name: value;) - Using the
@propertyat-rule (@property --variable-name { syntax: <value-type>; initial-value: value; })
- Using two dashes as a prefix (
Use the
var()function to access the value (background-color: var(--primary-color);)
Key points:
- Custom properties are scoped to the element(s) they are declared on and participate in the cascade.
- They can be used to store all types of CSS values, including colors, lengths, fonts, and even complex calculations.
- Values can be overridden by declarations with higher specificity.
- JavaScript can be used to access and modify custom properties dynamically.
Use Case: Theme Switching with CSS Custom Properties
Imagine you're building a website with two distinct themes: light and dark. You want to make it easy for users to switch between these themes on the fly.
Without Custom Properties:
You would need to duplicate your entire stylesheet, replacing all the color values for each theme. This would lead to a lot of code duplication and make it difficult to maintain.
With Custom Properties:
- Define custom properties for your primary colors:
- Use these custom properties throughout your stylesheet:
- Create buttons or a toggle to switch the values of the custom properties:
By changing the values of just these four custom properties, you can instantly switch the entire theme of your website. This demonstrates the power and flexibility of CSS custom properties.
CSS Frameworks
CSS frameworks are pre-built collections of CSS styles that provide a solid foundation for web development. They offer pre-defined styles for common elements like buttons, forms, and grids, saving you time and effort.
Benefits:
- Faster development: Jumpstart your project with ready-made styles and components.
- Consistency: Ensure consistent design across your website.
- Responsiveness: Many frameworks provide responsive design features, making your website look good on all devices.
- Community and resources: Access a large community of developers and extensive documentation for support.
Popular Frameworks:
- Bootstrap: Widely used, mobile-first framework with a vast library of components.
- Tailwind CSS: Utility-first framework for building custom designs with low-level classes.
- Material Design: Google's framework based on their design principles, offering a clean and modern aesthetic.
- Foundation: Flexible framework with a focus on accessibility and modularity.
- Bulma: Lightweight and minimalist framework with a focus on simplicity.
Choosing a Framework:
Consider your project needs, desired level of customization, and team experience when choosing a framework.
Key Points:
- Frameworks can simplify development but may add complexity and bloat to your code.
- Learn the framework's core principles to leverage its full potential.
- Customize the framework to suit your specific needs and brand identity.
Bootstrap
Quickstart
Skip the setup, jumpstart your web project with Bootstrap's CDN!
- Create a new index.html file in your project directory and create the basic boilerplate.
-
Include Bootstrap's
.min.cssin your<head>for styling and Add Bootstrap's.bundle.min.jsbefore closing<body>for interactivity (includes Popper for dropdowns etc.).
Project 1: Arsenal Vibes
jrshittu
/
Arsenal-Vibes
Building a football news site with Bootstrap
Arsenal Vibes
A bootstrap tutorial, source for the latest Arsenal news, transfers, videos, opinions, and more! a part of All you need to master Web development with HTML, CSS & Javascript Series.
Features
- Stay up-to-date with all the latest Arsenal news and updates
- Explore in-depth articles, videos, and opinions
- Enjoy a visually appealing and user-friendly interface
- Get involved in discussions with other Arsenal fans
Technologies Used
- HTML
- CSS
- Bootstrap
- WebP and AVIF image formats
Structure
- Header: Navigation, search, and subscription options
-
Main Content:
- Featured post
- Two additional posts
- "More in News" section
-
Sidebar:
- About section
- Recent posts
Contributing
We welcome contributions from the Arsenal community! Please feel free to submit pull requests or create issues to suggest improvements.
License
MIT License: https://opensource.org/licenses/MIT
Contact
JR Shittu - jrshittu@gmail.com
Additional Notes
- Consider adding a footer for copyright information, contact details, and links.
- Integrate social media buttons to encourage sharing and engagement.
- Implement…
Check the finished project here👇
TailwindCSS
Quickstart
Skip the setup, jumpstart your web project with tailwindcss's CDN!
- Create a new index.html file in your project directory and create the basic boilerplate, then add the cdn link in the head section.
Project 2: Arsenal Vibes with TailwindCSS
Arsenal-Vibes-TailwindCSS
Source for the latest Arsenal news, transfers, videos, opinions, and more! a part of All you need to master Web development with HTML, CSS & Javascript Series.
Features
- Stay up-to-date with all the latest Arsenal news and updates
- Explore in-depth articles, videos, and opinions
- Enjoy a visually appealing and user-friendly interface
- Get involved in discussions with other Arsenal fans
Technologies Used
- HTML
- CSS
- TailwindCSS
- WebP and AVIF image formats
Structure
- Header: Navigation, search, and subscription options
-
Main Content:
- Featured post
- Two additional posts
- "More in News" section
-
Sidebar:
- About section
- Recent posts
Contributing
We welcome contributions from the Arsenal community! Please feel free to submit pull requests or create issues to suggest improvements.
License
MIT License: https://opensource.org/licenses/MIT
Contact
JR Shittu - jrshittu@gmail.com
Additional Notes
- Consider adding a footer for copyright information, contact details, and links.
- Integrate social media buttons to encourage sharing and engagement.
- Implement a search bar to…
Check the finished project here👇
- MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- W3Schools: https://www.w3schools.com/css/css3_variables.asp
- GitHub Pages Sample: https://ucsb-meds.github.io/customizing-websites-css/
- Comparison of CSS frameworks: https://css-tricks.com/considerations-for-making-a-css-framework/
- A Beginner's Guide to CSS Frameworks: https://www.freecodecamp.org/news/best-css-and-css3-tutorial/ ## Bootstrap References & Resources: Dive In and Build!
- Official Documentation: Your comprehensive guide to Bootstrap's classes, components, and utilities. https://getbootstrap.com/docs/5.2/getting-started/introduction/
- CDN Links: Grab pre-built production-ready CSS and JS with no setup needed. https://getbootstrap.com/docs/4.0/getting-started/download/
- Starter Templates: Jumpstart your project with pre-designed layouts and components. https://getbootstrap.com/docs/4.0/examples/starter-template/
- Bootstrap Tutorial: Step-by-step guide to building your first Bootstrap website. https://www.w3schools.com/bootstrap5/
- Interactive Playground: Experiment with Bootstrap components and explore their different options. https://www.codeply.com/
- Bootstrap Cheatsheet: Quick reference for key classes and utilities. https://devhints.io/css
- Bootstrap Forums: Ask questions, get help, and connect with other Bootstrap enthusiasts. https://stackoverflow.com/questions/66365247/getbootstrap-com-vs-bootstrapdocs-com-are-these-supposed-to-be-the-same-things
- Bootstrap Showcase: Get inspired by amazing websites built with Bootstrap. https://bootstrapbay.com/blog/built-with-bootstrap/
- Bootstrap Blog: Stay updated on the latest news, releases, and tutorials. https://blog.getbootstrap.com/
- TailwindCSS Website https://tailwindcss.com/docs/installation
- Documentation: https://tailwindcss.com/docs/installation - Comprehensive guide to installation, configuration, usage, and customization.
- Play CDN: https://play.tailwindcss.com/ - Interactive playground to experiment with Tailwind classes.
- GitHub Repository: https://github.com/tailwindlabs/tailwindcss
- Tailwind UI: https://tailwindui.com/ - Official Tailwind CSS components and templates.
- Tailwind Labs Blog: https://tailwindcss.com/blog
- YouTube Channel: https://m.youtube.com/watch?v=UBOj6rqRUME - Tutorials, tips, and discussions from official team and community.
- Tailwind Essentials: https://www.frontendreference.com/get-started-with-tailwindcss.html - Interactive course for beginners.
- Frontend Masters Workshop: https://frontendmasters.com/workshops/tailwindcss/ - Advanced-level workshop by Adam Wathan, co-creator of Tailwind.
- FreeCodeCamp Tutorial: https://www.freecodecamp.org/news/tag/tailwind/ - Comprehensive video tutorial.
- Tailwind Discord: https://github.com/willianjusten/discord-tailwind - Active community for discussions, Q&A, and sharing projects.
- Awesome Tailwind: https://github.com/aniftyco/awesome-tailwindcss - Curated list of Tailwind resources, tools, and plugins.
- Stack Overflow: https://stackoverflow.com/questions/tagged/tailwind-css - Search for solutions and ask questions.
- Tailwind UI Showcase: https://tailwindcss.com/showcase - See how others are using Tailwind to build beautiful websites.
- Design System with Tailwind: https://university.webflow.com/lesson/figma-to-webflow-plugin - Tool to convert Figma designs to Tailwind code.
- Tailwind Hero Icons: https://heroicons.dev/ - Free pack of SVG icons compatible with Tailwind.
- Tailwind Starter Kits: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation - Pre-built UIs and templates to accelerate development.
☕ Enjoyed this article? Support my work with a coffee: https://www.buymeacoffee.com/cqvuesleq
Also open for technical writing and frontend dev roles!
Top comments (2)
Follow back I have a question for you thanks 🤍
Kindly send me an email: misterjrshittu@gmail.com