Best way to build pedigree?

HTML-CSS
1

I am doing a cattle site and have to display hundreds of cattle pedigrees. A pedigree is like a genealogy.

On my old site I just used a table and many column and row spans. It works.

I am trying to up my skills to rebuild a site and while exploring CSS Grid, decided to try to use that for a pedigree. The problem is that it seems a very unwieldy way to display that type of information.

My html/table only method takes 92 lines of code only and the HTML/CSS with CSS Grid takes 221 lines of code. I used grid-area to position each element and if I had used grid-template-areas, it might have been a few less lines of code.

Here are examples of the two.

https://www.texaslonghorn.com/temp/pedigree-css-grid.html
https://www.texaslonghorn.com/temp/pedigree-table.html

I am wondering if there is a better way to do this?

Also, in my new design, I want to have responsive design and will need to drop the last column and brackets for phone layouts.

Thanks,
Kirk

2

I can’t discern a visible difference between the two links.
I cannot tell either why you care about counting lines of code? Is there some line of code limit?

I think if the question is about reducing lines of code, then i have no comment, but if the question is about the layout of the genealogy then i would suggest looking into collapsible elements so that the user can click to expand or collapse the displayed tree data.

1 Like
3

Yeah, I tried to duplicate the look between the two. I was looking for the most efficient way to display it in the most browsers. The CSS Grid won’t work in the older browsers. I really don’t care much if the code is too many lines, it really doesn’t change the load time with that few lines.

I figured if it did it with CSS Grid, then it would be much easier to hide the last column. That would be impossible with a table.

Not sure about collapsible elements. I want to show as much as can fit on the screen. I show them the 4 generation pedigrees and they can continue to click back into the pedigree until history runs out.

Here is how I am currently doing it:
https://www.texaslonghorn.com/reference/reg.cfm?Reg=I-259803

They can click on any parent or grandparent and it shows the new pedigree and photos of offspring from that individual.

The progeny (offspring) is displayed in a flex box so it will be responsive on different devices. The pedigree is not currently responsive.

4

I think if you’re using javascript, you can easily hide the table rows in the code.
(by manipulating the DOM or using jquery)

I think you should try to establish a list of supported browsers. That way you can test for the worst one in the list and that way ensure that your page is going to be displayed.

As for collapsible elements, that’s a design choice and here’s an example implementation from an online technical documentation website (see screen shot). The items are collapsible because you can expand to see the tree or collapse branches of the tree when you’re done with them. Since you are making a tree for your site, that’s what came to mind, stylistically anyway.

2018-08-09
2018-08-09956Ă—1304 102 KB

5

I think stylistically a collapsible tree is really cool, but it gets way more complicated with a pedigree or genealogy than it does with an outline. There are a lot of scripts and modules available for collapsible outlines. A collapsible pedigree is more complicated because it has to be presented in a specific format that users expect and an outline script is not usually designed to be capable of that format. I have to present sub entries above and below at each level, they cannot be both below.

You can’t have this:

Name
   - Sire +
   - Dam +

Name
   - Sire 
          - Sires Sire +
          - Sires Dam +
   - Dam
          - Dams Sire +
         -  Dams Dam +

You have to have this:

                  Sire +
Name {
                  Dam +


                                Sires Sire  +
                  Sire {
                                Sires Dam  +
Name {
                                Dams Sire  +
                  Dam {
                                 Dams Dam  +

I feel that the people looking at these aren’t going to want to click to expand. They want to see as many as can be displayed on the screen and link out to the ones they are interested in.

Here is the largest all breed horse pedigree database on the internet and how they display pedigrees:
https://www.allbreedpedigree.com/three+bars

I am really looking for the most efficient way to display a pedigree and be able to hide the one level when it gets smaller.

I am filling these pedigrees from a database and can easily use server side code to build two completely different layouts depending on if it is mobile or not. I was wanting to avoid that if possible.

I just know for a fact that the table with spans works in every browser from Netcape 3 and on without any hacks. Not sure what advantage I get into from using CSS grid and having to also present a table anyways for older browsers.

6

The only advantage I am aware of for CSS grids is to help people whose data doesn’t fit into a table format to format their stuff. Before, the kind of css acrobatics we would have to do to represent data was crazy hard.

The fact that a table suits your audience and data, means that using grids will not give you any advantage.

(you did say that you wanted to practice with grids, so I would say, mission accomplished but leave the original table alone)

1 Like
7

If you decide to replace the table you may use a combination of flexbox and css grid that its not hard to implement and you will have also responsiveness thing that is very hard to achieve using a table.

1 Like
9

Is there a way to connect with you? I have a load of questions, and I think you might be the person that can point me in the right direction…

I’m not sure if this forum offer some private messaging, and I’m just too new to have earned it…? If not, my email is cxbar30@gmail.com if you feel comfortable contacting me that way!

I have some questions about pedigree developing, and would love to hear your advice.

Thank you!