Topic Closed
DaveS
15 Posts
2.2K Downloads
1 Plugins

Hi, 

I found this at the end of the include/additional.css
As it was not inside a media query any element with a class containing col-sm-6 would appear as 50% irrespective of what size the viewport was. 

.row{ box-sizing:border-box;margin:0 -15px;}.col-sm-6{ box-sizing:border-box;padding:0 15px;width:50%;float:left;}
Edited: 5 years ago#7666

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

Josh inserted it to make the current section combos (text+image, text+gallery) work.
I guess it will most likely not survive because - as you mentioned - it interferes with the Bootstrap grid.

Since you're using a Bootstrap theme you can safely delete it.

For a final solution I advocate for a independent and minimalistic gpEasy-Grid for the built-in section combos. Something that can be easily overridden by themes. Or maybe a solution that allows to switch off the section-combo grid classes in favor of theme-related grid classes.

Section combos are not yet mature and need to be discussed.

5 years ago#7669

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

My proposal for a gpEasy Simple Grid system (independent from Bootstrap):

/* ######################################################### */
/* #  gpEasy-SimpleGrid                                    # */
/* #  12-columns, percent based widths, px-based paddings  # */
/* #                                                       # */
/* #  CLASSES:                                             # */
/* #  gpRow -> for wrappers                                # */
/* #  gpCol-1 - gpCol-12 -> for grid sections              # */
/* #                                                       # */
/* #  3 BREAKPOINTS, RESPONSIVE IMAGE MAX-WIDTH            # */
/* ######################################################### */

.gpRow {
margin-left:-15px;
margin-right:-15px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gpRow img {
max-width:100%;
height:auto!important;
}
/* Prevents height distortion in IE<=8 */
@media screen { .gpRow img { width:auto; } }

.gpRow:before, .gpRow:after {
content:" ";
display:table;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gpCol-1, .gpCol-2, .gpCol-3, .gpCol-4, .gpCol-5, .gpCol-6,
.gpCol-7, .gpCol-8, .gpCol-9, .gpCol-10 .gpCol-11, .gpCol-12 {
float:left;
min-height:1px;
padding-left:15px;
padding-right:15px;
margin-bottom:15px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gpCol-1  { width:8.33333%; }
.gpCol-2  { width:16.6667%; }
.gpCol-3  { width:25%; }
.gpCol-4  { width:33.3333%; }
.gpCol-5  { width:41.6667%; }
.gpCol-6  { width:50%; }
.gpCol-7  { width:58.3333%; }
.gpCol-8  { width:66.6667%; }
.gpCol-9  { width:75%; }
.gpCol-10 { width:83.3333%; }
.gpCol-11 { width:91.6667% }
.gpCol-12 { width:100%; }

/* MEDIA QUERIES / BREAKPOINTS */

/* Most smartphones - portrait */
@media only screen and (min-width:320px) {
  .gpRow {
  margin-left:-10px;
  margin-right:-10px;
  margin-bottom:10px;
  }
  .gpCol-1, .gpCol-2, .gpCol-3,
  .gpCol-4, .gpCol-5, .gpCol-6,
  .gpCol-7, .gpCol-8, .gpCol-9,
  .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  padding-left:10px;
  padding-right:10px;
  }
}

/* Most smartphones - landscape, small tablets and some large phones/phablets - portrait */
@media only screen and (min-width:480px) {
  .gpRow {
  margin-left:-10px;
  margin-right:-10px;
  margin-bottom:10px;
  }
  .gpCol-1, .gpCol-2, .gpCol-3 { width:50%; }
  .gpCol-4, .gpCol-5, .gpCol-6, .gpCol-7, .gpCol-8,
  .gpCol-9, .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  padding-left:10px;
  padding-right:10px;
  }
}

/* Some smaller tablets - landscape, Larger tablets - potrait */
@media only screen and (min-width:768px) {
  .gpCol-1, .gpCol-2 { width:25%; }
  .gpCol-3, .gpCol-4,
  .gpCol-5, .gpCol-6 { width:50%; }
  .gpCol-7, .gpCol-8, .gpCol-9,
  .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  }
}
5 years ago#7670

Josh S.
2K Posts
280K Downloads
16 Themes
18 Plugins
I added those gpRow and gpCol classes to 4.5beta3. Thanks Juergen!
5 years ago#7679

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

Sorry, should have tested it first. Please replace the the media-queries part with tihs. Thx.

/* MEDIA QUERIES / BREAKPOINTS */

/* Some smaller tablets - landscape, Larger tablets - potrait */
@media only screen and (max-width:768px) {
  .gpCol-1, .gpCol-2 { width:25%; }
  .gpCol-3, .gpCol-4,
  .gpCol-5, .gpCol-6 { width:50%; }
  .gpCol-7, .gpCol-8, .gpCol-9,
  .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  }
}

/* Most smartphones - landscape, small tablets and some large phones/phablets - portrait */
@media only screen and (max-width:480px) {
  .gpRow {
  margin-left:-10px;
  margin-right:-10px;
  margin-bottom:10px;
  }
  .gpCol-1, .gpCol-2, .gpCol-3 { width:50%; }
  .gpCol-4, .gpCol-5, .gpCol-6, .gpCol-7, .gpCol-8,
  .gpCol-9, .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  padding-left:10px;
  padding-right:10px;
  }
}

/* Most smartphones - portrait */
@media only screen and (max-width:320px) {
  .gpRow {
  margin-left:-10px;
  margin-right:-10px;
  margin-bottom:10px;
  }
  .gpCol-1, .gpCol-2, .gpCol-3,
  .gpCol-4, .gpCol-5, .gpCol-6,
  .gpCol-7, .gpCol-8, .gpCol-9,
  .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  padding-left:10px;
  padding-right:10px;
  }
}
5 years ago#7685

Josh S.
2K Posts
280K Downloads
16 Themes
18 Plugins
That's what beta releases are for. Thanks for checking it!
5 years ago#7689

feniweb
298 Posts

Hello J├Ârgen

The GP Grid 12 Grid I find not bad, only it works not correctly.
Information In your example, gpCol-3, 4-gpCol always obtained sizes is only 50%.

When responsive approach first it needs a width about 768px details yet.

 

 

min-width: 1024 possibly can take a different width 33.3334%

/* ######################################################### */
/* #  gpEasy-SimpleGrid                                    # */
/* #  12-columns, percent based widths, px-based paddings  # */
/* #                                                       # */
/* #  CLASSES:                                             # */
/* #  gpRow -> for wrappers                                # */
/* #  gpCol-1 - gpCol-12 -> for grid sections              # */
/* #                                                       # */
/* #  3 BREAKPOINTS, RESPONSIVE IMAGE min-WIDTH            # */
/* ######################################################### */

.gpRow {
margin-left:-15px;
margin-right:-15px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gpRow img {
max-width:100%;
height:auto!important;
}
/* Prevents height distortion in IE<=8 */
@media screen { .gpRow img { width:auto; } }

.gpRow:before, .gpRow:after {
content:" ";
display:table;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gpCol-1, .gpCol-2, .gpCol-3, .gpCol-4, .gpCol-5, .gpCol-6,
.gpCol-7, .gpCol-8, .gpCol-9, .gpCol-10 .gpCol-11, .gpCol-12 {
float:left;
min-height:1px;
padding-left:15px;
padding-right:15px;
margin-bottom:15px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

  .gpRow {
  margin-left:-10px;
  margin-right:-10px;
  margin-bottom:10px;
  }
  .gpCol-1, .gpCol-2, .gpCol-3,
  .gpCol-4, .gpCol-5, .gpCol-6,
  .gpCol-7, .gpCol-8, .gpCol-9,
  .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  padding-left:10px;
  padding-right:10px;
  }

/* MEDIA QUERIES / BREAKPOINTS */

/* Most smartphones - portrait */
@media only screen and (min-width:320px) {


}

/* Most smartphones - landscape, small tablets and some large phones/phablets - portrait */
@media only screen and (min-width:480px) {

}

/* Some smaller tablets - landscape, Larger tablets - potrait */
@media only screen and (min-width:768px) {
  .gpCol-1, .gpCol-2 { width:25%; }
  .gpCol-3, .gpCol-4,
  .gpCol-5, .gpCol-6 { width:50%; }
  .gpCol-7, .gpCol-8, .gpCol-9,
  .gpCol-10, .gpCol-11 .gpCol-12 {
  width:100%;
  }
}

/* Some smaller tablets - landscape,  for all Desktop */
@media only screen and (min-width:1024px) {
  .gpCol-1  { width:8.33333%; }
.gpCol-2  { width:16.6667%; }
.gpCol-3  { width:25%; }
.gpCol-4  { width:33.3333%; }
.gpCol-5  { width:41.6667%; }
.gpCol-6  { width:50%; }
.gpCol-7  { width:58.3333%; }
.gpCol-8  { width:66.6667%; }
.gpCol-9  { width:75%; }
.gpCol-10 { width:83.3333%; }
.gpCol-11 { width:91.6667% }
.gpCol-12 { width:100%; }
}

Edited: 5 years ago#7725

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

Sorry, I was not following the topic.

When responsive approach...

Personally I'm not convinced of "mobile first" but in the end it doesn't really matter as long as the media queries are distinctive.

For the widths of gpCol-3 and gpCol-4 (and others):
As long as the grid doesn't provide separate classes for each breakpoint, it's a matter of taste, when we choose to collapse expand grid elements and to which widths. There is no gold standard and it depends of the layout and content. The most simple approach would be to collapse expand all grid elements to full width below a certain breakpoint but - as far as my experience goes - it's too simplistic and won't work well in many cases.

Especially for gpCol-4 (which will render 3 items in a row) there is no meaningful fallback for more narrow screens. Same for all other classes that produce odd element counts in a row. So, if we decide to use such classes, we will have to extend the grid with special classes or overrule it completely - or we use a more sophisticated grid like the one bootstrap has.

I consider gpEasy Simple Grid to be primarily used to render built-in Section Combos which are currently only using col-6.
For alll other cases, it should be easy to override the classes in your custom theme css.

But I'm open for improvements. However we definitely need breakpoints for 320/480px!

I'm considering building a visual breakpoint manager to tune the grid but I don't know when I will find time for it.

Edited: 5 years ago#7750

Josh S.
2K Posts
280K Downloads
16 Themes
18 Plugins
I'm happy with whatever you two decide is best. Juergen, is feniweb's most recent css good for you?
5 years ago#7764

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

Ok, let's keep it simple and let all colums render full width below screen width of 768 css pixels.
Theme developers can always extend and overrule the grid after their fancy.

/* ############################################################ */
/* #  gpEasy-SimpleGrid                                       # */
/* #  12-columns, percent based widths, px-based paddings     # */
/* #                                                          # */
/* #  CLASSES:                                                # */
/* #  gpRow -> for wrappers                                   # */
/* #  gpCol-1 - gpCol-12 -> for grid sections                 # */
/* #                                                          # */
/* #  all columns render full width below 768px screen width  # */
/* ############################################################ */

.gpRow {
margin-left:-15px;
margin-right:-15px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}


.gpRow img { max-width:100%; height:auto!important; } 
/* Prevents height distortion in IE<=8 */ 
@media screen { .gpRow img { width:auto; } }


.gpRow:before, .gpRow:after {
  content:" ";
  display:table;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.gpCol-1, .gpCol-2, .gpCol-3,
.gpCol-4, .gpCol-5, .gpCol-6,
.gpCol-7, .gpCol-8, .gpCol-9,
.gpCol-10 .gpCol-11, .gpCol-12 {
  float:left;
  min-height:1px;
  padding-left:15px;
  padding-right:15px;
  margin-bottom:15px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.gpCol-1  { width:8.33333333%; }
.gpCol-2  { width:16.66666667%; }
.gpCol-3  { width:25%; }
.gpCol-4  { width:33.33333333%; }
.gpCol-5  { width:41.66666667%; }
.gpCol-6  { width:50%; }
.gpCol-7  { width:58.33333333%; }
.gpCol-8  { width:66.66666667%; }
.gpCol-9  { width:75%; }
.gpCol-10 { width:83.33333333%; }
.gpCol-11 { width:91.66666667%; }
.gpCol-12 { width:100%; }

/* MEDIA QUERIES / BREAKPOINTS */

@media only screen and (max-width:767px) {
    .gpCol-1, .gpCol-2, .gpCol-3, .gpCol-4,
    .gpCol-5, .gpCol-6, .gpCol-7, .gpCol-8,
    .gpCol-9, .gpCol-10, .gpCol-11 .gpCol-12 {
    float:none;
    width:auto;
  }
}
5 years ago#7765

Josh S.
2K Posts
280K Downloads
16 Themes
18 Plugins
Does that work for you feniweb?
5 years ago#7769

feniweb
298 Posts

Hello Josh and Jorgen

Thanks for your demand on this topic.
Sorry if I think something different. Many web designers rely on mobile first. Allsomedia only screen and (min-width: 767px) {
everything is first set to 100% and only then will the einzelene output variables defined media queries. Especially for mobile devices, this CSS is faster and clearer.

greeting

5 years ago#7771

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

This is the "mobile first" varirant. Does the same so I'm fine with both.

 

/* ############################################################ */
/* #  gpEasy-SimpleGrid                                       # */
/* #  12-columns, percent based widths, px-based paddings     # */
/* #                                                          # */
/* #  CLASSES:                                                # */
/* #  gpRow -> for wrappers                                   # */
/* #  gpCol-1 - gpCol-12 -> for grid sections                 # */
/* #                                                          # */
/* #  all columns render full width below 768px screen width  # */
/* ############################################################ */

.gpRow img { max-width:100%; height:auto!important; }
/* Prevents height distortion in IE<=8 */
@media screen { .gpRow img { width:auto; } }

/* MEDIA QUERIES / BREAKPOINTS */

@media only screen and (min-width:768px) {

  .gpRow {
  margin-left:-15px;
  margin-right:-15px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  }

  .gpRow:before, .gpRow:after {
    content:" ";
    display:table;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }

  .gpCol-1, .gpCol-2, .gpCol-3,
  .gpCol-4, .gpCol-5, .gpCol-6,
  .gpCol-7, .gpCol-8, .gpCol-9,
  .gpCol-10 .gpCol-11, .gpCol-12 {
    float:left;
    min-height:1px;
    padding-left:15px;
    padding-right:15px;
    margin-bottom:15px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }

  .gpCol-1  { width:8.33333333%; }
  .gpCol-2  { width:16.66666667%; }
  .gpCol-3  { width:25%; }
  .gpCol-4  { width:33.33333333%; }
  .gpCol-5  { width:41.66666667%; }
  .gpCol-6  { width:50%; }
  .gpCol-7  { width:58.33333333%; }
  .gpCol-8  { width:66.66666667%; }
  .gpCol-9  { width:75%; }
  .gpCol-10 { width:83.33333333%; }
  .gpCol-11 { width:91.66666667%; }
  .gpCol-12 { width:100%; }

}
5 years ago#7777

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

And here is my opinion about "mobile first".

Basically, building up a website with the most simple rendering in mind primarily (for mobiles/content is mostly seriialized) and then subsequently defining rules for more complex rendering (desktop/larger screens) - this idea is not bad.

As long as a website is consistently following this rule, mobile first it is indeed the better approach. But…

With gpEasy (and some other CMS as well) we have a slightly different situation: 
Since a website is not only layout but mostly content, CSS media queries will also have to deal with the content. And this is where mobile first may start causing headache.

Especially gpEasy allows WYSIWYG editing of almost every content. This editing is not done on a smartphone. So, even if we have mobile-first layout, we have "desktop first" content.

For example: People will sometimes insert arbitraty line breaks or paragraphs to achieve spacing, they will set images to float-left or -right and CKEditor itself will always add width and height attributes to images. All those interventions apply to the desktop rendering because it's the default view when editing.

Once we want such content to render decently on a smartphone, we will have to forcefully neutralize/overrule some of these "desktop centric" markup and inline styles via media queries. And this is where "mobile first" turns into "mobile-desktop-mobile" and your CSS will become a huge mess.

This is the main reason why I do not think "mobile first" when I build gpEasy themes.

Edited: 5 years ago#7778

Josh S.
2K Posts
280K Downloads
16 Themes
18 Plugins
It should probably be noted that bootstrap is mobile first
5 years ago#7786

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects

Yes, since ver 3 it is. And it's not always easy to make it behave exactly the way I want it to :-)
BTW by default bootstrap uses both @media (max-width:767px) {}  and @media (min-width:768px) {}  media queries.
So both versions of our latest grid are somehow BS compatible. Also the 15px gutters.

 

Edited: 5 years ago#7788

juergen
1.4K Posts
53.6K Downloads
16 Plugins
design, web development & visual effects
After a little soul-searching I just want to say that my personal sceptic attitude towards Bootstrap should not matter here at all - and I will support it's approach to responsive design in all my further contributions. Even though I rarely use HTML/CSS/JS frameworks myself, Bootstrap is certainly one of the the best and it's still going strong. Bundling it with gpEasy was without doubt a good decision.
5 years ago#7792

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register