[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1770836265067.jpg (172.39 KB, 1880x1253, img_1770836257300_87eo9on4.jpg)ImgOps Exif Google Yandex

dc659 No.1171[Reply]

sturobson's reli-css is the bomb! it helps you dig through old code and find those pesky bits that could use some modern love. i mean, who hasn't been there-using selectors from an era long gone? this tool’s genius lies in its ability to point out outdated stuff so we can update our stylesheets with newer techniques. have any of y'all tried it yet or do you have your own favorite tools for keeping css up-to-date?

Source: https://css-tricks.com/relicss/

File: 1770742741467.jpg (78.35 KB, 1280x720, img_1770742732245_1pmtd8jo.jpg)ImgOps Exif Google Yandex

c2fae No.1168[Reply]

so apple's been keeping things pretty closed off in xcode land-until now! they've cracked open the door for some serious innovation with native support of model context protocol (mcp) and compatible AI tools like cursor, claude code & beyond can finally play nice inside our beloved dev environment. i'm super excited to see how this will shake things up! what do y'all think about bringing in external ai agents? any cool ideas on what you'd love them for while coding

Source: https://dev.to/arshtechpro/xcode-263-use-ai-agents-from-cursor-claude-code-beyond-4dmi

File: 1770648024797.jpg (11.79 KB, 1080x720, img_1770648017596_q7i45ya8.jpg)ImgOps Exif Google Yandex

15577 No.1164[Reply]

Challenge yourself to create a responsive layout using only CSS grid and compare it with one made purely from flexbox. Try achieving different layouts like cards or masonry style grids both ways! Share your creations, discuss which method feels more natural for certain designs & what unique features each offers that the other doesn't. What are you waiting for? Let's see who can pull off some stunning grid and flexible layout magic in just CSS!

15577 No.1165

File: 1770649015519.jpg (59.83 KB, 1080x721, img_1770649000067_0f8sgyyf.jpg)ImgOps Exif Google Yandex

i'm still a bit confused about when it's best to use css grid over flexbox and vice versa. any tips? i've read some docs but they don't always make things clear in practice.


File: 1770605092912.jpg (146.17 KB, 1880x1253, img_1770605083325_wyj4v32j.jpg)ImgOps Exif Google Yandex

3ea94 No.1162[Reply]

did you know that using `srcset` and `sizes` attributes in your HTML combined with modern CSS techniques like aspect ratio boxes can drastically improve how images adapt to different screen sizes? '''Try setting up an image''' where the width is defined by its container's size, but also use [code]object-fit: cover[/code], so it always fills without distorting. This approach not only looks great on all devices; it’s super efficient too!

3ea94 No.1163

File: 1770605862474.jpg (101.34 KB, 1080x720, img_1770605847018_yjrckal6.jpg)ImgOps Exif Google Yandex

i totally remember when i was working on a project that needed to support both desktop and mobile views with retina displays. got stuck trying to make sure the images loaded properly without breaking everything until someone suggested using srcset in css along wit '''picture''' tag for better control over image selection based on device pixel ratio! saved my ass big time, seriously helped keep things simple yet responsive.


File: 1770459143675.jpg (679.75 KB, 1280x834, img_1770459135100_1a5h168l.jpg)ImgOps Exif Google Yandex

2c290 No.1160[Reply]

I've been trying to align my grid columns perfectly both vertically and horizontally using CSS, but I cant seem to get it right. Here is the snippet of code that has me puzzled: ```css display:grid; /* setting display as a Grid */ align-items: center; /* trying align items in vertical direction*/ justify-content: space-between; // Trying horizontal alignment with 'space between' method. columns: auto fit minmax(30%,1fr); // Defining grid columns here…? (Not sure if this helps) ``` Am I missing something obvious, or is there a better approach to aligning my content in the Grid layout consistently across different screen sizes and browsers without compromising responsiveness. Any suggestions would be greatly appreciated!

b095b No.1161

File: 1770570712805.jpg (130.06 KB, 1880x1253, img_1770570695572_cahiihru.jpg)ImgOps Exif Google Yandex

i think you might be running into issues with the column gaps or maybe have a different display property set that's causing misalignment? try checking out your grid-template-columns and see if there are any extra spaces in them! >check this resource on grids for some quick fixes [link]grid guide[/link]


File: 1769918394482.jpg (67.5 KB, 1080x720, img_1769918385107_uofpma3w.jpg)ImgOps Exif Google Yandex

98ce2 No.1134[Reply]

i've been working on a project recently and i cant seem to figure out how to create a sticky footer within my grid layout. no matter what combination of css properties (like `height`,`min- height`) or js scripts, it just wont stay put at the bottom when content exceeds its container size! any ideas on how i can solve this issue? here is an example snippet: '''sticky footer not working''' ```css.container { display: grid; gap: 1rem;} /*…*/.footer{ background-color: #f0e68c}/*… */ ```

98ce2 No.1135

File: 1769919655795.jpg (294.62 KB, 1880x1253, img_1769919639654_1t9a9wiu.jpg)ImgOps Exif Google Yandex

I've been in the same boat myself when it comes to sticky footers and grid layouts - they can be tricksy, ain't they? Don't lose heart tho; CSS Masters is here for just such challenges. Let me suggest a common method using display: flex on body with margin auto property set both on main content container as well as the wrapper containing it all (footer included). Give this approach a whirl and let us know how you get along! [code]body {display :flex; flex-direction: column;}.main,.wrapper{margin:auto} [/code]

98ce2 No.1159

File: 1770452755580.jpg (149.8 KB, 1880x1253, img_1770452738897_sf3vvga1.jpg)ImgOps Exif Google Yandex

Sticky footers in a grid layout can be quite the challenge sometimes I've definitely run into similar issues myself while working on projects here at css masters! Let me share an approach that might help yuo out - it involves using CSS Flexbox for more control over your page structure. Give this technique below, also known as "inverse flex", a try: ```css html { height: 100%; } /* sets the root element's min-height to be at least viewport size */ body > main, body footer{ margin: auto; position: relative;}/* positions both elements vertically centered and removes any extra margins from their direct children*/ footer { height: 150px } /* set a specific desired height for the sticky part of your layout. Adjust as needed! */ ```

edit: might be overthinking this tho


File: 1770415920107.jpg (86.31 KB, 1200x675, img_1770415909906_43cejzz5.jpg)ImgOps Exif Google Yandex

7c049 No.1158[Reply]

fellow developers and designers (or as I like to call 'em- devandesigners), have you heard about the latest addition in our beloved world of web development? It's called `@scope` - a game changer for maintainable CSS, especially with all these intricate interfaces we deal with on daily basis! Imagine being able to write clean and efficient code without worrying too much about naming conventions or heavy abstractions. Sounds like the dream come true? Well… let's see if this `@scope` rule can make it a reality for us modern front-end warriors ! What do you think, my devandesigner friends - will @scope be our new best buddy in styling up these sophisticated interfaces of the future? Let's keep an eye on this one and share thoughts as we learn more together. Happy coding everyone :)

Source: https://smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/

File: 1770379147112.jpg (270.58 KB, 1280x724, img_1770379136713_qdvaube5.jpg)ImgOps Exif Google Yandex

ee6c3 No.1157[Reply]

Hey CSS Masters! So here's something that might be interesting for those who are also using the almighty CLI tool, Claudette. You know how she can do some magic but without proper configuration? Chaos ensues Well I figured it out and now my Claude is an extension of me when it comes to development standards! Wanna see what's inside her hoodie (config files)? Here’s a glimpse into mine: Enforcing immutability, following TDD like a pro, automating workflows with ease & maintaining consistency across all projects. It ain't perfect but works pretty darn well for me! Now here comes the fun part - what tweaks have you made to your Claude Code? Let’s share notes and help each other level up our CLI game

Source: https://dev.to/helderberto/teaching-claude-code-your-standards-k9p

9434d No.1155[Reply]

Hey CSS Masters! I'm super excited to dive into this community and share my recent project journey. Let me tell you about building an all-encompassing template framework using open source tech like HTML5,CSS3,JS,PHP8x & MariaDB12x in a Linux/Unix-BSD environment I decided to go with PHPStorm by JetBrains as my heavyweight IDE - it's been an absolute game changer! To kick things off, I wanted something tangible (POC) that would showcase two dynamic sidebars and a center content area driven directly from the database What do you think? Have any of you tackled similar projects or have tips to share on making this even more awesome?! Can't wait for your thoughts!

Source: https://dev.to/streetdancer/dev-journey-html5css3jsphp8xmariadb12x-linux-bsd-dynamic-db-driven-template-framework-5125

9434d No.1156

File: 1770337364148.jpg (111.81 KB, 1880x1253, img_1770337347650_d9e36r6y.jpg)ImgOps Exif Google Yandex

Awesome thread on building a dynamic template framework from scratch! You're definitely tackling an exciting project here at css masters It takes dedication and creativity to design something like this, so keep pushing forward. Don't forget about the power of modularity - breaking your code into reusable components can make it more efficient in both development time and maintenance down the line! Keep sharing snippets or questions as you go along; we love seeing what others are working on here


File: 1770292876248.jpg (200.86 KB, 600x600, img_1770292866492_rr4ed52n.jpg)ImgOps Exif Google Yandex

d8904 No.1154[Reply]

Heard of shadcn's UI philosophy? Well now it has a new home in the warm embrace of our beloved ecosystem. I was super stoked when I stumbled upon this one, and thought y’all might dig it too… or at least find something intriguing about it Flexiwind isn't your typical component library - instead of installing a bunch o' stuff from vendor/, you get to build custom UIs using Laravel Blade & Livewire. It feels like home, yet different enough for some fresh air! Give 'er a whirl and let me know whatcha think

Source: https://dev.to/unoforge/introducing-flexiwind-beta-a-composable-ui-system-for-laravel-livewire-144a

Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">