You are here

Home » API reference » UIkit Components 8.2

uikit-view-grid.layout.css in UIkit Components 8.2

Same filename and directory in other branches
  1. 8.3 uikit_views/css/uikit-view-grid.layout.css
  2. 8 uikit_views/css/uikit-view-grid.layout.css

Macro arrangement of a web page, including any grid systems.

File

uikit_views/css/uikit-view-grid.layout.css
View source 
  1. /**

  2.  * @file

  3.  * Macro arrangement of a web page, including any grid systems.

  4.  */

  5. @media (min-width: 480px) and (max-width: 767px) {

  6.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-small-1-1>li:nth-child(n+2)>*,

  7.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-small-1-2>li:nth-child(n+3)>*,

  8.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-small-1-3>li:nth-child(n+4)>*,

  9.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-small-1-4>li:nth-child(n+5)>*,

  10.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-small-1-5>li:nth-child(n+6)>*,

  11.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-small-1-6>li:nth-child(n+7)>*,

  12.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-small-1-10>li:nth-child(n+11)>* {

  13.     border-top: 1px solid #ddd;

  14.     margin-top: 25px;

  15.     padding-top: 25px;

  16.   }

  17. }

  18. 

  19. @media (min-width: 768px) and (max-width: 959px) {

  20.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-medium-1-1>li:nth-child(n+2)>*,

  21.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-medium-1-2>li:nth-child(n+3)>*,

  22.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-medium-1-3>li:nth-child(n+4)>*,

  23.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-medium-1-4>li:nth-child(n+5)>*,

  24.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-medium-1-5>li:nth-child(n+6)>*,

  25.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-medium-1-6>li:nth-child(n+7)>*,

  26.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-medium-1-10>li:nth-child(n+11)>* {

  27.     border-top: 1px solid #ddd;

  28.     margin-top: 25px;

  29.     padding-top: 25px;

  30.   }

  31. }

  32. 

  33. @media (min-width: 960px) and (max-width: 1219px) {

  34.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-large-1-1>li:nth-child(n+2)>*,

  35.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-large-1-2>li:nth-child(n+3)>*,

  36.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-large-1-3>li:nth-child(n+4)>*,

  37.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-large-1-4>li:nth-child(n+5)>*,

  38.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-large-1-5>li:nth-child(n+6)>*,

  39.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-large-1-6>li:nth-child(n+7)>*,

  40.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-large-1-10>li:nth-child(n+11)>* {

  41.     border-top: 1px solid #ddd;

  42.     margin-top: 25px;

  43.     padding-top: 25px;

  44.   }

  45. }

  46. 

  47. @media (min-width: 1220px) {

  48.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-xlarge-1-1>li:nth-child(n+2)>*,

  49.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-xlarge-1-2>li:nth-child(n+3)>*,

  50.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-xlarge-1-3>li:nth-child(n+4)>*,

  51.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-xlarge-1-4>li:nth-child(n+5)>*,

  52.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-xlarge-1-5>li:nth-child(n+6)>*,

  53.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-xlarge-1-6>li:nth-child(n+7)>*,

  54.   .uikit-view-grid.uikit-view-grid-divider>.uk-grid-width-xlarge-1-10>li:nth-child(n+11)>* {

  55.     border-top: 1px solid #ddd;

  56.     margin-top: 25px;

  57.     padding-top: 25px;

  58.   }

  59. }