Issue 5723 - Implement new abp.org content style guide

static/css/defaults.css

 /*!
  * This file is part of website-defaults
  * Copyright (C) 2016-present eyeo GmbH
  *
  * website-defaults is free software: you can redistribute it and/or
  * modify it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * website-defaults is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.

[ire, 2017/10/09 12:28:48]

The repeated licence headers in this file should probably be removed. 

Related - I think the licence headers for partial files in website-defaults
should be done with `//` comments so they don't show up on the generated CSS.
The regular comment can exist on the main file that imports all the other files.

[juliandoucette, 2017/10/09 23:28:53]

Agreed.

  */
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-present eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
- * Variables

[ire, 2017/10/09 12:28:48]

Again, the comments for the variables file in particular should be `//` style so
they don't show up on any generated CSS files.

(We should created a separate issue for this of course)

- *******************************************************************************
- * ~ WARNING ~ DO NOT EDIT THIS FILE!
- * Set variables within project specfic SCSS before including website defaults.
- *******************************************************************************
- * - Brand colors
- * - Fonts
- * - Spacing
- * - Breakpoints
- ******************************************************************************/
-/* Brand colors
- ******************************************************************************/
-/* Primary - The most widely used across all screens and components. */
-/* Secondary - Used to indicate a related action or information. */
-/* Accent - Used for action buttons and interactive elements. */
-/* Error - Used for error messages and warnings. */
-/* Fonts
- ******************************************************************************/
-/* Spacing
- ******************************************************************************/
-/* Breakpoints
- ******************************************************************************/
-/* Container widths
- ******************************************************************************/
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-present eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
+
+/******************************************************************************
  * CSS Reset
- ******************************************************************************/
+ *****************************************************************************/
+
 /* Reset margins, paddings, and font globally */
 html, body,
 h1, h2, h3, h4, h5, h6,
 a, p, span,
 em, small, strong, sub, sup,
 strike, s, mark, del, ins,
 abbr, dfn,
 blockquote, q, cite,
 code, pre,
 kbd, samp, var, output, ruby,
 ol, ul, li, dl, dt, dd,
 div, section, article,
 main, aside, nav,
 header, hgroup, footer,
 img, figure, figcaption,
 address, time,
 audio, video,
 canvas, object, iframe, embed,
 details, summary,
 fieldset, form, label, legend,
 table, caption,
 tbody, tfoot, thead,
 tr, th, td {

[ire, 2017/10/09 12:28:48]

Does our coding style guide apply to "generated" CSS files? Does this file count
as "generated"?

[juliandoucette, 2017/10/09 23:28:53]

No. Yes. 

Or, at least, this can be addressed separately.

[ire, 2017/10/10 07:48:44]

Alright :)

   margin: 0px;
   padding: 0px;
   border: 0px;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline; }
 
 /* Add the correct display in IE 9-. */
 article,
 aside,
@@ skipping 74 matching lines @@
 img {
   /* Make fixed width images responsive */
   max-width: 100%;
   /* Remove the border on images inside links in IE 10-. */
   border-style: none; }
 
 /* Set correct display for hidden attribute in IE 10-  */
 [hidden] {
   display: none; }
 
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-present eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
+/******************************************************************************
  * Base styles
- ******************************************************************************/
+ *****************************************************************************/
+
 html {
   color: #212121;
   background-color: #fff;
   font-family: sans-serif;
   line-height: 1.5; }
 
 /**
  * Stretch content full-width
  */
 .full-width {
@@ skipping 11 matching lines @@
   padding: 0px 1em; }
 
 @media (min-width: 768px) {
   .container {
     width: 720px; } }
 
 @media (min-width: 1200px) {
   .container {
     width: 1170px; } }
 
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-present eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
+/******************************************************************************
  * Content styles
- *******************************************************************************
- * 1. Document
- * 2. Headings
- * 3. Body content
- ******************************************************************************/
-.content {
-  /* Document
-  ****************************************************************************/
-  /* Headings
-  ****************************************************************************/
-  /* Body content
-  ****************************************************************************/ }
+ *****************************************************************************/
+
+.content {}
   .content p,
   .content ol,
   .content ul,
   .content dl,
   .content pre,
   .content blockquote {
     /* Set consistent margins (opinionated) */
     margin: 1em 0em; }
   .content h1,
   .content h2,
@@ skipping 50 matching lines @@
     /* prevent double spacing lists */
     margin: 0em; }
   .content ol ol {
     list-style-type: lower-alpha; }
   .content dt {
     /* undo browser default (opinionated)*/
     font-weight: 600; }
   .content dd {
     margin: 0.25em 0em 1em 0em; }
 
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-present eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
+/******************************************************************************
  * Grid component
- ******************************************************************************/
+ *****************************************************************************/
+
 /**
  * - .row contains one or more .column(s)
  * - .row clears .column(s)
  * - .row negates the left & right padding of it's left-most & right-most
  *   .column(s) while preserving consistent padding between .column(s)
  */
 .row {
   margin: 0px -1em; }
 
 .row:after {
@@ skipping 31 matching lines @@
 @media (min-width: 992px) {
   .one-third {
     width: 33.333333%; }
   .two-thirds {
     width: 66.666667%; }
   .one-fourth {
     width: 25%; }
   .three-fourths {
     width: 75%; } }
 
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-2017 eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
+/******************************************************************************
  * Basic forms fields
- *******************************************************************************
- * 1. Reset
- ******************************************************************************/
-/* 1. Reset
- ******************************************************************************/
+ *****************************************************************************/
+
 /* Change the font styles in all browsers (opinionated). */
 input,
 optgroup,
 select,
 textarea {
   font: inherit; }
 
 /* Show the overflow in IE and Edge */
 input {
   overflow: visible; }
@@ skipping 14 matching lines @@
 
 /* Remove the default vertical scrollbar in IE. */
 textarea {
   overflow: auto; }
 
 /* Remove the padding in IE 10-. */
 [type="checkbox"],
 [type="radio"] {
   padding: 0px; }
 
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-2017 eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
+/******************************************************************************
  * Adanced forms fields
- *******************************************************************************
- * 1. Reset
- ******************************************************************************/
-/* 1. Reset
- ******************************************************************************/
+ ******************************************************************************
+
 /* Correct the cursor style of increment and decrement buttons in Chrome. */
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto; }
 
 /* Use `-webkit-appearance: none` to reset inputs in iOS Safari */
 [type="date"],
 [type="time"],
 [type="datetime"],
 [type="datetime-local"],
 [type="month"],
 [type="week"],
 [type="search"],
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none; }
 
 [type="search"] {
   outline-offset: -2px; }
 
-/*!
- * This file is part of website-defaults
- * Copyright (C) 2016-2017 eyeo GmbH
- *
- * website-defaults is free software: you can redistribute it and/or
- * modify it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * website-defaults is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
- */
-/*******************************************************************************
+/******************************************************************************
  * Buttons
- *******************************************************************************
- * 1. Reset
- ******************************************************************************/
-/* 1. Reset
- ******************************************************************************/
+ *****************************************************************************/
+
 button {
   margin: 0px;
   font: inherit;
   /* Show the overflow in IE and Edge */
   overflow: visible;
   /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
   text-transform: none; }
 
 /**
  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@@ skipping 13 matching lines @@
 [type="submit"]::-moz-focus-inner {
   padding: 0px;
   border-style: none; }
 
 /* Restore the focus styles unset by the previous rule. */
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText; }