1.. 2 This file is part of m.css. 3 4 Copyright © 2017, 2018, 2019 Vladimír Vondruš <mosra@centrum.cz> 5 6 Permission is hereby granted, free of charge, to any person obtaining a 7 copy of this software and associated documentation files (the "Software"), 8 to deal in the Software without restriction, including without limitation 9 the rights to use, copy, modify, merge, publish, distribute, sublicense, 10 and/or sell copies of the Software, and to permit persons to whom the 11 Software is furnished to do so, subject to the following conditions: 12 13 The above copyright notice and this permission notice shall be included 14 in all copies or substantial portions of the Software. 15 16 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL 19 THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 22 DEALINGS IN THE SOFTWARE. 23.. 24 25CSS 26### 27 28.. role:: css(code) 29 :language: css 30.. role:: html(code) 31 :language: html 32 33The CSS style is the essence of m.css. It makes use of HTML5 tags as much as 34possible to avoid redundant classes. Contrary to other popular frameworks, all 35custom CSS classes and IDs are prefixed with ``m-`` to avoid conflicts with 3rd 36party styles. All sizes, paddings and border widths are specified using ``rem`` 37units, relative to base page font size; :css:`box-sizing: border-box` is 38applied to all elements by default. 39 40`Quick start`_ 41============== 42 43To make full advantage of m.css, you need the following files written in plain 44CSS. Download them below or :gh:`grab the whole Git repository <mosra/m.css>`: 45 46- :gh:`m-grid.css <mosra/m.css$master/css/m-grid.css>` with optional 47 :gh:`m-debug.css <mosra/m.css$master/css/m-debug.css>` for responsiveness 48- :gh:`m-components.css <mosra/m.css$master/css/m-components.css>` for 49 typography and basic components 50- :gh:`m-layout.css <mosra/m.css$master/css/m-layout.css>` for overall page 51 and article layout 52- :gh:`m-theme-dark.css <mosra/m.css$master/css/m-theme-dark.css>` or 53 :gh:`m-theme-light.css <mosra/m.css$master/css/m-theme-light.css>` for 54 theme setup 55- :gh:`m-dark.css <mosra/m.css$master/css/m-dark.css>` or 56 :gh:`m-light.css <mosra/m.css$master/css/m-light.css>` that :css:`@import` 57 the above files for a convenient single-line referencing 58 59Scroll below for a detailed functionality description of each file. In addition 60to the above, if you want to present highlighted code snippets (or colored 61terminal output) on your website, there's also a builtin style for 62`Pygments <http://pygments.org/>`_, matching m.css themes: 63 64- :gh:`pygments-dark.css <mosra/m.css$master/css/pygments-dark.css>`, 65 generated from :gh:`pygments-dark.py <mosra/m.css$master/css/pygments-dark.py>` 66- :gh:`pygments-console.css <mosra/m.css$master/css/pygments-console.css>`, 67 generated from :gh:`pygments-dark.py <mosra/m.css$master/css/pygments-console.py>` 68 69Once you have the files, reference them from your HTML markup. The top-level 70``m-dark.css`` / ``m-light.css`` file includes the others via a CSS 71:css:`@import` statement, so you don't need to link all of them. The dark theme 72uses the `Source Sans Pro <https://fonts.google.com/specimen/Source+Sans+Pro>`_ 73font for copy and `Source Code Pro <https://fonts.google.com/specimen/Source+Code+Pro>`_ 74font for pre-formatted text and code, which you need to reference as well. See 75the `Themes <{filename}/css/themes.rst>`_ page for requirements of other 76themes. 77 78Besides that, in order to have devices recognize your website properly as 79responsive and not zoom it all the way out to an unreadable mess, don't forget 80to include a proper :html:`<meta>` tag. The HTML5 DOCTYPE is also required. 81 82.. code:: html 83 84 <!DOCTYPE html> 85 <html> 86 <head> 87 <link rel="stylesheet" href="m-dark.css" /> 88 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i,600%7CSource+Sans+Pro:400,400i,600&subset=latin-ext" /> 89 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 90 </head> 91 ... 92 </html> 93 94.. block-warning:: Browser compatibility 95 96 Note that some older browsers have problems with CSS variables and 97 :css:`@import` statements. Because of that, the builtin themes provide 98 a ``*.compiled.css`` versions that are *post*\ processed without CSS 99 variables or :css:`@import` statements. The compiled version includes also 100 the code and console Pygments style, all combined in one file: 101 102 - :gh:`m-dark.compiled.css <mosra/m.css$master/css/m-dark.compiled.css>` 103 (:filesize:`{static}/../css/m-dark.compiled.css`, 104 :filesize-gz:`{static}/../css/m-dark.compiled.css` compressed) 105 - :gh:`m-light.compiled.css <mosra/m.css$master/css/m-light.compiled.css>` 106 (:filesize:`{static}/../css/m-light.compiled.css`, 107 :filesize-gz:`{static}/../css/m-light.compiled.css` compressed) 108 109 I recommend using the original files for development and switching to the 110 compiled versions when publishing the website. 111 112.. block-info:: Tip: server-side compression 113 114 Even though the CSS files are already quite small, enabling server-side 115 compression will make your website load even faster. If you have an Apache 116 server running, enabling the compression is just a matter of adding the 117 following to your ``.htaccess`` file: 118 119 .. code:: apache 120 121 AddOutputFilter DEFLATE html css js 122 123With this, you can start using the framework right away. Click the headings 124below to get to know more. 125 126`Grid system » <{filename}/css/grid.rst>`_ 127========================================== 128 129The ``m-grid.css`` file provides a 12-column layout, inspired by 130`Bootstrap <https://getbootstrap.com>`_. It provides a simple, easy-to-use 131solution for modern responsive web development. It comes together with 132``m-debug.css`` that helps debugging the most common mistakes in grid layouts. 133 134`Typography » <{filename}/css/typography.rst>`_ 135=============================================== 136 137Sane default style for body text, paragraphs, lists, links, headings and other 138common typographical elements, provided by the ``m-components.css`` file. 139 140`Components » <{filename}/css/components.rst>`_ 141=============================================== 142 143The ``m-components.css`` file also contains styles for visual elements that add 144more structure to your content. From simple notes and topic blocks, tables, 145images or figures to complex elements like code snippets, math formulas or 146image grid. 147 148`Page layout » <{filename}/css/page-layout.rst>`_ 149================================================= 150 151In ``m-layout.css`` there's a styling for the whole page including navigation 152--- header and footer, section headings, article styling with sidebar, tag 153cloud, active section highlighting and more. 154 155`Themes » <{filename}/css/themes.rst>`_ 156======================================= 157 158Finally, ``m-theme-dark.css`` and ``m-theme-light.css`` use CSS variables to 159achieve easy theming. Two builtin themes, used by the author himself on a bunch 160of websites to guarantee that everything fits well together. 161