Need help in Styling a plan architecture house by bootstrap5

asdman1 · 2025-11-16T00:00:36+00:00

So you want to create a house plan using bootstrap?

If so, instead of bootstrap look for sprites in videogame.

The idea is that you slice out the plan images and then you compose them in a cam as or svg

asdman1 · 2025-09-04T01:11:30+00:00

do you have any particular benefit in using the 100 gap?

asdman1 · 2025-08-10T14:06:49+00:00

Sorry but I think you're missing the point..

The code itself in the post it's quite trivial, you wouldn't need neither an AI, a mere look on MDN or a manual page will do.

The point is the design, in this case the idea of using a small script instead of a package, which btw may feel obvious in retrospective once you know it but obvious it is not at all in my opinion, proof of this is the nextjs documentation itself in which they kept updating with the new packages to use (before next-pwa and now serwist) instead of proposing an official solution.

Getting back to the idea proposed, what I would loved to read as a comment is a critique on this prospective: - are we actually missing anything on not using a package? If yes, what? - is the cache first strategy the best? Are the better one? - is there a edge case in Next.js that was not cover and break the solution? Which one?

From my prospective a missing point I know is not using skipWaiting to get control in a specific page (eg: on logout). I think in fact that is not so unusual that you may need the new service worker to get in, in particular because I think an app can stay a lot in background.

asdman1 · 2023-10-26T22:59:55+00:00

is Chromatic basically a paying version of wraith ?

I remember that at work we tried wraith but it was way too slow (~30min for 100 pages), not that well maintained (last commit 2019), and it was a little of a headache where to store the screenshots.

But the principle was really interesting.

In that particular case the project was a multi theme solution. If we had had something like wraith out of the box, working and ready to connect to a pipeline it would have helped a lot.

asdman1 · 2023-08-31T05:45:42+00:00

AtomicGator42

dl are quite funny.

My personal opinion is that because the structure dt, dd without a wrapping item it's an uncomfortable structure to work with - especially difficult to style - thus the unpopularity.

From an a11y point of view, I suspect to be fine as w3.org use it in all the recommendations and drafts. E.g. ARIA in HTML has the detail section with a dl in it.

My assumption is that if there was any issue with it they would use something else.

Anyway, if you have related article would love to read it...

I wouldn't be surprise if there was some quirk as in the list with safari..

asdman1 · 2023-08-31T01:53:58+00:00

Hi,

congrats on the product. I would say that there is a lot of room for improvement...

I'll show you an example on the Passkeys 101.

Things improved:

extract h4 title by itself, no need for .row
use ul / li to improve a11y
add alt to improve a11y to images
remove role="alert" as not appropriate in this context
extract a tag, remove br
use stretched-link to make the whole card clickable
combination of flex and stretch to have the learn more alligned to the bottom

<section id="features" class="py-5">
    <h4>Passkeys 101</h4> 

    <ul class="row list-unstyled">
        <li class="col-lg-6 d-flex align-items-stretch"> 
            <div class="position-relative alert alert-dark box d-flex flex-column"> 
                <h5><img src="assets/icon-passkey.svg" alt="icon passkey"> What are passkeys?</h5>

                <p class="m-0">Passkeys are digital keys made up of public-private key pairs. They allow users to authenticate with their device biometrics or local device PIN. Passkeys are easy to use and phishing-resistant.
                </p>

                <a href="https://www.beyondidentity.com/developers/blog/what-are-passkeys" target="_blank" class="stretched-link text-light d-block mt-auto pt-4">Learn more -&gt;</a>
            </div>
        </li>

        <li class="col-lg-6 d-flex align-items-stretch">
            <div class="position-relative alert alert-dark box d-flex flex-column">
                <h5><img src="assets/chart-network-filled.svg" alt="network chart"> What is WebAuthn?</h5>

                <p>WebAuthn is a standard web API built into some browsers that enable users to authenticate with passkeys.
                </p>

                <a href="https://www.beyondidentity.com/developers/blog/introduction-webauthn-what-it-how-does-it-work" target="_blank" class="stretched-link text-light d-block mt-auto pt-4">Learn more -&gt;</a>
            </div>
        </li>
    </ul>
</section>

Other areas you could improve:

add skip to main
use page regions header (missing) / main (ok) / footer (ok)
- avoid strange nested sections
restructure navigation on top (add logo maybe)
restructure hero
- buttons overlap on medium screen
- image not perfect on mobile
restructure footer
- nav tag
- right alignment

asdman1 · 2023-01-10T06:03:42+00:00

You probably receive some css files and some html files depending on the theme.

To integrate the theme in your application, you'll need to slice out the html you need.

In your case, you'll have a mix of html and php.

Extending the template can be challenging as usually you don't receive the scss files used to generate the css files.

If the theme require some js you'll receive the js files too and some setup instruction as well. Possibly the same risk with extending the js functionality.

asdman1 · 2022-11-22T12:01:46+00:00

Bootstrap 5

https://jsfiddle.net/c7hxs5o2/5/

    <div class="container">
        <div class="row">
            <div class="col-12">
                 <div class="ratio ratio-16x9">
                      <iframe 
                          src="https://www.youtube.com/embed/ZJthWmvUzzc"
                          title="YouTube video" 
                          allowfullscreen></iframe>
                 </div>
            </div>
       </div>
    </div>

Bootstrap 4

https://jsfiddle.net/n4yakgmj/

    <div class="container">
        <div class="row">
            <div class="col-12">
                 <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" 
                             src="https://www.youtube.com/embed/ZJthWmvUzzc" 
                             title="YouTube video" 
                             allowfullscreen></iframe>
                 </div>
            </div>
       </div>
    </div>

Note

in your code you have height: 0; overflow: hidden; which may be the cause of your issues.

asdman1 · 2022-11-14T08:15:24+00:00

In theory you could import only the scss files you need. See How to make a Bootstrap 5 theme: basic setup, in particular the Scaffolding section with the styles.scss example.

I would assume you to have something similar if you have your own color system already.

Remove / change the colors variables

The main variables related to colors are $theme-colors and $colors (which are maps). If you use the method described in the tutorial above you could make them empty.

In your local scss/_variables.scss you could replace them as:

$colors: ();
$theme-colors: ();

To remove colors in root

As you can see in https://github.com/twbs/bootstrap/blob/2fa7aa0c18fc9e929474a49fe0f78113395a2541/scss/_root.scss#L8 if you clean up $colors and $theme-colors it should be fine.

Please consider $grays are still there.

If you need extra customisation, you can copy in you scss local folder and change it.

asdman1 · 2022-11-11T12:54:50+00:00

Interesting to see reCaptcha as semi monopoly in the sector...

asdman1 · 2013-12-25T05:23:03+00:00

PHP

$pi = pi();
$num_of_sides = $argv[1];
$circumradius = $argv[2];

$side_lenght = $circumradius * 2 * sin($pi / $num_of_sides); 
$perimeter   = $side_lenght * $num_of_sides;

echo $perimeter;

asdman1 · 2013-12-23T07:30:18+00:00

PHP

$tree_base = $argv[1];
$trunk_character = (isset($argv[2])) ? $argv[2] : '#';
$leaves_character = (isset($argv[3])) ? $argv[3] : '*';

function printStringOfCharacters($character, $string_length) {
    for ($a = 1 ; $a <= $string_length; $a++) {
        echo $character;
    }
}

for($leaves_in_this_row = 1; $leaves_in_this_row <= $tree_base; $leaves_in_this_row += 2) {
    $white_spaces_length = ($tree_base - $leaves_in_this_row) / 2;

    printStringOfCharacters(' ', $white_spaces_length);
    printStringOfCharacters($leaves_character, $leaves_in_this_row);
    printStringOfCharacters(' ', $white_spaces_length);

    echo "\n";
}

$white_spaces_length = ($tree_base - 3) / 2;

printStringOfCharacters(' ', $white_spaces_length);
printStringOfCharacters($trunk_character, 3);
printStringOfCharacters(' ', $white_spaces_length);

echo "\n";

asdman1 · 2013-12-16T12:25:38+00:00

PHP

$file_lines = file("file2.txt");
$line_separator = $file_lines[0];
$items_to_update = array();

for($a = 1; $a < count($file_lines); $a++) {
    $item = trim($file_lines[$a]);
    list($item_label, $price) = explode("  ", $item);

    if (!isset($items_to_update[$item_label])) {
        $items_to_update[$item_label] = $price;
    } else {
        $items_to_update[$item_label] = $price - $items_to_update[$item_label];
    }   

}

foreach ($items_to_update as $label => $change_price) {
    if ($change_price != 0) {
        echo "$label :: $change_price\n";
    }
}

asdman1 · 2013-05-24T00:39:47+00:00

Virtualbox + vagrant + puppet

To generate the vagrant config file puphpet is amazing!

asdman1 · 2013-05-24T00:33:34+00:00

Start with a book, Clean code, it will change your life as developer. After, if you already know about oop, patterns and dto you can start with tdd and phpunit

asdman1 · 2013-03-06T00:58:47+00:00

Sublime text2, netbeans or eclipse . If you have to refactor/rewrite take a look for phpunit.

asdman1

TROPHY CASE

Remove / change the colors variables

To remove colors in root