#css display grid

[jcmarchi]

Time Travelling CSS With :target

New Post has been published on https://thedigitalinsider.com/time-travelling-css-with-target/

Time Travelling CSS With :target

Checkbox and radio button hacks are the (in)famous trick for creating games using just CSS. But it turns out that other elements based on user input can be hacked and gamified. There are very cool examples of developers getting creative with CSS games based on the :hover pseudo-class, and even other games based on the :valid pseudo-class.

What I’ve found, though, is that the :target pseudo-class seems relatively unexplored territory in this area of CSS hacking. It’s an underrated powerful CSS feature when you think about it: :target allows us to style anything based on the selected jump link, so we have a primitive version of client-side routing built into the browser! Let’s go mad scientist with it and see where that takes us.

Unbeatable AI in CSS

Did I type those words together? Are we going to hack CSS so hard that we hit the singularity? Try to beat the stylesheet below at Tic Tac Toe and decide for yourself.

The stylesheet will sometimes allow the game to end in a draw, so you at least have a smidge of hope.

No need to worry! CSS hasn’t gone Skynet on us yet. Like any CSS hack, the rule of thumb to determine whether a game is possible to implement with CSS is the number of possible game states. I learned that when I was able to create a 4×4 Sudoku solver but found a 9×9 version pretty darn near impossible. That’s because CSS hacks come down to hiding and showing game states based on selectors that respond to user input.

Tic Tac Toe has 5,478 legal states reachable if X moves first and there’s a famous algorithm that can calculate the optimal move for any legal state. It stands to reason, then, that we can hack together the Tic Tac Toe game completely in CSS.

OK, but how?

In a way, we are not hacking CSS at all, but rather using CSS as the Lord Almighty intended: to hide, show, and animate stuff. The “intelligence” is how the HTML is generated. It’s like a “choose your own adventure” book of every possible state in the Tic Tac Toe multiverse with the empty squares linked to the optimal next move for the computer.

We generate this using a mutant version of the minimax algorithm implemented in Ruby. And did you know that since CodePen supports HAML (which supports Ruby blocks), we can use it secretly as a Ruby playground? Now you do.

Each state our HAML generates looks like this in HTML:

<div class="b" id="--OOX----"> <svg class="o s"> <circle></circle> </svg> <a class="s" href="#OXOOX----"> <div></div> </a> <svg class="o s"> <circle class="c"></circle> </svg> <svg class="o s"> <circle class="c"></circle> </svg> <div class="x"></div> <a class="s" href="#O-OOXX---"> <div></div> </a> <a class="s" href="#O-OOX-X--"> <div></div> </a> <a class="s" href="#O-OOX--X-"> <div></div> </a> <a class="s" href="#O-OOX---X"> <div></div> </a> </div>

With a sprinkling of surprisingly straightforward CSS, we will display only the currently selected game state using :target selectors. We’ll also add a .c class to historical computer moves — that way, we only trigger the handwriting animation for the computer’s latest move. This gives the illusion that we are only playing on a single gameboard when we are, in reality, jumping between different sections of the document.

/* Game's parent container */ .b, body:has(:target) #--------- /* Game states */ .s display: none; /* Game pieces with :target, elements with href */ :target, #--------- width: 300px; height: 300px; / left: calc(50vw - 150px); top: calc(50vh - 150px); background-image: url(/path/to/animated/grid.gif); background-repeat: no-repeat; background-size: 100% auto; /* Display that game state and bring it to the forefront */ .s z-index: 1; display: inline-block; /* The player's move */ .x z-index: 1; display: inline-block; background-image: url("data:image/svg+xml [...]"); /** shortened for brevity **/ height: 100px; width: 100px; /* The browser's move */ circle animation-fill-mode: forwards; animation-name: draw; animation-duration: 1s; /* Only animate the browser's latest turn */ &.c animation-play-state: paused; animation-delay: -1s;

When a jump link is selected by clicking an empty square, the :target pseudo-class displays the updated game state(.s), styled so that the computer’s precalculated response makes an animated entrance (.c).

Note the special case when we start the game: We need to display the initial empty grid before the user selects any jump link. There is nothing to style with :target at the start, so we hide the initial state — with the:body:has(:target) #--------- selector — once a jump link is selected. Similarly, if you create your experiments using :target you’ll want to present an initial view before the user begins interacting with your page. 

Wrapping up

I won’t go into “why” we’d want to implement this in CSS instead of what might be an “easier” path with JavaScript. It’s simply fun and educational to push the boundaries of CSS. We could, for example, pull this off with the classic checkbox hack — someone did, in fact.

Is there anything interesting about using :target instead? I think so because:

We can save games in CSS! Bookmark the URL and come back to it anytime in the state you left it.

There’s a potential to use the browser’s Back and Forward buttons as game controls. It’s possible to undo a move by going Back in time or replay a move by navigating Forward. Imagine combining :target with the checkbox hack to create games with a time-travel mechanic in the tradition of Braid.

Share your game states. There’s the potential of Wordle-like bragging rights. If you manage to pull off a win or a draw against the unbeatable CSS Tic Tac Toe algorithm, you could show your achievement off to the world by sharing the URL.

It’s completely semantic HTML. The checkbox hack requires you to hide checkboxes or radio buttons, so it will always be a bit of a hack and painful horse-trading when it comes to accessibility. This approach arguably isn’t a hack since all we are doing is using jump links and divs and their styling. This may even make it — dare I say —“easier” to provide a more accessible experience. That’s not to say this is accessible right out of the box, though.

[izicodes]

Beginner JavaScript Projects

POV: You’ve studied HTML and CSS, you’ve made some cool projects and now you’re moving on to learn JavaScript. If you're just starting out learning JavaScript, it can be helpful to have a list of beginner projects to work on in order to get your feet wet and gain practical experience. 

I’ve combined a list of 5 mini projects to be working on - some I have done myself! Don’t worry, for each project I've added a video tutorial that you could use as a reference to help with your own version of the project!

━━━ ⋆⋅☆

Basic image gallery 📸

A web page displays a grid of images and allows the user to click on an image to view a larger version of it. This could come in handy when making Tumblr themes 👀

The JavaScript side: Handle the user's clicks!

Video tutorial: [LINK]

━ ⋆

Simple to-do list app 📝

A web page that allows the user to add, remove, and mark items on a to-do list.

The JavaScript side:  Manipulate the page's HTML elements and store the to-do list data in the browser's local storage!

Video tutorial: [LINK]

━ ⋆

Basic calculator 🧮

A web page with a simple calculator that can perform basic arithmetic operations.

The JavaScript side:  Handles user input, perform calculations, and display the results on the page!

Video tutorial: [LINK]

━ ⋆

Random quote generator 📜

A web page  that displays a random quote from a predefined list of quotes each time the page is loaded or a button is clicked.

The JavaScript side:  Selects a random quote from the list and displays it on the page.

Video tutorial: [LINK]

━ ⋆

Simple rock-paper-scissors game 🎮

A web page that allows the user to play a game of rock-paper-scissors against the computer. I did this project during my coding night classes! 😊

The JavaScript side: Handles user input, generates the computer's move and determines the winner of the game.

Video tutorial: [LINK]

━━━ ⋆⋅☆

I hope this helps someone, it's really good to build projects as you're learning! JavaScript can be a bit tricky towards the harder concepts so it's good to have a good understanding of the basics, project building helps with that! Thanks for reading and have a nice day/night! 💻👍🏾

[⏪ previous programming post]

[widowskins]

widowbase v3 and v4

Whooboi, there is a lot of discourse going on right now about JCINK coders. Perfect time for me to update some base skins!

For those who just want to streamline their coding process, I have updated my widowbase v3 to include a day/night theme toggle and made a few responsive tweaks to the vertical nav and sidebar. For those looking to learn how to use CSS grid and flexbox to create responsive forum designs, I added a new base, widowbase v4. This version includes some HTML templates that have a very ugly, extremely basic, but functional fluid grid layout. These templates also incorporate hidden divs (read as, display: none) that include the PHP variables frequently used inside those respective HTML templates, so you can easily delete everything I've done and start from scratch with your own. Then just delete the hidden div when you've used everything you need. Easy peasy!

For those of you just beginning your coding journey, I wish you the best of luck! It is such a fun and rewarding hobby. You are also free to rip apart any of the codes on my preview site and cobble them back together. These experiments can be a great learning tool! You are more than welcome to use any of my free resources as a base, as long as the finished product remains free. As for my actual skin bases (or template sets specifically labeled as bases), these can be used for free or paid skins. Make money or give it away, whatever works for you, just leave the credits given to resources intact so others can find out how to accomplish the same thing!

[dreamdolldeveloper]

am i dumb

today i feel defeated because i didn't know you could put a css grid within a grid during this exercise i was doing. it wasn't shown in the tutorial and i only knew because i compared my code with the model code. so when i found out i was ike ???#%#$?^$&

i was so stuck on why this text was below a photo instead of sitting next to it and i feel like i should've known??

i'm just beating myself up at this point but i really couldn't put the pieces together and i'm sad that i'm DUM.

i mean i understand it now but AT WHAT COSTTT it felt like i was blatantly copying what the instructor put in their code even though it kinda wasn't so i feel like a fraud but a dummy at the same time bc i couldn't figure that out :(((((((((((((

this is an example of the problem i was facing:

#real #true

context: the lesson was introducing css grid and explaining how display inline blocks don't automatically apply vertical alignment so grids are better.

here is my html and css for these example i made and whatnot:

(these contain div elements using the nested layouts technique)

2. i put them in a grid and removed the inline blocks as told by the tutorial (photo is at 100% width) and the text ended up like this:

the text is below the icon now (rounded photo)

3. found out that the instructor put a grid within the text and icon and so i did the same thing and

this is the html and css + the final outcome:

skjdnwesfh;kjrbgjbfjbgkjrdngkdjtfgnjdfbgrehb

tjgnrjgnregjbr

if i couldn't figure this simple thing out on my own

how will i figure anything out on my own

rip #aminotcutoutforthis #lordsend helpkwe;l;fwef

[devoqdesign]

Responsive vs. Adaptive: Choosing the Right Design Approach for Web and Mobile

In today's digital landscape, creating a seamless user experience across various devices is crucial for the success of any website or application. With the proliferation of smartphones, tablets, and desktops of varying sizes, designers and developers face the challenge of ensuring their content looks great and functions well on all screens. Two popular approaches have emerged to tackle this challenge: responsive design and adaptive design. In this blog post, we'll explore both methods, their pros and cons, and help you decide which one might be the best fit for your project.

Understanding Responsive Design

Responsive design is an approach that aims to create a fluid and flexible layout that automatically adjusts to fit the screen size of the device it's being viewed on. This method uses CSS media queries to modify the design and layout based on the viewport width, allowing the content to "respond" to the user's device.

Key Features of Responsive Design:

Fluid Grids: The layout is based on proportional percentages rather than fixed pixel values.

Flexible Images: Images scale within their containing elements to prevent them from displaying outside their parent container.

CSS Media Queries: These allow different styles to be applied based on the device's characteristics, primarily screen width.

Advantages of Responsive Design:

One Design for All Devices: Developers only need to create and maintain a single version of the website.

Future-Proof: As new devices with different screen sizes emerge, responsive designs can often accommodate them without major changes.

Cost-Effective: Generally less expensive to implement and maintain compared to creating separate designs for each device type.

SEO-Friendly: Google recommends responsive design, which can potentially improve search engine rankings.

Disadvantages of Responsive Design:

Performance Challenges: The same content is loaded for all devices, which can lead to slower load times on mobile devices.

Complex Implementation: Creating a truly responsive design that works well across all devices can be challenging and time-consuming.

Limited Control: Designers have less control over how the layout appears on specific devices.

Understanding Adaptive Design

Adaptive design, also known as adaptive layout, takes a different approach. Instead of creating a fluid design that changes continuously with the screen size, adaptive design detects the device type and loads a pre-set layout designed specifically for that device's screen size.

Key Features of Adaptive Design:

Multiple Fixed Layouts: Typically, designers create layouts for common screen sizes (e.g., 320px, 480px, 760px, 960px, 1200px, and 1600px).

Server-Side Components: Often involves server-side detection of the user's device to serve the appropriate layout.

Device-Specific Optimizations: Each layout can be tailored to the specific capabilities and constraints of target devices.

Advantages of Adaptive Design:

Optimized Performance: Each device receives only the resources and code necessary for its specific layout, potentially improving load times.

Greater Control: Designers have more precise control over how the site looks on specific devices.

Tailored User Experience: The design can be customized to take advantage of device-specific features or accommodate limitations.

Disadvantages of Adaptive Design:

Higher Development Costs: Creating and maintaining multiple layouts for different devices can be more time-consuming and expensive.

Less Flexible: May require updates when new devices with different screen sizes become popular.

Potential for Redundant Code: If not managed carefully, adaptive designs can lead to duplicate code across different layouts.

Choosing the Right Approach

Deciding between responsive and adaptive design depends on various factors specific to your project. Here are some considerations to help guide your choice:

When to Choose Responsive Design:

New Projects: For new websites or applications, responsive design is often the go-to choice due to its flexibility and future-proofing.

Content-Heavy Sites: Blogs, news sites, and other content-focused platforms often benefit from the simplicity of responsive design.

Limited Budget: If resources are constrained, responsive design can be more cost-effective in the long run.

SEO Priority: If search engine optimization is a primary concern, responsive design aligns well with Google's recommendations.

When to Choose Adaptive Design:

Existing Sites: When retrofitting an existing desktop site for mobile, adaptive design can sometimes be easier to implement.

Performance-Critical Applications: For sites where speed is crucial, adaptive design's ability to serve optimized content for each device can be beneficial.

Complex Functionality: If your site has features that require significantly different interfaces on mobile vs. desktop, adaptive design offers more control.

E-commerce Platforms: Online stores might benefit from adaptive design's ability to tailor the shopping experience to different devices.

Hybrid Approaches

It's worth noting that the choice between responsive and adaptive design isn't always binary. Some projects benefit from a hybrid approach that combines elements of both:

RESS (Responsive Design + Server Side Components): This approach uses responsive design as a base but incorporates server-side components to optimize certain elements for specific devices.

Adaptive Content: Some sites use a responsive layout but adapt the content served based on the device, combining the flexibility of responsive design with the performance benefits of adaptive content delivery.

Conclusion

Both responsive and adaptive design have their place in modern web development. Responsive design offers simplicity and flexibility, making it a great choice for many projects, especially those starting from scratch. Adaptive design, while potentially more complex to implement, can provide performance benefits and a more tailored user experience for specific devices.

Ultimately, the best approach depends on your project's specific needs, target audience, and resources. Consider factors such as your content, desired user experience, development resources, and maintenance capabilities when making your decision. In some cases, a hybrid approach that leverages the strengths of both methods might be the optimal solution.

Devoq Design is a premier UI/UX design agency with a strong presence in both Kolkata and Asansol. As a leading UI/UX design agency in Kolkata, Devoq Design specializes in crafting visually engaging and user-centric digital experiences tailored to the specific needs of local businesses. Similarly, as a top UI/UX design agency in Asansol, Devoq Design excels in delivering innovative design solutions that enhance user interaction and satisfaction. With a team of skilled designers dedicated to excellence, Devoq Design ensures that each project is customized to meet the unique requirements of their diverse clientele, driving growth and success in both cities.

[gordonramsei]

꒰ ͙ ❄ SHOW ME UR GIFFIES . ꒱

greetings , pookies ! SHOW ME UR GIFFIES is a fun , vibrant lil gem of a page to host and display all of ur beautiful gifs ! there are two versions available to download , one suited for gif icons and one suited for larger gifs . sizes were tested with 70 x 70 px icons and 268 x 150 px gifs but should be accommodating to various sizing discrepancies ! there are annotations through the page to help u get the precise look u want . as per usual , let me know if u encounter any errors and i will do my best to troubleshoot asap !

if u intend on using this theme or just want to be a supportive hottie , please give this post a like and a reblog ! stay hydrated and be sure to pet a cute animal today ! mwuah 💋 💋 💋 !

ⅰ. THEME FEATURES .

x. 100% java free x. cute , geometric grid line background x. aesthetically pleasing gradient wave header w / annotations to help change the colors + link to shade finder software to help u design ur gradient x. pill - shaped container to house ur title and other goodies x. designated area for ur description x. animated pill container to state gif count x. five links in mini nav hub ; one to redirect to ur main , one to go to ur inbox , one to link to ur main list of resources , one to direct users to ur commission info ( if applicable ) , and one to bring the user back to the dash . all of these links can be edited / deleted to ur liking x. detailed annotations to edit ur page's margins and padding x. optional ::before sector to add symbols / emojis before ur title that are customizable in the css x. links for various unicode character / emoji resources within the code to use for ur title x. for a more detailed compilation of credits and features , please see the google doc containing the code

͙ ❄ this page is a patreon exclusive : want access ? consider signing up to join the fam - a - lam to get ur hands on this theme as well as my entire coding catalogue . click here to learn more !

source link directs to a live preview of SHOW ME UR GIFFIES ! original gif icon drop of cierra ramirez can be found here .

[bliow]

AGARTHA Aİ - DEVASA+

In today's digital age, a well-designed website is essential for success, but the cost of professional web design can often be a barrier for many businesses. Fortunately, affordable web design services have emerged as a viable solution, ensuring that everyone—from startups to established small businesses—can establish an impressive online presence without breaking the bank. This blog post will explore the various aspects of affordable web design services, highlighting what to look for in a reliable website service, the importance of responsive web design, and how budget-friendly options can specifically cater to the unique needs of small businesses. 

Affordable web design services

In today’s digital landscape, affordable web design services have become essential for businesses of all sizes. With an increasing number of consumers turning to the internet for their needs, having a professional and attractive website is more critical than ever. Many small businesses and startups often worry that they cannot afford high-quality web design, but there are plenty of options available that offer both quality and cost-effectiveness.

One of the main advantages of choosing affordable web design services is the ability to find packages that fit various budgets without sacrificing quality. Many web design agencies understand the needs of small businesses and offer tailored solutions that ensure a professional presentation without overwhelming financial commitments. This is especially beneficial for startups that are eager to establish a digital presence without breaking the bank.

Moreover, many affordable web design services provide flexibility in their offerings, allowing clients to select features that meet their specific requirements. From simple informational websites to more complex e-commerce solutions, the variety available in budget-friendly web design ensures that every business can find a service that aligns with its goals and vision. Investing in affordable web design not only enhances a brand's credibility but also helps reach a wider audience effectively.

Website service

In today's digital age, having a robust website service is essential for both businesses and individuals. A well-designed website serves as the online face of a company and is often the first point of contact for potential customers. Investing in quality website service can significantly enhance your online presence and build trust with your audience.

Choosing the right website service provider is crucial. Look for companies that offer customized solutions tailored to your unique needs. This ensures that the website not only looks good but also functions effectively, providing an optimal user experience. A reliable website service provider should provide ongoing support and maintenance to keep your site running smoothly.

Moreover, an effective website service should prioritize SEO optimization, ensuring that your site ranks well in search engine results. This is vital as higher visibility leads to increased traffic and potential sales. Remember, a great website is more than just beautiful design; it's about delivering a seamless user experience

Responsive web design

Responsive web design is an essential approach to creating websites that provide an optimal viewing experience across a wide range of devices. With the increase in mobile device usage, it has become crucial for businesses to ensure that their websites function seamlessly on smartphones, tablets, and desktops. Designing with responsiveness in mind leads to a more user-friendly experience, which can significantly impact user engagement and conversion rates.

One of the key principles of responsive web design is the use of flexible layouts and grid systems. This allows elements on the page to resize and reposition themselves according to the screen size. By employing CSS media queries, designers can tailor styles for different devices, ensuring that content is displayed appropriately without compromising on aesthetics or functionality.

Moreover, implementing responsive web design is not just beneficial for users, but it also plays a vital role in search engine optimization (SEO). Search engines like Google prioritize mobile-friendly websites in their rankings. Therefore, having a site that is responsive can lead to better visibility in search results, driving more organic traffic to your website.

Affordable web design for small business

In today's digital age, every small business needs a strong online presence to compete effectively. However, finding affordable web designfor small business can be a daunting task for many entrepreneurs. It's essential to strike a balance between quality design and budget constraints.

One of the best ways to achieve this is by opting for responsive web design. This approach ensures that your website not only looks great on desktop but also provides an excellent user experience on mobile devices. Since a significant portion of web traffic comes from smartphones, investing in responsive design is crucial for small businesses seeking to maximize their reach.

There are numerous platforms offering affordable web design packages specifically tailored for small businesses. These services can help you establish a professional look without breaking the bank. By choosing the right designer, you can create a site that reflects your brand and meets your customers' needs while staying within your budget.

[jkottke]

Love this: a grid-based CSS solution for displaying sheet music (staffs, notes, clefs, time signatures, etc.)

[cssscriptcom]

Build Clean, Modern UIs with Golden Ratio Scaling - LiftKit CSS

LiftKit CSS is a lightweight, 100% free CSS framework developed by Chainlift. It’s a set of utility classes and UI components designed with golden ratio scaling, which helps you create clean, modern web projects. Utility Classes: Color Typography Spacing Grids Sizes Border Radius Aspect Ratio Shadow Layout Blocks Display UI Elements: Cards Badges Stickers Buttons Navigation Snackbar More…

[dioticodes]

how to add masonry and infinite scroll to a tumblr theme

Hi, welcome. If you’re here, it’s because you want to add either Masonry, Infinite Scroll or both to your custom Tumblr theme.

Heads up, this guide requires some familiarity with HTML, CSS and Javascript as you will be editing your current theme and since all themes are different, I can't give step-by-step instructions on how to edit your exact theme.

Also, this post is best viewed on my desktop theme. Blame Tumblr for not supporting Markdown properly.

OVERVIEW

Alright, so what are we even adding? Basically, Masonry is used to display your posts in a nicely laid out grid, even if they're all different sizes. You tell it what your posts are, what you want them to fit into and it'll come up with a nice grid layout for you. Infinite Scroll is used to... infinitely scroll through posts with having to go to another page. It’s the endless scrolling of your Twitter/Instagram/whatever feed.

Now maybe you’ve already got one or the other in your theme and you’re looking to add the other one. Sounds pretty simple, yeah? It kind of is. The trouble is that Masonry and Infinite Scroll interact with each other. When you’re using Infinite Scroll, whenever you scroll down and load more posts, Masonry needs to check whether your post layout is still okay and correct it if it isn't.

PLUGINS

For the sake of this guide not getting too confusing and because they integrate so easily together, we’ll ONLY be using David DeSandro's Masonry and Infinite Scroll Javascript plugins. If you’ve got different versions of these plugins, remove them now as they may cause issues.

First, we need to add the plugins to your theme’s head:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script><script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>

HTML

To get Masonry working, we need to know what your posts are and the container that they're in. Give your posts a class (e.g. .post) and your container an id (e.g. #posts). We can also specify additional options, such as column width and spacing between the posts. We want the layout to be responsive, so by following the example code Masonry provides, we'll create post-sizer and gutter-sizer.

To add Infinite Scroll, we need to know what the posts are (same as Masonry) and where to get the new content from - this will be the next page of posts on your blog. Tumblr lets us get that easily using pagination variables. Make sure you give the next page a class (e.g. .pagination__next), since this is where we'll be loading new posts from.

Your HTML might look something like this:

<div id="posts"> <div id="post-sizer"></div> <div id="gutter-sizer"></div> {block:Posts} <div class="post" id="{PostID}"> <div class="post-content"> {block:Text} {/block:Text} </div> </div> {/block:Posts} </div> <p id="footer"> {block:PreviousPage} <a href="{PreviousPage}">« Previous</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}" class="pagination__next">Next »</a> {/block:NextPage} <a href="/archive">Archive</a> </p>

CSS

For the styling, we want the layout to be responsive so we'll set post-sizer and gutter-sizer to have a % width. For the rest of the styling, we'll use some of Masonry's example code again.

Your CSS might look something like this:

* { box-sizing: border-box; } #posts { width: 800px; } #posts:after { content: ''; display: block; clear: both; } #post-sizer, .post { width: 32.66%; } #gutter-sizer { width: 1%; } .post { background-color: lightgrey; margin-bottom: 10px; } .post-content { width: 100%; padding: 10px; float: left; }

JAVASCRIPT

In your theme's head, we can create a new script and set up Masonry inside it like this:

<script> window.onload = function() { var elem = document.getElementById('posts'); var msnry = new Masonry(elem, { itemSelector: '.post', percentPosition: true, columnWidth: '#post-sizer', gutter: '#gutter-sizer' }); } </script>

Then to actually get Masonry to generate a layout, we need to call it like this:

msnry.layout();

Usually, that's all you really need for Masonry but for Tumblr posts, any media embeds might take a bit of time to load. For example, Instagram embeds get taller when they're fully loaded (or at least they used to) and this can screw up the layout of your posts. To deal with this, you can add an observer that checks for any changes with media embeds and calculates a new layout if needed:

const embedObserver = new MutationObserver((m, o) => { msnry.layout(); }); embedObserver.observe(document, { childList: true, subtree: true });

Then finally, we need to set up Infinite Scroll. Remember, we're using the same posts that Masonry is changing. Since this plugin is made by the same guy who wrote Masonry, we can integrate it easily using outlayer:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', outlayer: msnry });

Every time it loads a new page, it'll update the URL in your address bar. If you want to turn that off, you can add a new line to the previous codeblock, setting history to false:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry });

And that should be it! The whole script should be something like this:

<script> window.onload = function() { // INITIALISE MASONRY var elem = document.getElementById('posts'); var msnry = new Masonry(elem, { itemSelector: '.post', percentPosition: true, columnWidth: '#post-sizer', gutter: '#gutter-sizer' }); // CALL MASONRY LAYOUT msnry.layout(); // CALL MASONRY LAYOUT ON EMBED LOAD const embedObserver = new MutationObserver((m, o) => { msnry.layout(); }); embedObserver.observe(document, { childList: true, subtree: true }); // INITIALISE INFINITE SCROLL let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry }); } </script>

FINALLY...

Do keep in mind that your theme code will be different to this, so it's not a case of just copying and pasting everything directly. Remember to remove any old Masonry or Infinite Scroll plugins you already have. Your class and id names will probably be different and you may need to add certain HTML elements if you're missing them. You'll almost certainly need to tweak the styling too.

Feel free to shoot me a message if you need help or want to heckle me about the guide being outdated.

[jcmarchi]

“Smart” Layouts With Container Queries

New Post has been published on https://thedigitalinsider.com/smart-layouts-with-container-queries/

“Smart” Layouts With Container Queries

Modern CSS keeps giving us a lot of new, easier ways to solve old problems, but often the new features we’re getting don’t only solve old problems, they open up new possibilities as well.

Container queries are one of those things that open up new possibilities, but because they look a lot like the old way of doing things with media queries, our first instinct is to use them in the same way, or at least a very similar way.

When we do that, though, we aren’t taking advantage of how “smart” container queries are when compared to media queries!

Because of how important media queries were for ushering in the era of responsive web design I don’t want to say anything mean about them… but media queries are dumb. Not dumb in terms of the concept, but dumb in that they don’t know very much. In fact, most people assume that they know more than they do.

Let’s use this simple example to illustrate what I mean:

html font-size: 32px; body background: lightsalmon; @media (min-width: 35rem) body background: lightseagreen;

What would the viewport size be for the background color to change? If you said 1120px wide — which is the product of multiplying 35 by 32 for those who didn’t bother doing the math — you aren’t alone in that guess, but you’d also be wrong.

Remember when I said that media queries don’t know very much? There are only two things they do know:

the size of the viewport, and

the browser’s font size.

And when I say the browser’s font size, I don’t mean the root font size in your document, which is why 1120px in the above example was wrong.

The font size they look at is the initial font size coming from the browser before any values, including the user agent styles, are applied. By default, that’s 16px, though users can change that in their browser settings.

And yes, this is on purpose. The media query specification says:

Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations.

This might seem like a strange decision, but if it didn’t work that way, what would happen if we did this:

html font-size: 16px; @media (min-width: 30rem) html font-size: 32px;

If the media query looked at the root font-size (like most assume it does), you’d run into a loop when the viewport would get to 480px wide, where the font-size would go up in size, then back down over and over again.

Container queries are a lot smarter

While media queries have this limitation, and for good reason, container queries don’t have to worry about this type of problem and that opens up a lot of interesting possibilities!

For example, let’s say we have a grid that should be stacked at smaller sizes, but three columns at larger sizes. With media queries, we sort of have to magic number our way to the exact point where this should happen. Using a container query, we can determine the minimum size we want a column to be, and it’ll always work because we’re looking at the container size.

That means we don’t need a magic number for the breakpoint. If I want three columns with a minimum size of 300px, I know I can have three columns when the container is 900px wide. If I did that with a media query, it wouldn’t work, because when my viewport is 900px wide, my container is, more often than not, smaller than that.

But even better, we can use any unit we want as well, because container queries, unlike media queries, can look at the font size of the container itself.

To me, ch is perfect for this sort of thing. Using ch I can say “when I have enough room for each column to be a minimum of 30 characters wide, I want three columns.”

We can do the math ourselves here like this:

.grid-parent container-type: inline-size; .grid display: grid; gap: 1rem; @container (width > 90ch) grid-template-columns: repeat(3, 1fr);

And this does work pretty well, as you can see in this example.

As another bonus, thanks to Miriam Suzanne, I recently learned that you can include calc() inside media and container queries, so instead of doing the math yourself, you can include it like this: @container (width > calc(30ch * 3)) as you can see in this example:

A more practical use case

One of the annoying things about using container queries is having to have a defined container. A container cannot query itself, so we need an extra wrapper above the element we want to select with a container query. You can see in the examples above that I needed a container on the outside of my grid for this to work.

Even more annoying is when you want grid or flex children to change their layout depending on how much space they have, only to realize that this doesn’t really work if the parent is the container. Instead of having that grid or flex container be the defined container, we end up having to wrap each grid or flex item in a container like this:

<div class="grid"> <div class="card-container"> <div class="card"> </div> <div class="card-container"> <div class="card"> </div> <div class="card-container"> <div class="card"> </div> </div>

.card-container container-type: inline-size;

It’s not that bad in the grand scheme of things, but it is kind of annoying.

Except there are ways around this!

For example, if you’re using repeat(auto-fit, ...) you can use the main grid as the container!

.grid-auto-fit display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%)), 1fr); container-type: inline-size;

Knowing that the minimum size of a column is 30ch, we can leverage that info to restyle individual grid items depending on how many columns we have:

/* 2 columns + gap */ @container (width > calc(30ch * 2 + 1rem)) ... /* 3 columns + gaps */ @container (width > calc(30ch * 3 + 2rem)) ...

I’ve used this in this example to change the styles of the first child in my grid based on whether we have one, two, or three columns.

And while changing the background color of something is great for demos, we can, of course, do much more with this:

The downside to this approach

The only downside I’ve found using this approach is that we can’t use custom properties for the breakpoints, which would really improve the DX of this.

That should eventually change considering custom media queries are in the spec editor’s draft of the Media Queries Level 5 specifications, but its been in there for a while with no movement from any browsers, so it might be a long time before we can use them.

And while my opinion is that having custom properties for these would both make them more readable and easier to update, it opens up enough possibilities that it’s still worth it without them.

What about flexbox?

With flexbox, the flex items are what define the layout, so it’s a little strange in that the sizes we apply on the items are what are important in the breakpoints.

It can still work, but there is a big issue that can arise if you do this with flexbox. Before we look at the issue, here is a quick example of how we can get this working with flexbox:

.flex-container display: flex; gap: 1rem; flex-wrap: wrap; container-type: inline-size; .flex-container > * /* full-width at small sizes */ flex-basis: 100%; flex-grow: 1; /* when there is room for 3 columns including gap */ @container (width > calc(200px * 3 + 2rem)) flex-basis: calc(200px);

In this case, I used px to show it works as well, but you could use any unit there, as I did with the grid examples.

This might look like something you can use a media query for as well — you can use the calc() in them too! — but this would only work in one if the parent has a width that matches the viewport width, which most of the time isn’t the case.

This breaks if the flex items have padding

A lot of people don’t realize it, but the flexbox algorithm doesn’t take padding or borders into account, even if you change your box-sizing. If you have padding on your flex items, you’ll basically have to magic number your way to getting it to work.

Here’s an example where I added some padding but I haven’t changed anything else, and you’ll notice one of those awkward two-columns with one stretched on the bottom layouts at one point:

Because of this, I do generally find myself using this type of approach more often with grid than flexbox, but there are definitely situations where it can still work.

Like before, because we’re aware of how many columns we have, we can leverage that to make more dynamic and interesting layouts depending on the space available for a given element, or elements.

Opening up some interesting possibilities

I’ve only started playing around with this type of thing, and I’ve found that it’s opened up some new possibilities that we never had with media queries, and that makes me excited to see what else is possible!

[blockverseinfotechsolutions]

Responsive Web Design: Best Practices for Optimal User Experience and SEO

In today’s digital age, where the majority of internet users access websites through various devices, responsive web design has become paramount. It’s not just about making a website look good; it’s about ensuring seamless functionality and accessibility across all screen sizes and devices. Responsive web design (RWD) is a critical approach that allows websites to adapt to different devices and screen sizes, providing an optimal viewing and interaction experience.

Importance of Responsive Web Design:

Responsive web design is essential for several reasons. Firstly, it improves user experience by ensuring that visitors can easily navigate and interact with the website regardless of the device they’re using. This leads to higher engagement, lower bounce rates, and increased conversion rates. Secondly, with the proliferation of mobile devices, responsive design is crucial for reaching a wider audience. Google also prioritizes mobile-friendly websites in its search results, making responsive design a key factor for SEO success.

Key Principles to Follow:

Fluid Grids: Instead of fixed-width layouts, use fluid grids that can adapt to different screen sizes.

Flexible Images and Media: Ensure that images and media elements can resize proportionally to fit various devices.

Media Queries: Utilize CSS media queries to apply different styles based on screen characteristics such as width, height, and resolution.

Mobile-First Approach: Start designing for mobile devices first, then progressively enhance the layout for larger screens.

Performance Optimization: Optimize website performance by minimizing HTTP requests, reducing file sizes, and leveraging caching techniques.

Tips for Optimization:

Prioritize Content: Display essential content prominently and prioritize functionality for mobile users.

Optimize Touch Targets: Make buttons and links large enough to be easily tapped on touchscreen devices.

Viewport Meta Tag: Use the viewport meta tag to control how the webpage is displayed on different devices.

Testing Across Devices: Regularly test the website across various devices and browsers to ensure consistent performance and appearance.

Progressive Enhancement: Implement features in layers, starting with basic functionality and progressively enhancing it for more capable devices.

Impact on User Experience:

Responsive web design directly impacts user experience by providing a seamless and consistent experience across devices. Users no longer have to pinch and zoom or struggle with tiny buttons on their smartphones. Instead, they can effortlessly navigate through the website, leading to higher satisfaction and engagement. A positive user experience ultimately translates into increased conversions and customer loyalty.

SEO and Responsive Design:

Responsive web design plays a significant role in SEO. Google, the leading search engine, recommends responsive design as the best practice for mobile optimization. Responsive websites have a single URL and HTML code, making it easier for search engines to crawl, index, and rank content. Additionally, responsive design eliminates the need for separate mobile websites, preventing issues such as duplicate content and diluted link equity.

Real-Life Examples:

Apple: Apple’s website seamlessly adapts to different screen sizes, providing an optimal browsing experience on both desktops and mobile devices.

Amazon: Amazon’s responsive design ensures that users can easily shop and navigate through its vast catalog on any device, contributing to its success as a leading e-commerce platform.

HubSpot: HubSpot’s website is a prime example of a responsive design that prioritizes content and functionality, catering to users across various devices.

Conclusion:

In conclusion, responsive web design is not just a trend; it’s a necessity in today’s digital landscape. By adhering to best practices and optimizing for user experience, websites can effectively reach and engage audiences across desktops, smartphones, and tablets. As Google continues to prioritize mobile-friendly websites, investing in responsive design is crucial for maintaining visibility and driving organic traffic. Embrace responsive design to stay ahead in the competitive online ecosystem.

Web Development Services:

 Blockverse Infotech Solutions has been a pioneer in providing exceptional web development and design services for the past five years. With a dedicated team of professionals, Blockverse ensures cutting-edge solutions tailored to meet clients’ specific needs. Whether you’re looking to create a responsive website from scratch or revamp your existing platform, Blockverse Infotech Solutions delivers innovative designs and seamless functionality to elevate your online presence. Trust Blockverse for all your web development and design requirements and witness your digital vision come to life.

[vrankup]

The Marvel of Responsive Web Design: Navigating a User-Centric Digital Landscape

Hey there, fellow web enthusiasts it's your digital marketing agency in Dwarka, vrankup! 🌐 In today's fast-paced digital realm, where every swipe, tap, and click could lead you down a rabbit hole of information and entertainment, web design has evolved into an art of seamless adaptation. Welcome to this exciting ride through the dynamic universe of responsive web design! Buckle up as we delve deep into why it matters, the nitty-gritty of its principles, and a treasure trove of best practices that can transform your web creations. Whether you're sipping coffee on a desktop or thumbing through your smartphone, this guide will be your trusty co-pilot through the responsive web galaxy. The Responsive Revolution Picture this: You're hunched over your laptop, meticulously crafting the perfect website layout. Now, visualize your masterpiece on a smartphone screen. Wait, why does it look like a Picasso on steroids? That's where responsive web design swoops in like a superhero! 🦸‍♂️ It's the technique that makes your website adjust effortlessly to fit screens of all sizes, from colossal desktop monitors to those itty-bitty smartphone displays. The idea is to give users a seamless experience, regardless of their device. Imagine that - no more awkward pinching, zooming, or squinting. Responsive web design is the key to a harmonious user journey. Why It's the Real Deal First off, let's talk about our gadgets. They're our sidekicks - always with us, whether we're lounging at home or conquering the concrete jungle. With users switching between smartphones, tablets, laptops, and whatnot, your website must be adaptable. That's where responsive design steps in, ensuring your content shines, no matter the screen size. But there's more! Think about Google and its SEO ranking algorithm. It adores mobile-friendly sites, boosting their visibility in search results. So, if you're aiming for web stardom, responsiveness is your ticket to SEO success.

 |Digital marketing agency in dwarka| Responsive Design: Unveiling the Magic Hold on to your digital hats, because here come the secret ingredients of responsive web design! 🎩💫 1. Fluid Grids: It's like having a shape-shifting foundation for your website. Instead of fixed-width layouts that look wonky on different screens, fluid grids use relative units (like percentages) to make your content flow smoothly. It's like having a web design dance party that adapts to every beat. 2. Flexible Images: Ah, images - the pièce de résistance of any website. Responsive design makes sure they behave like chameleons, adapting to their surroundings. CSS tricks like 'max-width: 100%' keep images from breaking the layout on smaller screens. And with HTML's 'srcset' attribute, you can provide different images based on the device, like a magician changing outfits for different acts. 3. Media Queries: These are like the responsive design spells in your web development wizardry book. With media queries, you can sprinkle CSS rules that alter your design based on the device's traits - be it screen width, height, or orientation. Imagine your website's design adjusting its makeup as it transitions from a smartphone to a tablet! Best Practices: Crafting a Responsive Masterpiece Ready to craft your own responsive symphony? Here's the sheet music - our top-notch best practices! 1. Mobile-First Approach: Think small, my friend. Start designing for mobile devices first and work your way up. This approach keeps your design lean, focusing on the essentials for the smallest screens and then adding embellishments for larger ones. 2. Use Relative Units: Pixels, schmixels! Embrace relative units like percentages, ems, and rems for fonts, padding, and margins. They're like the universal translators of responsive design, ensuring your website understands the language of all devices. 3. Extensive Testing: Before the big show, run dress rehearsals on real devices and simulators. Test, test, and test again! Check if your navigation is smooth, images scale gracefully, and your layout waltzes beautifully on screens of all sizes. 4. Performance Tune-up: Mobile users are all about speed - no one likes waiting in a virtual queue. Compress images, minify CSS and JavaScript files, and consider lazy loading to keep your responsive creation loading lightning-fast. 5. User-Centric Design: Keep your users at the heart of it all. Focus on delivering what they need most, especially on smaller screens. Trim the excess and let the essentials shine through. The Grand Finale Responsive web design isn't just a tool in your arsenal - it's a mindset. It's about embracing change and ensuring your digital creations are welcoming to everyone, no matter the device they wield. As technology continues its relentless march forward, responsive design ensures your website remains relevant, accessible, and captivating to users old and new. So, there you have it, intrepid explorers of the web cosmos! With the principles and best practices of responsive design in your toolkit, you're well-equipped to navigate the dynamic tides of the digital sea. As screens continue to shrink, expand, and evolve, your websites will stand strong, adaptable, and ready to provide users with an experience that's nothing short of extraordinary. Get out there and design responsively - the digital realm awaits your creative brilliance! 🚀 Catch you later, Digital marketing agency in dwarka, vrankup!

[dreamdolldeveloper]

learned nested layouts yesterday and css grid today, taking a break from studying/doing the website clone before i pull my hair out 😭 bc I had to start my project all over again bc the display wasn't showing up how i want to and i literally couldn't figure out why because my code looked exactly like the code in the tutorial ???mwsklandkjnas

dying out here but its okay because repetition!!!!

(me trying to be positive)

[darkcoffeeonly]

Calibre - Look & Feel

After setting up Calibre, setting up FanFicFare, it's now time to change the User Interface so to personalize Calibre at its best.

The standard Calibre UI can be changed by going to Preference -> Look & Feel menu:

Main Interface

In the Main Interface menu you can play around the various options:

You can choose if you want to display the calibre style (and in this case if you wish to trigger the Night Mode, under "Color Palette") or your system default.

You can check and change the icon theme, by clicking on the "Change Icon Theme" button. Select the one you wish to try out and click on "OK"

Close the Look&Feel menu and the new icon set will be used instead of the standard one.

For example, this is the look of "Monstre" theme:

If you wish to have no icon at all on top, you can disable them. Or you can make them smaller (or larger). You can decide if you want to have the text displayed or not:

Finally, you can change the Interface font.

For example, if I don't want to have icon on the menu, and I want to use Comic Sans, this will be the final result:

Cover Grid

Calibre has two options to view your books list: the List View we talked about up to now and the Cover Grid, which shows the covers.

In the Cover Grid, you can tweak how you want your Cover Grid to look like. If you want to show additional information (the Title, or the Author, or whatever else), the background color/image, the size, etc.

In the "Emblems" tab, you can choose to had an emblem to each cover following a rule. For example, let's say you want to show a "Completed" icon if the FF has been completed.

Go to Emblems, activate the "Show emblems next to the covers" option and then click on "Add rule"

When you click on Add Rule, you need first to upload the emblem you wish to use. You can search and find for icons on the web.

Then you can add your rule. When you click on the drop-down menu next to "If the", all your columns will be listed. Remember the "look-up" name of the column you want to test and select that one.

In our example, we want to test if a FF has been completed, so we will need to find the "#completed" column.

Once we selected the column, in the field next to "column" we can add the condition. Calibre automatically detects the type of data we are dealing with, so in this case we already have as option "is true"/"is false"/etc.

Confirm and go back to your books list. Click on layout on the right bottom bar and select "Cover Grid"

And here we are the final result:

Book details

In the Book Detail tab, you can flag which infos are shown in the Book Detail (quickview) that is shown on the right side (if you are using the "Wide" layout option defined in the Look&Feel tab) or at the bottom (if you are using the "Narrow" layout option). If you are comfortable with CSS you can change the CSS, you can also order how the metadata should be shown, and select which action should Calibre do as default when you click on the Author name:

In the "Narrow" layout, the final result will be shown at the bottom:

You can change its size (just drag the "three dots" around), or you can disable the "Book details" view from Layout -> Hide Book Details

Edit Metadata

The Edit Metadata tab is useful if you want to change the order of your custom fields in the "Edit Metadata" function and how they are displayed (separated from the standard one or together)

Tag Browser

The Tag Browser defines how the tag panel on the left side is customized:

You can select which tags you want to be shown (you can hide/show tags also by right-clicking on the browser tag itself and hide/show the various tags). More importantly, you can decide to hide any tag that has no value

In the "Hierarchy & Searching" tab you can define which of your tags have a hierarchical structure.

By default all tags considered at same level, but Calibre allows hierarchical tags by interpreting the dot as your hierarchy separator.

For example, if you want to create an "Era Setting" and use this hierarchy:

Hogwarts -> 6th Year

Hogwarts -> 7th Year

Hogwarts -> 8th Year

Post Hogwarts

Others

You will need to create a custom column (#hp_era_setting) and flag it as Hierarchical in the tag browser.

If you fill data as "Hogwarts.6th Year", Calibre will show the hierarchy like this:

Cover Browser // Quickview

I'm skipping this two tabs because I have never changed anything there. They can be used to change the Cover Browser and Quickview tools you can find under "Layout" icon (the same one you use to switch to the Cover Grid and to Show/Hide the Books details)

Column Coloring

Column Coloring tab is used to define how to change colors of a field based on any kind of rule.

For example, let's say you want to change the color of a row from black to gray if you have already rated a fanfiction.

You need to create a rule like this, in which you change the colour of all columns for all records in which the column "Rating" has been set

Here the result:

You can add multiple rules. So for example you want to change the color of your stars?

You need to add a rule in which you change the color of ONLY the Rating Column if a Rating has been set:

Column Icons

The last tab, "Column Icons" will allow you to add icons to column based on rules.

For example, let's say you want to show icons for the rating. You need to have rules like this one:

In which you are setting an icon (without text, if you don't want to see the actual column value) if the Content Rating value is "Explicit",

The result will be like this:

Changing the Tool Bar

You can also change the Tool Bar to add/hide menu options you are not interested in.

Changing the icons on the Tag Browser

You can change the icons in the tag browser by right-clicking on the tag you wish to change and selecting the "change icon" option:

Further customization

You can fine-tune the look & feel of your library through JobSpy Plugin.

JobSpy is a super complex plugin (which I won't pretend I know much about to start with) but for our needs we just needs two things:

Open the "Customize GUI Tools"

and scroll down till you find the GUI Colors: Library View, Tag Browser.

Here you can choose your color scheme and activate it:

2. By default when you change the icon on the Tag Browser, the new icon is used for all the items. But maybe you want to change the icons to match your "Column Icon" rule.

Select GUI Tools That are Look & Field Related -> Customize User Category Tag Browser

Select the tag you want to customize and the plugin will detect all the values currently used:

Browse your pc for the related icon and assign it to the value. You can review the assigned icon in the table.

Flag the option to apply them at Calibre start-up, and here you are the result:

Calibre Integration with GoodReads & your e-reader

In the next post I will go through some basic tools to integrate your calibre library to goodreads, to download goodreads cover and to set up your e-reader.

[xacheri]

Brower Electric - Commit #1/1.5 - navbar

This commit, I built the navbar. I used Bootstrap 5 tools and flexbox to make it responsive.

The HTML

The head tag is basic. We've got our title and we've imported 2 stylesheets from the web. These give us our framework and the Noto Sans font. We also have our personal stylesheet.

The body tag has a basic Bootstrap Nav setup. The nav tag has the navbar and navbar-expand-lg classes since those are the two breakpoints I will use in the nav. On lg, we justify-content: space-around so that the items place themselves evenly across the top.

The logo is actually just a div with an h1 tag (for the browser/SE) with a background image. The positioning on that was fun, I decided to use a flexbox to make it.

The CSS:

First, we add in the font we use for the logo. A lot of the custom css is related to margins, padding, and colors. The logo is a flex box (direction: row) with a predetermined minimum width that we justify-content to the right on. This keeps our text to the right. Then the text aligns itself to the bottom. Luckily we only had one flex-child in the container so the nonexistence of justify-self is not an issue.

Initially, I had used some relative positioning to do things (specifically the logo) before seeing that it made the width of the page wider than the viewport. At this point, I purged all relative positioning from my page and praised flex-box.

To make it attractive for mobile devices, it collapses to 2 top items on the bar: a hamburger menu and our logo. Our menu then displays the nav items and call button in a list below when clicked on. This kind of interactivity takes no time to build with Bootstrap 5 Collapse.

Next commit, I will add in a custom hamburger menu for the mobile version. I will also build the testimonial carousel and the services grid/tree.

You can visit the site's github repository here: https://github.com/Xacheri/BrowerElectric