├── .gitignore
├── LICENSE
├── README.md
├── _layout.jade
├── _site_variables.sass
├── _variables.sass
├── css
    ├── funcssion.sass
    └── specific
    │   ├── _home.sass
    │   └── _site.sass
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── funcssion-extras.sass
├── funcssion-min.sass
├── img
    └── logo.png
├── index.jade
├── main.sass
└── src
    ├── _utils.sass
    ├── core
        ├── _borders.sass
        ├── _colors.sass
        ├── _displaying.sass
        ├── _grid.sass
        ├── _misc.sass
        ├── _positioning.sass
        ├── _sizing.sass
        ├── _spacing.sass
        └── _text.sass
    └── extras
        ├── _buttons.sass
        ├── _grid_responsive.sass
        └── _hidenshow.sass


/.gitignore:
--------------------------------------------------------------------------------
1 | www


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Javier Santiago Lozano
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # funcssion
 2 | 
 3 | _The atomic CSS library._
 4 | 
 5 | **funcssion** is a set of _really simple_ CSS classes inspired by the philosophy behind [pure functions](https://en.wikipedia.org/wiki/Pure_function).
 6 | This basically means, they _attempt_ to avoid side-effects.
 7 | 
 8 | Why _attempt_ you might ask? Well, because of the very nature of CSS, adding up properties or complex classes to an element, usually does not work as expected.
 9 | 
10 | Use of **funcssion** on top of other CSS libraries/frameworks is totally possible and even encouraged.
11 | 
12 | Whether you're an experienced CSS coder or a total beginner, **funcssion** is always a good choice!
13 | 
14 | ## Use it!
15 | **v0.1 is out!** Minified CSS file is [available here](http://www.funcssion.com/css/funcssion.css) (3.7kB gzipped)<br/>
16 | Documentation is available at **[www.funcssion.com](http://www.funcssion.com)**
17 | 
18 | ## TODOs
19 | - Request **funcssion** to be added to [cdnjs](https://cdnjs.com/)
20 | - More _granular_ grid system? (Depending on screen breakpoints, like Bootstrap sm- md- etc.)
21 | 
22 | ## Additional comments
23 | This is a work in progress! Contributions (forks, issues, etc.) are more than welcome :)


--------------------------------------------------------------------------------
/_layout.jade:
--------------------------------------------------------------------------------
 1 | doctype
 2 | html
 3 |   head
 4 |     title funcssion - The atomic CSS library
 5 |     meta(name="viewport" content="width=device-width, initial-scale=1")
 6 |     link(rel='stylesheet' href='/main.css')
 7 |     link(rel="shortcut icon",type="image/x-icon",href="/favicon.ico")
 8 |     link(rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32")
 9 |     link(rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16")
10 |     script(src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js")
11 |     script.
12 |       hljs.initHighlightingOnLoad();
13 |       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
14 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
15 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
16 |       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
17 |       ga('create', 'UA-82391709-1', 'auto');
18 |       ga('send', 'pageview');
19 |     script(async,defer,src="https://buttons.github.io/buttons.js")
20 |   body.m0.pt0.ph0.pb4.ff-system.fw300.cl-text
21 |     != yield
22 | 


--------------------------------------------------------------------------------
/_site_variables.sass:
--------------------------------------------------------------------------------
1 | // Colors
2 | $colorPrimary: #00b8ff
3 | $colorSecondary: #ff3add


--------------------------------------------------------------------------------
/_variables.sass:
--------------------------------------------------------------------------------
 1 | // Color
 2 | $colorText: #888
 3 | $colorTitle: #333
 4 | $colorContrast: white
 5 | // Font
 6 | $headingsMultiplier: 3.14rem * 0.8
 7 | // Width breakpoints
 8 | $mobileWidth: 480px
 9 | $tabletWidth: 768px
10 | $desktopWidth: 992px
11 | $wideWidth: 1200px
12 | 


--------------------------------------------------------------------------------
/css/funcssion.sass:
--------------------------------------------------------------------------------
 1 | @import "variables"
 2 | 
 3 | // Mixins and functions
 4 | @import "src/utils"
 5 | 
 6 | // Core classes
 7 | @import "src/core/borders"
 8 | @import "src/core/displaying"
 9 | @import "src/core/grid"
10 | @import "src/core/misc"
11 | @import "src/core/positioning"
12 | @import "src/core/spacing"
13 | @import "src/core/sizing"
14 | @import "src/core/text"
15 | @import "src/core/colors"


--------------------------------------------------------------------------------
/css/specific/_home.sass:
--------------------------------------------------------------------------------
1 | .logo-wrapper
2 |   background: #fafafa
3 | img.logo
4 |   width: 100%
5 |   max-width: 112px


--------------------------------------------------------------------------------
/css/specific/_site.sass:
--------------------------------------------------------------------------------
  1 | // Super minimal CSS reset
  2 | 
  3 | *, *:before, *:after
  4 |   box-sizing: border-box
  5 | 
  6 | input, button, select, textarea
  7 |   font-family: inherit
  8 | 
  9 | img
 10 |   vertical-align: middle
 11 |   max-width: 100%
 12 |   height: auto
 13 | 
 14 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
 15 |   color: $colorTitle
 16 |   font-weight: 600
 17 | 
 18 | .clearfix
 19 |   @media (max-width: $mobileWidth)
 20 |     &.flex
 21 |       display: block
 22 | 
 23 | // Text colors
 24 | .cl-primary, .cl-primary:hover
 25 |   color: $colorPrimary
 26 | .cl-secondary, .cl-secondary:hover
 27 |   color: $colorSecondary
 28 | 
 29 | // Background colors
 30 | .bg-primary
 31 |   background: $colorPrimary
 32 | .bg-secondary
 33 |   background: $colorSecondary
 34 | 
 35 | // Links
 36 | a
 37 |   color: $colorPrimary
 38 |   text-decoration: none
 39 |   &:hover, &:focus
 40 |     text-decoration: none
 41 |     color: lighten($colorPrimary,8%)
 42 |     cursor: pointer
 43 | 
 44 | // Buttons
 45 | .btn-primary
 46 |   background-color: $colorPrimary
 47 | .btn-secondary
 48 |   background-color: $colorSecondary
 49 | 
 50 | pre.code
 51 |   background: rgba(black,0.025)
 52 |   border-left: 3px solid $colorSecondary
 53 |   padding: 0.5rem 0.8rem
 54 |   code
 55 |     background: transparent
 56 | 
 57 | table.shorthand
 58 |   table-layout: fixed
 59 |   width: 100%
 60 |   td:first-child, th:first-child
 61 |     width: 28%
 62 |     padding: 0.4rem 0.2rem
 63 |   // td+td
 64 |   td
 65 |     border-bottom: 1px solid rgba(black,0.05)
 66 | 
 67 | p
 68 |   line-height: 1.25em
 69 |   strong
 70 |     font-weight: 600
 71 |     color: $colorTitle
 72 | 
 73 | ul
 74 |   strong
 75 |     color: $colorTitle
 76 | 
 77 | // Highlighting
 78 | .hljs
 79 |   display: block
 80 |   overflow-x: auto
 81 |   padding: 0.5em
 82 |   background: #FFFFFF
 83 |   color: #434f54
 84 | 
 85 | .hljs-subst
 86 |   color: #434f54
 87 | 
 88 | .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-doctag, .hljs-name
 89 |   color: #00979D
 90 | 
 91 | .hljs-built_in, .hljs-literal, .hljs-bullet, .hljs-code, .hljs-addition
 92 |   color: #D35400
 93 | 
 94 | .hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo
 95 |   color: #00979D
 96 | 
 97 | .hljs-type, .hljs-string, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion
 98 |   color: #005C5F
 99 | 
100 | .hljs-title, .hljs-section
101 |   color: #880000
102 |   font-weight: bold
103 | 
104 | .hljs-comment
105 |   color: rgba(149, 165, 166, 0.8)
106 | 
107 | .hljs-meta-keyword
108 |   color: #728E00
109 | 
110 | .hljs-meta
111 |   color: #728E00
112 |   color: #434f54
113 | 
114 | .hljs-emphasis
115 |   font-style: italic
116 | 
117 | .hljs-strong
118 |   font-weight: bold
119 | 
120 | .hljs-function
121 |   color: #728E00
122 | 
123 | .hljs-number
124 |   color: #8A7B52


--------------------------------------------------------------------------------
/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasalo/funcssion/c3feafe541633f513aeeeeb8016fbf1a83208c2f/favicon-16x16.png


--------------------------------------------------------------------------------
/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasalo/funcssion/c3feafe541633f513aeeeeb8016fbf1a83208c2f/favicon-32x32.png


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasalo/funcssion/c3feafe541633f513aeeeeb8016fbf1a83208c2f/favicon.ico


--------------------------------------------------------------------------------
/funcssion-extras.sass:
--------------------------------------------------------------------------------
1 | @import "css/funcssion"
2 | // Extras
3 | @import "src/extras/buttons"
4 | @import "src/extras/grid_responsive"
5 | @import "src/extras/hidenshow"


--------------------------------------------------------------------------------
/funcssion-min.sass:
--------------------------------------------------------------------------------
1 | @import "css/funcssion"


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasalo/funcssion/c3feafe541633f513aeeeeb8016fbf1a83208c2f/img/logo.png


--------------------------------------------------------------------------------
/index.jade:
--------------------------------------------------------------------------------
  1 | .container.mh-auto
  2 |   img.logo.rounded.pt4(src="/img/logo.png")
  3 |   .h1.fs3.mt05.cl-secondary.fw600 fun
  4 |     span.cl-primary css
  5 |     | ion
  6 |   .fs14.cl-text.fw300.mt0.mb15.op08 The atomic CSS library
  7 | .container.mh-auto
  8 |   .clearfix.lh12em.cl-text.ta-justify.fs11.flex.flex-items-center
  9 |     .col-6.pv3
 10 |       p
 11 |         strong.fw500.cl-title funcssion
 12 |         |  is a set of <em>really simple</em> CSS classes, with a single purpose, inspired by the philosophy behind 
 13 |         a(href='https://en.wikipedia.org/wiki/Pure_function') pure functions
 14 |         | .
 15 |       p This basically means, they <em>attempt</em> to avoid side-effects.
 16 |       p It's not a full-fledged CSS framework, but rather a very handy set of classes that'll help you prototype really fast and understand what your components look like just by looking at your HTML code, not browsing through endless, repetitive CSS files and classes.
 17 |     .col-6
 18 |       .mt1.mb2.ta-center.fs1.fw300
 19 |         a.btn.btn-secondary.fw300(target='_blank',href='/css/funcssion.css') Get 
 20 |           span.fw600 v0.1 here
 21 |         .fs08.cl-text 4.4kB gzipped
 22 |         br
 23 |         br
 24 |         a(class="github-button" href="https://github.com/jasalo/funcssion" data-style="mega" data-count-href="/jasalo/funcssion/stargazers" data-count-api="/repos/jasalo/funcssion#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star jasalo/funcssion on GitHub") Star
 25 |   .mv4
 26 |   .h2 Use it
 27 |   p Simply include the following tag in your HTML document to include the latest version
 28 |     strong.cl-title *
 29 |     | :
 30 |   pre.code
 31 |     code.html.
 32 |       &lt;link href="https://funcssion.com/css/funcssion.css" rel="stylesheet"&gt;
 33 |   .fs07.cl-text
 34 |     strong *
 35 |     |  A CDNJS link is preferred but not yet available.
 36 |   .mv4
 37 |   .h2 How It Works
 38 |   p
 39 |     strong funcssion
 40 |     |  does not perform any kind of reset over HTML elements. Its use, together with other CSS frameworks/libraries or code of your own, is <em>non-invasive</em>, thus perfectly viable. All classes set 
 41 |     strong just one or two properties
 42 |     | . Most just set one.
 43 |   p <em>Most</em> classes are named using a <strong>prefix</strong> and a <em>mix</em> of the following: an <strong>orientation</strong>, a <strong>dash</strong> (
 44 |     span.ff-monospace -
 45 |     | ), a possible <strong>value</strong> of the property or a <strong>suffix</strong> (unit). Some examples are:
 46 |   pre.code
 47 |     code.css.
 48 |       .va-middle {
 49 |         vertical-align: middle;
 50 |       }
 51 | 
 52 |       .pr1 {
 53 |         padding-right: 1rem;
 54 |       }
 55 | 
 56 |       .mv12 {
 57 |         margin-top: 1.2rem;
 58 |         margin-bottom: 1.2rem;
 59 |       }
 60 |   p Other classes are simply values of properties that are unambiguous and pretty common in CSS, such as:
 61 |   pre.code
 62 |     code.css.
 63 |       .inline-block {
 64 |         display: inline-block;
 65 |       }
 66 | 
 67 |       .absolute {
 68 |         position: absolute;
 69 |       }
 70 |   .mv4
 71 |   .h2 The Rules
 72 |   p Just keep these in mind and it'll help you memorize the class names, or intuitively deduce them.
 73 |   ul.cl-text
 74 |     li.pv01 Prefixes are usually written using the initials of a property name. i.e.: 
 75 |       strong.ff-monospace.fs13em ta
 76 |       |  means 
 77 |       strong.ff-monospace.fs13em text-align
 78 |       | ; 
 79 |       strong.ff-monospace.fs13em mb
 80 |       |  means 
 81 |       strong.ff-monospace.fs13em margin-bottom
 82 |       | , etc.
 83 |     li.pv01 When not specified, default unit is 
 84 |       strong.ff-monospace.fs13em rem
 85 |     li.pv01
 86 |       |  Other possible <strong>suffixes</strong> (units) are 
 87 |       strong.ff-monospace.fs13em em
 88 |       | , 
 89 |       strong.ff-monospace.fs13em vh
 90 |       |  and 
 91 |       strong.ff-monospace.fs13em pct
 92 |       |   (%)
 93 |     li.pv01 Classes whose value is NOT a number, <strong>use a dash(-)</strong>
 94 |     li.pv01 Classes whose value is a number, <strong>do not use a dash(-)</strong>. Except for 
 95 |       a.fw600.cl-primary(href='#grid') Grid
 96 |       |  classes
 97 |     li.pv01 Numbers are usually decimals under 4, whose decimal mark is ignored. i.e.: 
 98 |       strong.ff-monospace.fs13 .mt15
 99 |       |  means 
100 |       strong.ff-monospace.fs13 margin-top
101 |       |  of 
102 |       strong.ff-monospace.fs13 1.5rem
103 |   .mv4
104 |   .h2 Quick Reference
105 |   p Below is all you need to understand and use <strong>funcssion</strong>:
106 |   .clearfix#spacing
107 |     .mt3.mb2.cl-secondary &mdash;
108 |     a.h2.cl-primary.mt1.mb15(href='#spacing') Spacing
109 |     p In 
110 |       strong.ff-monospace.fs12 margin
111 |       |  and 
112 |       strong.ff-monospace.fs12 padding
113 |       | :
114 |     ul
115 |       li
116 |         strong.ff-monospace.fs12 rem
117 |         |  units range from 
118 |         strong 0 ~ 2
119 |         |  every 
120 |         strong .1
121 |         |  and 
122 |         strong 2.5 ~ 4
123 |         |  every 
124 |         strong .5
125 |       li
126 |         strong.ff-monospace.fs12 em
127 |         |  units range from 
128 |         strong 0.1 ~ 1
129 |         |  every 
130 |         strong .1
131 |     .clearfix.mt25
132 |     .col-6.pr2
133 |       .h4.pb03 Numeric
134 |       table.shorthand.w100pct
135 |         tr
136 |           th.fs09.ta-left.cl-secondary Prefix
137 |           th.fs09.ta-left.cl-secondary Properties
138 |         - var pfxs = []
139 |         - pfxs.push(["m","margin"])
140 |         - pfxs.push(["mt","margin-top"])
141 |         - pfxs.push(["mr","margin-right"])
142 |         - pfxs.push(["mb","margin-bottom"])
143 |         - pfxs.push(["ml","margin-left"])
144 |         - pfxs.push(["mv","margin-top margin-bottom"])
145 |         - pfxs.push(["mh","margin-left margin-right"])
146 |         - pfxs.push(["p","padding"])
147 |         - pfxs.push(["pt","padding-top"])
148 |         - pfxs.push(["pr","padding-right"])
149 |         - pfxs.push(["pb","padding-bottom"])
150 |         - pfxs.push(["pl","padding-left"])
151 |         - pfxs.push(["pv","padding-top padding-bottom"])
152 |         - pfxs.push(["ph","padding-left padding-right"])
153 |         each p in pfxs
154 |           tr.fs11
155 |             td.ff-monospace.fw600.cl-title .#{p[0]}
156 |             td.ff-monospace.fs11
157 |               pre.m0
158 |                 code.css.
159 |                   #{p[1]}
160 |     .col-6
161 |       .h4.pb06.cl-text Examples
162 |       pre.code
163 |         code.css.
164 |           .mv14 {
165 |             margin-top: 1.4rem;
166 |             margin-bottom: 1.4rem;
167 |           }
168 |           .mh2 {
169 |             margin-left: 2rem;
170 |             margin-right: 2rem;
171 |           }
172 |           .m3 {
173 |             margin: 3rem;
174 |           }
175 |           .m0 {
176 |             margin: 0;
177 |           }
178 | 
179 |           .p0 {
180 |             padding: 0;
181 |           }
182 |           .pt08 {
183 |             padding-top: 0.8rem;
184 |           }
185 |           .p25 {
186 |             padding: 2.5rem;
187 |           }
188 |           .p4 {
189 |             padding: 4rem;
190 |           }
191 |   .clearfix.mt2#text
192 |     .mt3.mb2.cl-secondary &mdash;
193 |     a.block.h2.cl-primary.mt2.mb15(href='#text') Text
194 |     p In 
195 |       strong.ff-monospace.fs12 font-size
196 |       |  and 
197 |       strong.ff-monospace.fs12 line-height
198 |       | :
199 |     ul
200 |       li
201 |         strong.ff-monospace.fs12 rem
202 |         |  units range from 
203 |         strong 0.4 ~ 2
204 |         |  every 
205 |         strong .1
206 |         |  and 
207 |         strong 2.5 ~ 4
208 |         |  every 
209 |         strong .5
210 |       li
211 |         strong.ff-monospace.fs12 em
212 |         |  units range from 
213 |         strong 0.4 ~ 2
214 |         |  every 
215 |         strong .1
216 |     .col-6.pr2
217 |       .clearfix.mt25
218 |       .h4.pb03 Font Size &amp; Line Height
219 |       table.shorthand.w100pct
220 |         tr.fs11
221 |           th.fs09.ta-left.cl-secondary Prefix
222 |           th.fs09.ta-left.cl-secondary Property
223 |         - var pfxs = []
224 |         - pfxs.push(["fs","font-size"])
225 |         - pfxs.push(["lh","line-height"])
226 |         each p in pfxs
227 |           tr.fs11
228 |             td.ff-monospace.fw600.cl-title .#{p[0]}
229 |             td.ff-monospace.fs11= p[1]
230 |     .col-6
231 |       .clearfix.mt25
232 |       .h4.pb06.cl-text Examples
233 |       pre.code
234 |         code.css.
235 |           .fs11 {
236 |             font-size: 1.1rem;
237 |           }
238 |           .fs09em {
239 |             font-size: 0.9em;
240 |           }
241 | 
242 |           .lh15 {
243 |             line-height: 1.5rem;
244 |           }
245 |           .lh2em {
246 |             line-height: 2em;
247 |           }
248 |   .clearfix.mt25
249 |     .h4.pb03 Headings
250 |     p Heading classes are intended to be "similar" to the tags themselves, so that 
251 |       strong.ff-monospace.fs12 &lt;h1&gt;
252 |       |  and 
253 |       strong.ff-monospace.fs12 &lt;div class="h1"&gt;
254 |       |  are equivalent.
255 |     table.shorthand.w100pct
256 |       tr.fs11
257 |         th.fs09.ta-left.cl-secondary.p05 Class Name
258 |         th.fs09.ta-left.cl-secondary.p05 Example
259 |       tr
260 |         td.ff-monospace.fw600.cl-title .h1
261 |         td
262 |           .h1 h1 Heading
263 |       tr
264 |         td.ff-monospace.fw600.cl-title .h2
265 |         td
266 |           .h2 h2 Heading
267 |       tr
268 |         td.ff-monospace.fw600.cl-title .h3
269 |         td
270 |           .h3 h3 Heading
271 |       tr
272 |         td.ff-monospace.fw600.cl-title .h4
273 |         td
274 |           .h4 h4 Heading
275 |       tr
276 |         td.ff-monospace.fw600.cl-title .h5
277 |         td
278 |           .h5 h5 Heading
279 |       tr
280 |         td.ff-monospace.fw600.cl-title .h6
281 |         td
282 |           .h6 h6 Heading
283 |   .clearfix.mt25
284 |     .h4.pb03 Font Weight
285 |     table.shorthand.w100pct
286 |       tr
287 |         th.fs09.ta-left.cl-secondary.p05 Class Name
288 |         th.fs09.ta-left.cl-secondary.p05 Meaning
289 |       - var cs = []
290 |       - cs.push(["fw-normal","font-weight: normal"])
291 |       - cs.push(["fw-bold","font-weight: bold"])
292 |       - cs.push(["fw-lighter","font-weight: lighter"])
293 |       - cs.push(["fw100","font-weight: 100"])
294 |       - cs.push(["fw200","font-weight: 200"])
295 |       - cs.push(["fw300","font-weight: 300"])
296 |       - cs.push(["fw400","font-weight: 400"])
297 |       - cs.push(["fw500","font-weight: 500"])
298 |       - cs.push(["fw600","font-weight: 600"])
299 |       - cs.push(["fw700","font-weight: 700"])
300 |       - cs.push(["fw800","font-weight: 800"])
301 |       - cs.push(["fw900","font-weight: 900"])
302 |       each c in cs
303 |         tr.fs11
304 |           td.ff-monospace.fw600.cl-title .#{c[0]}
305 |           td
306 |             pre.m0
307 |               code.css.
308 |                 { #{c[1]}; }
309 |     .clearfix.mt25
310 |     .h4.pb03 Font Family
311 |     table.shorthand.w100pct
312 |       tr
313 |         th.fs09.ta-left.cl-secondary.p05 Class Name
314 |         th.fs09.ta-left.cl-secondary.p05 Meaning
315 |       - var cs = []
316 |       - cs.push(["ff-sans-serif","font-family: sans-serif"])
317 |       - cs.push(["ff-serif","font-family: serif"])
318 |       - cs.push(["ff-monospace","font-family: monospace"])
319 |       - cs.push(["ff-cursive","font-family: cursive"])
320 |       - cs.push(["ff-fantasy","font-family: fantasy"])
321 |       - cs.push(["ff-system","font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\t\tRoboto, Helvetica,Arial, sans-serif, \"Apple Color Emoji\",\n\t\t\"Segoe UI Emoji\", \"Segoe UI Symbol\""])
322 |       each c in cs
323 |         tr.fs11
324 |           td.ff-monospace.fw600.cl-title .#{c[0]}
325 |           td
326 |             pre.m0
327 |                 code.css.
328 |                   { #{c[1]}; }
329 |     .clearfix.mt25
330 |     .h4.pb03 Font Style
331 |     table.shorthand.w100pct
332 |       tr
333 |         th.fs09.ta-left.cl-secondary.p05 Class Name
334 |         th.fs09.ta-left.cl-secondary.p05 Meaning
335 |       - var cs = []
336 |       - cs.push(["fs-normal","font-style: normal"])
337 |       - cs.push(["fs-italic","font-style: italic"])
338 |       - cs.push(["fs-oblique","font-style: oblique"])
339 |       each c in cs
340 |         tr.fs11
341 |           td.ff-monospace.fw600.cl-title .#{c[0]}
342 |           td
343 |             pre.m0
344 |                 code.css.
345 |                   { #{c[1]}; }
346 |     .clearfix.mt25
347 |     .h4.pb03 Font Variant
348 |     table.shorthand.w100pct
349 |       tr
350 |         th.fs09.ta-left.cl-secondary.p05 Class Name
351 |         th.fs09.ta-left.cl-secondary.p05 Meaning
352 |       - var cs = []
353 |       - cs.push(["fv-normal","font-variant: normal"])
354 |       - cs.push(["fv-small-caps","font-variant: small-caps"])
355 |       each c in cs
356 |         tr.fs11
357 |           td.ff-monospace.fw600.cl-title .#{c[0]}
358 |           td
359 |             pre.m0
360 |                 code.css.
361 |                   { #{c[1]}; }
362 |     .clearfix.mt25
363 |     .h4.pb03 Text Alignment
364 |     table.shorthand.w100pct
365 |       tr
366 |         th.fs09.ta-left.cl-secondary.p05 Class Name
367 |         th.fs09.ta-left.cl-secondary.p05 Meaning
368 |       - var cs = []
369 |       - cs.push(["ta-center","text-align: center"])
370 |       - cs.push(["ta-left","text-align: left"])
371 |       - cs.push(["ta-right","text-align: right"])
372 |       - cs.push(["ta-justify","text-align: justify"])
373 |       each c in cs
374 |         tr.fs11
375 |           td.ff-monospace.fw600.cl-title .#{c[0]}
376 |           td
377 |             pre.m0
378 |                 code.css.
379 |                   { #{c[1]}; }
380 |     .clearfix.mt25
381 |     .h4.pb03 Text Decoration
382 |     table.shorthand.w100pct
383 |       tr
384 |         th.fs09.ta-left.cl-secondary.p05 Class Name
385 |         th.fs09.ta-left.cl-secondary.p05 Meaning
386 |       - var cs = []
387 |       - cs.push(["td-none","text-decoration: none"])
388 |       - cs.push(["td-underline","text-decoration: underline"])
389 |       - cs.push(["td-overline","text-decoration: overline"])
390 |       each c in cs
391 |         tr.fs11
392 |           td.ff-monospace.fw600.cl-title .#{c[0]}
393 |           td
394 |             pre.m0
395 |                 code.css.
396 |                   { #{c[1]}; }
397 |     .clearfix.mt25
398 |     .h4.pb03 Text Transform
399 |     table.shorthand.w100pct
400 |       tr
401 |         th.fs09.ta-left.cl-secondary.p05 Class Name
402 |         th.fs09.ta-left.cl-secondary.p05 Meaning
403 |       - var cs = []
404 |       - cs.push(["tt-none","text-transform: none"])
405 |       - cs.push(["tt-uppercase","text-transform: uppercase"])
406 |       - cs.push(["tt-lowercase","text-transform: lowercase"])
407 |       - cs.push(["tt-capitalize","text-transform: capitalize"])
408 |       - cs.push(["tt-inherit","text-transform: inherit"])
409 |       each c in cs
410 |         tr.fs11
411 |           td.ff-monospace.fw600.cl-title .#{c[0]}
412 |           td
413 |             pre.m0
414 |                 code.css.
415 |                   { #{c[1]}; }
416 |   .clearfix.mt2#positioning
417 |     .mt3.mb2.cl-secondary &mdash;
418 |     a.block.h2.cl-primary.mt2.mb15(href='#positioning') Positioning
419 |     table.shorthand.w100pct
420 |         tr
421 |           th.fs09.ta-left.cl-secondary.p05 Class Name
422 |           th.fs09.ta-left.cl-secondary.p05 Meaning
423 |         - var cs = []
424 |         - cs.push(["absolute","position: absolute"])
425 |         - cs.push(["relative","position: relative"])
426 |         - cs.push(["fixed","position: fixed"])
427 |         - cs.push(["flex", "display: flex"])
428 |         - cs.push(["flex-items-center", "align-items: center"])
429 |         - cs.push(["fl-left","float: left"])
430 |         - cs.push(["fl-right","float: right"])
431 |         - cs.push(["top0","top: 0"])
432 |         - cs.push(["right0","right: 0"])
433 |         - cs.push(["bottom0","bottom: 0"])
434 |         - cs.push(["left0","left: 0"])
435 |         - cs.push(["top-auto","top: auto"])
436 |         - cs.push(["right-auto","right: auto"])
437 |         - cs.push(["bottom-auto","bottom: auto"])
438 |         - cs.push(["left-auto","left: auto"])
439 |         - cs.push(["va-middle", "vertical-align: middle"])
440 |         - cs.push(["va-top", "vertical-align: top"])
441 |         - cs.push(["va-bottom", "vertical-align: bottom"])
442 |         - cs.push(["va-baseline", "vertical-align: baseline"])
443 |         each c in cs
444 |           tr.fs11
445 |             td.ff-monospace.fw600.cl-title .#{c[0]}
446 |             td
447 |               pre.m0
448 |                 code.css.
449 |                   { #{c[1]}; }
450 |   .clearfix.mt2#colors
451 |     .mt3.mb2.cl-secondary &mdash;
452 |     a.block.h2.cl-primary.mt2.mb15(href='#colors') Colors
453 |     table.shorthand.w100pct
454 |         tr
455 |           th.fs09.ta-left.cl-secondary.p05 Class Name
456 |           th.fs09.ta-left.cl-secondary.p05 Meaning
457 |         - var cs = []
458 |         - cs.push(["cl-text","color: #888"])
459 |         - cs.push(["cl-title","color: #333"])
460 |         - cs.push(["cl-contrast","color: white"])
461 |         - cs.push(["bg-text","background: #888"])
462 |         - cs.push(["bg-title","background: #333"])
463 |         - cs.push(["bg-contrast","background: white"])
464 |         each c in cs
465 |           tr.fs11
466 |             td.ff-monospace.fw600.cl-title .#{c[0]}
467 |             td
468 |               pre.m0
469 |                 code.css.
470 |                   { #{c[1]}; }
471 |   .clearfix.mt2#displaying
472 |     .mt3.mb2.cl-secondary &mdash;
473 |     a.block.h2.cl-primary.mt2.mb15(href='#displaying') Displaying
474 |     .clearfix.mt25
475 |     .h4.pb03 Display
476 |     table.shorthand.w100pct
477 |       tr
478 |         th.fs09.ta-left.cl-secondary.p05 Class Name
479 |         th.fs09.ta-left.cl-secondary.p05 Meaning
480 |       - var cs = []
481 |       - cs.push(["none","display: none"])
482 |       - cs.push(["block","display: block"])
483 |       - cs.push(["contents","display: contents"])
484 |       - cs.push(["flex","display: flex"])
485 |       - cs.push(["flow-root","display: flow-root"])
486 |       - cs.push(["grid","display: grid"])
487 |       - cs.push(["inline","display: inline"])
488 |       - cs.push(["inline-block","display: inline-block"])
489 |       - cs.push(["inline-flex","display: inline-flex"])
490 |       - cs.push(["inline-grid","display: inline-grid"])
491 |       - cs.push(["inline-table","display: inline-table"])
492 |       - cs.push(["list-item","display: list-item"])
493 |       - cs.push(["run-in","display: run-in"])
494 |       - cs.push(["table","display: table"])
495 |       - cs.push(["table-caption","display: table-caption"])
496 |       - cs.push(["table-cell","display: table-cell"])
497 |       - cs.push(["table-column","display: table-column"])
498 |       - cs.push(["table-column-group","display: table-column-group"])
499 |       - cs.push(["table-footer-group","display: table-footer-group"])
500 |       - cs.push(["table-header-group","display: table-header-group"])
501 |       - cs.push(["table-row","display: table-row"])
502 |       - cs.push(["table-row-group","display: table-row-group"])
503 |       each c in cs
504 |         tr.fs11
505 |           td.ff-monospace.fw600.cl-title .#{c[0]}
506 |           td
507 |             pre.m0
508 |                 code.css.
509 |                   { #{c[1]}; }
510 |     .clearfix.mt25
511 |     .h4.pb03 Overflow
512 |     table.shorthand.w100pct
513 |       tr
514 |         th.fs09.ta-left.cl-secondary.p05 Class Name
515 |         th.fs09.ta-left.cl-secondary.p05 Meaning
516 |       - var cs = []
517 |       - cs.push(["of-hidden","overflow: hidden"])
518 |       - cs.push(["of-visible","overflow: visible"])
519 |       - cs.push(["of-scroll","overflow: scroll"])
520 |       - cs.push(["of-auto","overflow: auto"])
521 |       - cs.push(["ofx-hidden","overflow-x: hidden"])
522 |       - cs.push(["ofx-visible","overflow-x: visible"])
523 |       - cs.push(["ofx-scroll","overflow-x: scroll"])
524 |       - cs.push(["ofx-auto","overflow-x: auto"])
525 |       - cs.push(["ofy-hidden","overflow-y: hidden"])
526 |       - cs.push(["ofy-visible","overflow-y: visible"])
527 |       - cs.push(["ofy-scroll","overflow-y: scroll"])
528 |       - cs.push(["ofy-auto","overflow-y: auto"])
529 |       each c in cs
530 |         tr.fs11
531 |           td.ff-monospace.fw600.cl-title .#{c[0]}
532 |           td
533 |             pre.m0
534 |                 code.css.
535 |                   { #{c[1]}; }
536 |     .clearfix.mt25
537 |     .h4.pb03 Visibility
538 |     table.shorthand.w100pct
539 |       tr
540 |         th.fs09.ta-left.cl-secondary.p05 Class Name
541 |         th.fs09.ta-left.cl-secondary.p05 Meaning
542 |       - var cs = []
543 |       - cs.push(["v-visible","visibility: visible"])
544 |       - cs.push(["v-hidden","visibility: hidden"])
545 |       - cs.push(["v-collapse","visibility: collapse"])
546 |       each c in cs
547 |         tr.fs11
548 |           td.ff-monospace.fw600.cl-title .#{c[0]}
549 |           td
550 |             pre.m0
551 |                 code.css.
552 |                   { #{c[1]}; }
553 |     .clearfix.mt25
554 |     .h4.pb03 Box Sizing
555 |     table.shorthand.w100pct
556 |       tr
557 |         th.fs09.ta-left.cl-secondary.p05 Class Name
558 |         th.fs09.ta-left.cl-secondary.p05 Meaning
559 |       - var cs = []
560 |       - cs.push(["bs-border-box","box-sizing: border-box"])
561 |       - cs.push(["bs-content-box","box-sizing: content-box"])
562 |       each c in cs
563 |         tr.fs11
564 |           td.ff-monospace.fw600.cl-title .#{c[0]}
565 |           td
566 |             pre.m0
567 |                 code.css.
568 |                   { #{c[1]}; }
569 |     .clearfix.mt25
570 |     .h4.pb03 Opacity
571 |     table.shorthand.w100pct
572 |       tr
573 |         th.fs09.ta-left.cl-secondary.p05 Class Name
574 |         th.fs09.ta-left.cl-secondary.p05 Meaning
575 |       - var cs = []
576 |       - cs.push(["op0","opacity: 0"])
577 |       - cs.push(["op01","opacity: 0.1"])
578 |       - cs.push(["op02","opacity: 0.2"])
579 |       - cs.push(["op03","opacity: 0.3"])
580 |       - cs.push(["op04","opacity: 0.4"])
581 |       - cs.push(["op05","opacity: 0.5"])
582 |       - cs.push(["op06","opacity: 0.6"])
583 |       - cs.push(["op07","opacity: 0.7"])
584 |       - cs.push(["op08","opacity: 0.8"])
585 |       - cs.push(["op09","opacity: 0.9"])
586 |       - cs.push(["op1","opacity: 1"])
587 |       each c in cs
588 |         tr.fs11
589 |           td.ff-monospace.fw600.cl-title .#{c[0]}
590 |           td
591 |             pre.m0
592 |                 code.css.
593 |                   { #{c[1]}; }
594 |   .clearfix.mt2#grid
595 |     .mt3.mb2.cl-secondary &mdash;
596 |     a.block.h2.cl-primary.mt2.mb15(href='#grid') Grid
597 |     .clearfix.mt25
598 |     table.shorthand.w100pct
599 |       tr
600 |         th.fs09.ta-left.cl-secondary.p05 Class Name
601 |         th.fs09.ta-left.cl-secondary.p05 Meaning
602 |       - var cs = []
603 |       - cs.push(["col-0","width: 0%"])
604 |       - cs.push(["col-1","width: 8.33333%"])
605 |       - cs.push(["col-2","width: 16.66667%"])
606 |       - cs.push(["col-3","width: 25%"])
607 |       - cs.push(["col-4","width: 33.33334%"])
608 |       - cs.push(["col-5","width: 41.66667%"])
609 |       - cs.push(["col-6","width: 50%"])
610 |       - cs.push(["col-7","width: 58.33334%"])
611 |       - cs.push(["col-8","width: 66.66667%"])
612 |       - cs.push(["col-9","width: 75%"])
613 |       - cs.push(["col-10","width: 83.33334%"])
614 |       - cs.push(["col-11","width: 91.66667%"])
615 |       - cs.push(["col-12","width: 100%"])
616 |       - cs.push(["col-left-1","margin-left: 8.33333%"])
617 |       - cs.push(["col-left-2","margin-left: 16.66667%"])
618 |       - cs.push(["col-left-3","margin-left: 25%"])
619 |       - cs.push(["col-left-4","margin-left: 33.33334%"])
620 |       - cs.push(["col-left-5","margin-left: 41.66667%"])
621 |       - cs.push(["col-left-6","margin-left: 50%"])
622 |       - cs.push(["col-left-7","margin-left: 58.33334%"])
623 |       - cs.push(["col-left-8","margin-left: 66.66667%"])
624 |       - cs.push(["col-left-9","margin-left: 75%"])
625 |       - cs.push(["col-left-10","margin-left: 83.33334%"])
626 |       - cs.push(["col-left-11","margin-left: 91.66667%"])
627 |       - cs.push(["col-left-12","margin-left: 100%"])
628 |       each c in cs
629 |         tr.fs11
630 |           td.ff-monospace.fw600.cl-title .#{c[0]}
631 |           td
632 |             pre.m0
633 |                 code.css.
634 |                   { #{c[1]}; }
635 |   .clearfix.mt2#sizing
636 |     .mt3.mb2.cl-secondary &mdash;
637 |     a.block.h2.cl-primary.mt2.mb15(href='#sizing') Sizing
638 |     .clearfix.mt25
639 |     table.shorthand.w100pct
640 |       tr
641 |         th.fs09.ta-left.cl-secondary.p05 Class Name
642 |         th.fs09.ta-left.cl-secondary.p05 Meaning
643 |       - var cs = []
644 |       - cs.push(["w100pct","width: 100%"])
645 |       - cs.push(["w-auto","width: auto"])
646 |       - cs.push(["h100vh","height: 100vh"])
647 |       - cs.push(["h100pct","height: 100%"])
648 |       - cs.push(["h-auto","height: auto"])
649 |       - cs.push(["mw100pct","max-width: 100%"])
650 |       - cs.push(["mw-auto","max-width: auto"])
651 |       each c in cs
652 |         tr.fs11
653 |           td.ff-monospace.fw600.cl-title .#{c[0]}
654 |           td
655 |             pre.m0
656 |                 code.css.
657 |                   { #{c[1]}; }
658 |   .clearfix.mt2#borders
659 |     .mt3.mb2.cl-secondary &mdash;
660 |     a.block.h2.cl-primary.mt2.mb15(href='#borders') Borders
661 |     .clearfix.mt25
662 |     .h4.pb03 Border Style
663 |     table.shorthand.w100pct
664 |       tr
665 |         th.fs09.ta-left.cl-secondary.p05 Class Name
666 |         th.fs09.ta-left.cl-secondary.p05 Meaning
667 |       - var cs = []
668 |       - cs.push(["bs-solid","border-style: solid"])
669 |       - cs.push(["bs-dashed","border-style: dashed"])
670 |       - cs.push(["bs-dotted","border-style: dotted"])
671 |       - cs.push(["bs-double","border-style: double"])
672 |       - cs.push(["bs-groove","border-style: groove"])
673 |       - cs.push(["bs-hidden","border-style: hidden"])
674 |       - cs.push(["bs-inset","border-style: inset"])
675 |       - cs.push(["bs-none","border-style: none"])
676 |       - cs.push(["bs-outset","border-style: outset"])
677 |       - cs.push(["bs-ridge","border-style: ridge"])
678 |       each c in cs
679 |         tr.fs11
680 |           td.ff-monospace.fw600.cl-title .#{c[0]}
681 |           td
682 |             pre.m0
683 |                 code.css.
684 |                   { #{c[1]}; }
685 |     .clearfix.mt25
686 |     .h4.pb03 Border Radius
687 |     table.shorthand.w100pct
688 |       tr
689 |         th.fs09.ta-left.cl-secondary.p05 Class Name
690 |         th.fs09.ta-left.cl-secondary.p05 Meaning
691 |       - var cs = []
692 |       - cs.push(["br0","border-radius: 0"])
693 |       each c in cs
694 |         tr.fs11
695 |           td.ff-monospace.fw600.cl-title .#{c[0]}
696 |           td
697 |             pre.m0
698 |                 code.css.
699 |                   { #{c[1]}; }
700 |   .clearfix.mt2#misc
701 |     .mt3.mb2.cl-secondary &mdash;
702 |     a.block.h2.cl-primary.mt2.mb15(href='#misc') Miscellaneous
703 |     table.shorthand.w100pct
704 |       tr
705 |         th.fs09.ta-left.cl-secondary.p05 Class Name
706 |         th.fs09.ta-left.cl-secondary.p05 Meaning
707 |       - var cs = []
708 |       - cs.push(["hr","border-top: 1px solid rgba(0,0,0,0.08)"])
709 |       - cs.push(["circular","border-radius: 50%"])
710 |       - cs.push(["cursor-auto","cursor: auto"])
711 |       - cs.push(["cursor-default","cursor: default"])
712 |       - cs.push(["cursor-not-allowed","cursor: not-allowed"])
713 |       - cs.push(["cursor-pointer","cursor: pointer"])
714 |       - cs.push(["cursor-text","cursor: text"])
715 |       - cs.push(["cursor-wait","cursor: wait"])
716 |       each c in cs
717 |         tr.fs11
718 |           td.ff-monospace.fw600.cl-title .#{c[0]}
719 |           td
720 |             pre.m0
721 |                 code.css.
722 |                   { #{c[1]}; }
723 |   .clearfix.mt2#extras
724 |     .mt3.mb2.cl-secondary &mdash;
725 |     a.block.h2.cl-primary.mt2.mb15(href='#extras') Extras
726 |     p Additional sets of classes such as a responsive grid, buttons, etc. are still in the works and will be documented soon.
727 | 
728 |   .mv4
729 |   .mv2.hr
730 |   .ta-right
731 |     | By&nbsp;
732 |     a(href='https://github.com/jasalo',target='_blank') @jasalo


--------------------------------------------------------------------------------
/main.sass:
--------------------------------------------------------------------------------
1 | @import "site_variables"
2 | @import "funcssion-extras"
3 | @import "css/specific/site"
4 | @import "css/specific/home"


--------------------------------------------------------------------------------
/src/_utils.sass:
--------------------------------------------------------------------------------
 1 | // Functions
 2 | 
 3 | @function to-string($value)
 4 |   @return inspect($value)
 5 | 
 6 | @function parseInt($str, $radix: 10)
 7 |   $chars: charsFromBase($radix)
 8 |   $result: 0
 9 |   $is-negative: str-index($str, '-') == 1
10 |   @if $is-negative
11 |     $str: str-slice($str, 2)
12 |   @for $i from 1 through str-length($str)
13 |     $char: str-slice($str, -$i, -$i)
14 |     $value: str-index($chars, $char) - 1
15 |     $result: $result + ($value * pow($radix, ($i - 1)))
16 |   @return if($is-negative, -$result, $result)
17 | 
18 | @function str-split( $str, $needle, $ret: () )
19 |   $i: str-index($str, $needle)
20 |   @if $i == null
21 |     @return ($str)
22 |   @else
23 |     $a: str-slice($str, 0, ($i - 1))
24 |     $oldRet: $ret
25 |     @if str-length($a) > 0
26 |       $ret: append($ret, $a)
27 |     $newStr: str-slice($str, ($i + 1), str-length($str))
28 |     @if str-length($newStr) > 0
29 |       $ret: join($ret, str-split($newStr,$needle,$oldRet))
30 |   @return $ret
31 | 
32 | @function str-join($list)
33 |   $ret: null
34 |   @each $x in $list
35 |     $ret: $ret#{$x}
36 |   @return $ret
37 | 
38 | // Mixins
39 | 
40 | // Generates classes with a given prefix, a list of properties and a suffix like:
41 | // .#{$prefix}#{$property}#{$suffix} for all:
42 | // [ x | x <- [min, min+step .. max] ]
43 | // (in a Haskell-ish / comprehension list notation)
44 | // IMPORTANT! The min (first) value is IGNORED
45 | @mixin prop-by-steps($prefix, $propertyList, $suffix: 'rem', $max: 1, $step: 0.1, $min: 0 )
46 |   $complement: null
47 |   @if $suffix != 'rem'
48 |     $complement: $suffix
49 |   $current: $min + $step
50 |   @while $current <= $max
51 |     $defnumber: str-join( str-split( to-string($current), '.') )
52 |     .#{$prefix}#{$defnumber}#{$complement}
53 |       @each $prop in $propertyList
54 |         #{$prop}: #{$current}#{$suffix}
55 |     $current: $current + $step
56 | 
57 | @mixin prop-resets($prefix, $propertyList)
58 |   .#{$prefix}0
59 |     @each $prop in $propertyList
60 |       #{$prop}: 0
61 | 
62 | 
63 | // Most used function to generate classes representing a property and all their possible values, usually.
64 | @mixin prop-by-values($prefix, $property, $values)
65 |   @each $v in $values
66 |     .#{$prefix}#{$v}
67 |       #{$property}: #{$v}
68 | 


--------------------------------------------------------------------------------
/src/core/_borders.sass:
--------------------------------------------------------------------------------
 1 | // TODO: Use? Implements for various widths (1px ~ 5px maybe)?
 2 | // $bordersDirections: (bt border-top) (br border-right) (bb border-bottom) (bl border-left)
 3 | // @each $x in $bordersDirections
 4 | //   .#{nth($x,1)}
 5 | //     #{nth($x,2)}-width: 1px
 6 | 
 7 | $borderStyles: solid dashed dotted double groove hidden inset none outset ridge
 8 | @include prop-by-values(bs-, border-style, $borderStyles)
 9 | 
10 | .br0
11 |   border-radius: 0
12 | 


--------------------------------------------------------------------------------
/src/core/_colors.sass:
--------------------------------------------------------------------------------
 1 | // Foreground color
 2 | .cl-text
 3 |   color: $colorText
 4 | .cl-title
 5 |   color: $colorTitle
 6 | .cl-contrast
 7 |   color: $colorContrast
 8 | 
 9 | // Backgrounds
10 | .bg-text
11 |   background: $colorText
12 | .bg-title
13 |   background: $colorTitle
14 | .bg-contrast
15 |   background: $colorContrast
16 | 


--------------------------------------------------------------------------------
/src/core/_displaying.sass:
--------------------------------------------------------------------------------
 1 | // Display
 2 | $displays: none block contents flex flow-root grid inline inline-block inline-flex inline-grid inline-table list-item run-in table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group
 3 | @include prop-by-values(null, display, $displays)
 4 | 
 5 | // Overflow
 6 | $overflows: hidden visible scroll auto
 7 | @include prop-by-values(of-, overflow, $overflows)
 8 | $overflowsX: hidden visible scroll auto
 9 | @include prop-by-values(ofx-, overflow-x, $overflowsX)
10 | $overflowsY: hidden visible scroll auto
11 | @include prop-by-values(ofy-, overflow-y, $overflowsY)
12 | 
13 | // Visibility
14 | $visibilities: visible hidden collapse
15 | @include prop-by-values(v-, visibility, $visibilities)
16 | 
17 | // Box Sizing
18 | $boxSizings: border-box content-box inherit initial
19 | @include prop-by-values(bs-, box-sizing, $boxSizings)
20 | 
21 | // Opacity
22 | @include prop-by-steps(op, (opacity), null, 1, .1, -.1)
23 | 


--------------------------------------------------------------------------------
/src/core/_grid.sass:
--------------------------------------------------------------------------------
 1 | // Columns mixin
 2 | @mixin cols-mixin($prefix, $property, $max: 12)
 3 |   $current: 0
 4 |   @while $current <= $max
 5 |     .#{$prefix}-#{$current}
 6 |       #{$property}: $current * 100% / 12
 7 |       @if $prefix == col
 8 |         float: left
 9 |     $current: $current + 1
10 | 
11 | // .col-x
12 | @include cols-mixin(col, width)
13 | // .col-offset-x
14 | @include cols-mixin(col-left, margin-left)
15 | 


--------------------------------------------------------------------------------
/src/core/_misc.sass:
--------------------------------------------------------------------------------
 1 | // In the absence of a better location for these classes... Useful nonetheless!
 2 | 
 3 | .hr
 4 |   border-top: 1px solid rgba(black,0.08)
 5 | 
 6 | .circular
 7 |   border-radius: 50%
 8 | 
 9 | // Display - There are way TOO many cursors, so here's a small selection:
10 | $cursors: auto default not-allowed pointer text wait
11 | @include prop-by-values(cursor-, cursor, $cursors)
12 | 
13 | 


--------------------------------------------------------------------------------
/src/core/_positioning.sass:
--------------------------------------------------------------------------------
 1 | $positions: absolute relative fixed
 2 | @include prop-by-values(null, position, $positions)
 3 | 
 4 | .flex-items-center
 5 |   align-items: center
 6 | // TODO: More Flexbox stuff - Perhaps in a separate file?
 7 | 
 8 | $floats: left right none initial inherit 
 9 | @include prop-by-values(fl-, float, $floats)
10 | 
11 | .clearfix
12 |   &:before, &:after
13 |     content: ''
14 |     display: table
15 |   &:after
16 |     clear: both
17 | 
18 | .top0
19 |   top: 0
20 | .right0
21 |   right: 0
22 | .bottom0
23 |   bottom: 0
24 | .left0
25 |   left: 0
26 | 
27 | .top-auto
28 |   top: auto
29 | .right-auto
30 |   right: auto
31 | .bottom-auto
32 |   bottom: auto
33 | .left-auto
34 |   left: auto
35 | 
36 | $verticalAlignments: middle top bottom baseline
37 | @include prop-by-values(va-, vertical-align, $verticalAlignments)
38 | 
39 | 


--------------------------------------------------------------------------------
/src/core/_sizing.sass:
--------------------------------------------------------------------------------
 1 | .h100pct
 2 |   height: 100%
 3 | .w100pct
 4 |   width: 100%
 5 | .w-auto
 6 |   width: auto
 7 | .h100vh
 8 |   height: 100vh
 9 | .h-auto
10 |   height: auto
11 | .mw100pct
12 |   max-width: 100%
13 | .mw-auto
14 |   max-width: auto
15 | 


--------------------------------------------------------------------------------
/src/core/_spacing.sass:
--------------------------------------------------------------------------------
 1 | // Margins
 2 | $margins: (m (margin)) (mt (margin-top)) (mr (margin-right)) (mb (margin-bottom)) (ml (margin-left)) (mv (margin-top margin-bottom)) (mh (margin-right margin-left))
 3 | 
 4 | @each $m in $margins
 5 |   .#{nth($m,1)}-auto
 6 |     @each $prop in nth($m,2)
 7 |       #{$prop}: auto
 8 | 
 9 | @each $x in $margins
10 |   @include prop-resets(#{nth($x,1)}, nth($x,2))
11 |   @include prop-by-steps(#{nth($x,1)}, nth($x,2), 'rem', 2, .1)
12 |   @include prop-by-steps(#{nth($x,1)}, nth($x,2), 'rem', 4, .5, 2)
13 |   @include prop-by-steps(#{nth($x,1)}, nth($x,2), 'em', 1, .1)
14 | 
15 | // Paddings
16 | $paddings: (p (padding)) (pt (padding-top)) (pr (padding-right)) (pb (padding-bottom)) (pl (padding-left)) (pv (padding-top padding-bottom)) (ph (padding-right padding-left))
17 | 
18 | @each $x in $paddings
19 |   @include prop-resets(#{nth($x,1)}, nth($x,2))
20 |   @include prop-by-steps(#{nth($x,1)}, nth($x,2), 'rem', 2, .1)
21 |   @include prop-by-steps(#{nth($x,1)}, nth($x,2), 'rem', 4, .5, 2)
22 |   @include prop-by-steps(#{nth($x,1)}, nth($x,2), 'em', 1, .1)
23 | 


--------------------------------------------------------------------------------
/src/core/_text.sass:
--------------------------------------------------------------------------------
 1 | // Headings
 2 | .h1
 3 |   font-size: $headingsMultiplier
 4 | .h2
 5 |   font-size: ($headingsMultiplier * .85)
 6 | .h3
 7 |   font-size: ($headingsMultiplier * .72)
 8 | .h4
 9 |   font-size: ($headingsMultiplier * .6)
10 | .h5
11 |   font-size: ($headingsMultiplier * .48)
12 | .h6
13 |   font-size: ($headingsMultiplier * .4)
14 | 
15 | // Font family
16 | $fontFamilies: sans-serif serif monospace cursive fantasy
17 | @include prop-by-values(ff-, font-family, $fontFamilies)
18 | // Default system font (varies depending on OS, but aims to always look good). Used in GitHub nowadays for example.
19 | .ff-system
20 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
21 | 
22 | // Font variant
23 | $fontVariants: normal small-caps
24 | @include prop-by-values(fv-, font-variant, $fontVariants)
25 | 
26 | // Font variant
27 | $fontStyles: normal italic oblique
28 | @include prop-by-values(fs-, font-style, $fontStyles)
29 | 
30 | // Font weight
31 | $fontWeights: lighter normal bold
32 | @include prop-by-values(fw-, font-weight, $fontWeights)
33 | $fontWeightsNumbers: 100 200 300 400 500 600 700 800 900
34 | @include prop-by-values(fw, font-weight, $fontWeightsNumbers)
35 | 
36 | // Text alignment
37 | $textAlignments: center left right justify
38 | @include prop-by-values(ta-, text-align, $textAlignments)
39 | 
40 | // Text decoration
41 | $textDecorations: none underline overline
42 | @include prop-by-values(td-, text-decoration, $textDecorations)
43 | 
44 | // Text transform
45 | $textTransforms: none uppercase lowercase capitalize inherit
46 | @include prop-by-values(tt-, text-transform, $textTransforms)
47 | 
48 | // Font sizes
49 | @include prop-by-steps(fs, (font-size), 'rem', 2, .1, .4)
50 | @include prop-by-steps(fs, (font-size), 'rem', 4, .5, 2)
51 | @include prop-by-steps(fs, (font-size), 'em', 2, .1, .4)
52 | 
53 | // Line heights
54 | @include prop-by-steps(lh, (line-height), 'rem', 2, .1, .4)
55 | @include prop-by-steps(lh, (line-height), 'rem', 4, .5, 2)
56 | @include prop-by-steps(lh, (line-height), 'em', 2, .1, .4)
57 | 
58 | 


--------------------------------------------------------------------------------
/src/extras/_buttons.sass:
--------------------------------------------------------------------------------
 1 | .btn
 2 |   display: inline-block
 3 |   font-family: inherit
 4 |   font-size: .85rem
 5 |   text-decoration: none
 6 |   padding-left: 1.1em
 7 |   padding-right: 1.1em
 8 |   line-height: 2.6em
 9 |   border: 0
10 |   color: $colorContrast
11 |   background-color: #ccc
12 |   &:hover
13 |     box-shadow: inset 0 0 0 20em rgba(white,0.15)
14 |   &:active
15 |     box-shadow: inset 0 0 0 20em rgba(black,0.15)
16 |   &:hover, &:active, &:focus, &:visited
17 |     color: $colorContrast
18 |   &.btn-sm
19 |     font-size: 0.7rem
20 |   &.btn-lg
21 |     font-size: 1rem


--------------------------------------------------------------------------------
/src/extras/_grid_responsive.sass:
--------------------------------------------------------------------------------
 1 | .container
 2 |   @media (min-width: $wideWidth)
 3 |     width: ($wideWidth * 0.85)
 4 |   @media (max-width: $wideWidth)
 5 |     width: ($wideWidth * 0.8)
 6 |     max-width: 95%
 7 |   @media (max-width: $desktopWidth)
 8 |     max-width: 95%
 9 | 
10 | @media (max-width: $mobileWidth)
11 |   .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9
12 |     width: 100%
13 | 


--------------------------------------------------------------------------------
/src/extras/_hidenshow.sass:
--------------------------------------------------------------------------------
 1 | // Show/Hide for various screen widths
 2 | 
 3 | .rm-hide
 4 |   @media (max-width: $mobileWidth + 1px)
 5 |     display: none
 6 | .rt-hide
 7 |   @media (min-width: $mobileWidth + 1px ) and (max-width: $tabletWidth + 1px)
 8 |     display: none
 9 | .rd-hide
10 |   @media (min-width: $tabletWidth + 1px) and (max-width: $desktopWidth + 1px)
11 |     display: none
12 | .rw-hide
13 |   @media (min-width: $desktopWidth + 1px)
14 |     display: none
15 | 
16 | .rm-show
17 |   @media (max-width: $mobileWidth)
18 |     display: block
19 | .rt-show
20 |   @media (min-width: $mobileWidth) and (max-width: $tabletWidth)
21 |     display: block
22 | .rd-show
23 |   @media (min-width: $tabletWidth) and (max-width: $desktopWidth)
24 |     display: block
25 | .rw-show
26 |   @media (min-width: $desktopWidth)
27 |     display: block
28 | 


--------------------------------------------------------------------------------