<commit_before>/* Taken from https://github.com/Munawwar/flex-helper.
 * The difference between this file and the github file is that we add 'f-' prefix and '-<device>'
 * suffix to all CSS classes to achieve:
 * 1. mobile specific layouts. <device> follows naming convention of bootstrap. i.e xs, sm and md.
 * 2. avoid conflict with any other CSS classes.
 * 
 * This uses both the modern flexbox spec and 2012 flexbox spec (for IE 10 and Safari 7-8 support).
 * Read documentation (and some IE 10 issues to be aware of) at the github link.
 */

.generate-flex-helper(@prefix) {
  /*Stack child items vertically*/
  .f-vbox-@{prefix} {
    display: -webkit-flex; /*Safari 7-8*/
    display: -ms-flexbox; /*IE 10*/
    display: flex;

    /*Align children vetically*/
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;

    overflow: hidden; /*Prevent extending beyond boundaries*/
  }
  /*Stack child items horizontally*/
  .f-hbox-@{prefix} {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    /*Align children horizontally*/
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;

    overflow: hidden; /*Prevent extending beyond boundaries*/

    /*Wrap overflowing children*/
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  /*Stretch item along parent's main-axis*/
  .f-flex-@{prefix} {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  /*Stretch item along parent's cross-axis Overrides any cross-* class of parent*/
  .f-stretch-self-@{prefix} {
    align-self: stretch;
  }
  /*Center item along parent's cross-axis. Overrides any cross-* class of parent*/
  .f-center-self-@{prefix} {
    align-self: center;
  }

  /*Stack child items to the main-axis start*/
  .f-main-start-@{prefix} {
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  /*Stack child items to the cross-axis start*/
  .f-cross-start-@{prefix} {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    -ms-flex-line-pack: start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
  }
  /*Stack child items to the main-axis center*/
  .f-main-center-@{prefix} {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  /*Stack child items to the cross-axis center*/
  .f-cross-center-@{prefix} {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
  }
  /*Stack child items to the main-axis end.*/
  .f-main-end-@{prefix} {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  /*Stack child items to the cross-axis end.*/
  .f-cross-end-@{prefix} {
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;

    -ms-flex-line-pack: end;
    -webkit-align-content: flex-end;
    align-content: flex-end;
  }
  /*Stretch child items along the cross-axis*/
  .f-cross-stretch-@{prefix} {
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;

    -ms-flex-line-pack: stretch;
    -webkit-align-content: stretch;
    align-content: stretch;
  }

  /*Wrap items to next line on main-axis*/
  .f-wrap-@{prefix} {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

// For Mobile 
.generate-flex-helper(xs);

// For Tablets
@media (min-width: 768px) {
  .generate-flex-helper(sm);
}

// For Desktop
@media (min-width: 992px) {
  .generate-flex-helper(md);
}
<commit_msg>Generate mobile-first default CSS (Part 1).<commit_after>/* Taken from https://github.com/Munawwar/flex-helper.
 * The difference between this file and the github file is that we add 'f-' prefix and '-<device>'
 * suffix to all CSS classes to achieve:
 * 1. mobile specific layouts. <device> follows naming convention of bootstrap. i.e xs, sm and md.
 * 2. avoid conflict with any other CSS classes.
 * 
 * This uses both the modern flexbox spec and 2012 flexbox spec (for IE 10 and Safari 7-8 support).
 * Read documentation (and some IE 10 issues to be aware of) at the github link.
 */

.generate-flex-helper(@prefix) {
  /*Stack child items vertically*/
  .f-vbox@{prefix} {
    display: -webkit-flex; /*Safari 7-8*/
    display: -ms-flexbox; /*IE 10*/
    display: flex;

    /*Align children vetically*/
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;

    overflow: hidden; /*Prevent extending beyond boundaries*/
  }
  /*Stack child items horizontally*/
  .f-hbox@{prefix} {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    /*Align children horizontally*/
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;

    overflow: hidden; /*Prevent extending beyond boundaries*/

    /*Wrap overflowing children*/
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  /*Stretch item along parent's main-axis*/
  .f-flex@{prefix} {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  /*Stretch item along parent's cross-axis Overrides any cross-* class of parent*/
  .f-stretch-self@{prefix} {
    align-self: stretch;
  }
  /*Center item along parent's cross-axis. Overrides any cross-* class of parent*/
  .f-center-self@{prefix} {
    align-self: center;
  }

  /*Stack child items to the main-axis start*/
  .f-main-start@{prefix} {
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  /*Stack child items to the cross-axis start*/
  .f-cross-start@{prefix} {
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    -ms-flex-line-pack: start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
  }
  /*Stack child items to the main-axis center*/
  .f-main-center@{prefix} {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  /*Stack child items to the cross-axis center*/
  .f-cross-center@{prefix} {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
  }
  /*Stack child items to the main-axis end.*/
  .f-main-end@{prefix} {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  /*Stack child items to the cross-axis end.*/
  .f-cross-end@{prefix} {
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;

    -ms-flex-line-pack: end;
    -webkit-align-content: flex-end;
    align-content: flex-end;
  }
  /*Stretch child items along the cross-axis*/
  .f-cross-stretch@{prefix} {
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;

    -ms-flex-line-pack: stretch;
    -webkit-align-content: stretch;
    align-content: stretch;
  }

  /*Wrap items to next line on main-axis*/
  .f-wrap@{prefix} {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

// For Mobile 
.generate-flex-helper(~''); //Empty string
.generate-flex-helper(-xs);

// For Tablets
@media (min-width: 768px) {
  .generate-flex-helper(-sm);
}

// For Desktop
@media (min-width: 992px) {
  .generate-flex-helper(-md);
}

{'fraction_non_alphanumeric': 0.15048728009112772, 'fraction_numerical': 0.006454879129224149, 'mean_word_length': 2.665120593692022, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6463201', 'n_tokens_mistral': 2832, 'n_tokens_neox': 2678, 'n_words': 712}