diff --git a/css/style.css b/css/style.css index 1fb392f..5053bf6 100644 --- a/css/style.css +++ b/css/style.css @@ -525,3 +525,34 @@ pre { margin: 0 6em; } +#divmultiplecolumns { + text-align: left; + border: 2px dashed whitesmoke; + border-bottom-style: none; + border-right-style: none; + min-height: 100px; + margin: 1em 3em 2em; + padding: 1em 0 1em; + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-width: 100px; + -moz-column-width: 100px; + column-width: 100px; + -webkit-column-gap: .1em; + -moz-column-gap: .1em; + column-gap: .1em; + -webkit-column-rule: .1em dashed gainsboro; + -moz-column-rule: .1em dashed gainsboro; + column-rule: .1em dashed gainsboro; +} +#divmultiplecolumns p { + text-align: left; +} +@media screen and (max-width: 768px){ + #divmultiplecolumns{ + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; +} + diff --git a/deploy b/deploy index 105d710..cdd7edb 100644 --- a/deploy +++ b/deploy @@ -10,6 +10,7 @@ mkdir -pv ../tew_0x00/public rsync -av index.html scripts css media \ roundedcorners backgroundgradient shadows \ 2Dtransforms 3Dtransforms transitions animations \ +multiplecolumns \ ../tew_0x00/public if [ $USER = $USR ]; then diff --git a/index.html b/index.html index 6fcdf5a..ff73303 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,7 @@
  • 3D transforms
  • transitions
  • animations
    • -
  • multiple columns
    • +
  • multiple columns
  • box sizing
  • flexbox
    • diff --git a/multiplecolumns/index.html b/multiplecolumns/index.html new file mode 100644 index 0000000..328fd5b --- /dev/null +++ b/multiplecolumns/index.html @@ -0,0 +1,71 @@ + + + + + + + + + multiple columns - tew-0x00 + + + + + + + +
    +
    + +
    +
    +

    multiple columns

    +
    +

    Utilizing large screen estate with the help of CSS multiple columns layout allow us to increase the eye comfort of the reader by splitting longer lines of text into easier-to-read shorter lines.
    The other option would be using shorter lines and not utilizing the screen fully, which might come into play in mobile devices with screens small enough to fit exactly one short column on them.

    +


    Below is a div splitting text into 2 columns on screens larger than 768px (usually desktop or laptop screens), melding back into a single-column layout on smaller (mobile) screens.
    The text is justified left in this case because I like it more that way in this kind of layout. I also used a column divider called column-rule in CSS to embelish the column visual a little.

    +
    +

    Temporibus officiis sit quo id. Excepturi eum sed sint quo aperiam accusantium quam nemo. Quibusdam non quo sed sunt nihil dolore aliquid quos.

    +

    Quos et ducimus distinctio similique laudantium sed. Enim nobis quasi sit sapiente qui nihil. Dolore quibusdam rem libero facilis veritatis aut animi quidem. Officia hic sunt quis et sed laudantium.

    +

    Et id deserunt corrupti. Voluptatem nihil at voluptatem et tempore exercitationem. Doloremque maiores dicta atque. Expedita laborum quia placeat.

    +
    +
    + 
    #divmultiplecolumns {
+    text-align: left;
+    border: 2px dashed whitesmoke;
+    border-bottom-style: none;
+    border-right-style: none;
+    min-height: 100px;
+    margin: 1em 3em 2em;
+    padding: 1em 0 1em;
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    column-count: 2;
+    -webkit-column-width: 100px;
+    -moz-column-width: 100px;
+    column-width: 100px;
+    -webkit-column-gap: .1em;
+    -moz-column-gap: .1em;
+    column-gap: .1em;
+    -webkit-column-rule: .1em dashed gainsboro;
+    -moz-column-rule: .1em dashed gainsboro;
+    column-rule: 1px dashed gainsboro;
+}
+#divmultiplecolumns p {
+    text-align: left;
+}
+@media screen and (max-width: 768px){
+    #divmultiplecolumns{
+        -webkit-column-count: 1;
+        -moz-column-count: 1;
+        column-count: 1;
+}
    +
    +
    + + +