v1.0.0

changelog.md

@@ -1,13 +1,16 @@
 # Changelog
 
-### *20191219*
+### *20191219* - 1.0.0
+* **TWEAK** Last tweaks for 1.0.0
+
+### *20191219* - 1.0.0-beta.5
 * **NEW** Changed the name and look
 
-### *20191118*
+### *20191118* - 1.0.0-beta.4
 * **NEW** Docs: Changed the look, added examples
 * **NEW** Src: Completely revised everything
 
-### *20191111*
+### *20191111* - 1.0.0-beta.3
 * **NEW** Docs: Changed the look
 * **TWEAK** Docs: Improved wording
 * **TWEAK** Src: Improved grid paddings

docs/_config.yml

@@ -1,6 +1,6 @@
 # Custom variables
-docs-ver: v1.0.0-beta.8
-src-ver:  v1.0.0-beta.5
+docs-ver: v1.0.0
+src-ver:  v1.0.0
 repo:     https://github.com/felixdorner/bica
 download: https://github.com/felixdorner/bica/releases/latest
 

docs/_drafts/01-about.md

@@ -3,6 +3,6 @@ title: About
 slug: about
 ---
 
-Baseline is intended to be used as a simple starting point when writing CSS. It helps to create and maintain a mindful and scalable CSS structure.
+Bica is intended to be used as a simple starting point when writing CSS. It helps to create and maintain a mindful and scalable CSS structure.
 
-<span class="subtle-text">Baseline’s simplicity is a feature. It is planned to be written in vanilla CSS without a build process, some day in the future. For now, PostCSS and its plugins are needed to use future CSS syntax like custom media queries and to compile everything into one file.</span>
+Baseline’s simplicity is a feature. It is planned to be written in vanilla CSS without a build process, some day in the future. For now, PostCSS and its plugins are needed to use future CSS syntax like custom media queries and to compile everything into one file.

docs/_drafts/03-settings.md

@@ -3,7 +3,7 @@ title: Settings
 slug: settings
 ---
 
-These are the settings Baseline is shipped with. Feel free to add your own:
+These are the settings Bica is shipped with. Feel free to add your own:
 
 ```
 :root {

docs/_includes/header.html

@@ -3,7 +3,7 @@
     <div class="o-grid__col u-span--12 u-span--08md u-span--06lg u-push--02md u-push--03lg">
 
       <div class="c-branding">
-        <svg width="19" height="26" viewBox="0 0 19 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg width="32" height="44" viewBox="0 0 19 26" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M15.8546 6.59735H14.4915L14.607 5.77629H14.6053C14.6454 5.52451 14.522 5.27433 14.2974 5.15248L9.68716 2.68928L9.93733 0.678323L9.93893 0.676719C9.95978 0.505128 9.90686 0.333538 9.79139 0.203661C9.67754 0.0737646 9.51236 0 9.33915 0H7.01545C6.84225 0 6.67708 0.0737687 6.56321 0.203661C6.44774 0.333558 6.39482 0.505145 6.41567 0.676719L6.65782 2.62195L0.392258 5.12686H0.393861C0.185388 5.20544 0.0378514 5.38986 0.00578052 5.60957C-0.0246889 5.82766 0.0667199 6.04736 0.246328 6.17885C0.951953 6.71287 2.10654 7.85305 2.20437 8.64205C2.37275 9.98109 3.02543 14.5209 3.02543 14.5706V14.569C3.07836 14.8304 3.29485 15.0244 3.55785 15.0501V15.9978C3.27561 16.0187 3.04469 16.2336 3.00458 16.5158L1.79704 25.3135C1.77298 25.4867 1.8259 25.6615 1.94136 25.793C2.05522 25.9245 2.222 25.9999 2.39681 25.9999H13.9944C14.1708 26.0031 14.3408 25.9293 14.4578 25.7978C14.5765 25.6663 14.6294 25.4883 14.6054 25.3135L13.3994 16.5367C13.3593 16.2545 13.1284 16.0396 12.8445 16.0188V15.0502C13.1284 15.0293 13.3593 14.8144 13.3994 14.5322L13.9944 10.2183H15.3495V16.0717C15.3495 17.0724 16.1593 17.8822 17.16 17.8822C18.1591 17.8822 18.9705 17.0724 18.9705 16.0717V9.71334C18.9673 7.99263 17.5738 6.59908 15.8547 6.59748L15.8546 6.59735ZM12.2752 13.8634H10.5289L10.8416 6.27673H13.3048L12.2752 13.8634ZM11.6386 16.0139L4.76214 16.0155V15.0501H11.6386V16.0139ZM9.06793 17.2214L9.69654 24.8081H6.76829L7.081 17.2214H9.06793ZM7.31516 13.8634L6.69456 6.27673H9.63406L9.32135 13.8634H7.31516ZM8.6574 1.18652L8.50505 2.41812H7.83634L7.68399 1.21058L8.6574 1.18652ZM7.4258 3.59681H8.89473L11.6209 5.05773H3.73088L7.4258 3.59681ZM2.14963 6.27648H5.48681L6.11222 13.8631H4.14133C3.96813 12.6315 3.53353 9.5316 3.40204 8.47653C3.28818 7.66026 2.71727 6.88411 2.14958 6.27631L2.14963 6.27648ZM4.14137 17.2213H5.88613L5.57342 24.808H3.11022L4.14137 17.2213ZM13.3176 24.808H10.9153L10.2995 17.2213H12.2864L13.3176 24.808ZM17.7629 16.0714C17.7629 16.405 17.4935 16.676 17.1599 16.676C16.8263 16.676 16.5553 16.405 16.5553 16.0714V10.0288C16.5553 9.46587 16.0998 9.01043 15.5386 9.01043H14.1578L14.3214 7.80288H15.8529L15.8545 7.80449C16.9081 7.80449 17.7628 8.65922 17.7628 9.71281L17.7629 16.0714ZM5.42593 19.1552C5.42593 19.399 5.27999 19.6186 5.05388 19.7133C4.82777 19.8063 4.56797 19.755 4.39637 19.5818C4.22317 19.4086 4.17186 19.1504 4.26487 18.9243C4.35949 18.6982 4.57918 18.5522 4.82295 18.5522C5.15651 18.5522 5.42594 18.8216 5.42594 19.1552L5.42593 19.1552Z" fill="#0D0D0D"/>
         </svg>
         <h1>{{page.title}}</h1> <mark>{{site.src-ver}}</mark>
@@ -17,8 +17,8 @@ <h1>{{page.title}}</h1> <mark>{{site.src-ver}}</mark>
           {% endfor %}
         </ul>
         <ul class="c-menu__btns">
-          <li><a class="c-btn c-btn--inv" href="{{site.repo}}">View on Github</a></li>
-          <li><a class="c-btn" href="https://github.com/felixdorner/bica/releases/latest">Download</a></li>
+          <li><a class="c-btn c-btn--inv" href="{{site.repo}}">View on Github ‣</a></li>
+          <li><a class="c-btn" href="https://github.com/felixdorner/bica/releases/latest">Download ‣</a></li>
         </ul>
       </div>
 

docs/_instructions/02-base.md

@@ -1,7 +1,7 @@
 ---
-title: Elements
+title: Base Elements
 slug: base
 category: base
 ---
 
-Bica contains styles for almost all HTML5 skeleton tags. See some examples here:
+Bica contains styles for a huge set of HTML5 skeleton tags. See some examples here:

docs/_instructions/03-grid.md

@@ -4,7 +4,7 @@ slug: grid
 category: grid
 ---
 
-There is a basic grid system for simple layout explorations. To use it, the HTML markup should follow a specific structure:
+Bica provides a basic grid system for simple layout explorations. To use it, the HTML markup should follow a specific structure:
 
 ```
 .o-container
@@ -19,7 +19,7 @@ The maximum grid-width is set on the .o-grid element. The grid is always centere
 
 #### Responsiveness
 
-To set widths and shifts individually for the 4 custom breakpoints defined in the settings.css append the following modifiers at the end: sm, md, lg, xl
+To set widths and shifts individually for the 4 custom min-width breakpoints defined in the settings.css append the following modifiers at the end: sm, md, lg, xl
 
 Example:
 
@@ -30,4 +30,4 @@ Example:
     .o-grid__col .u-span--12 .u-span--06md .u-span--04lg
 ```
 
-Note: Breakpoints overwrite each other from small to large!
+Note: Rules based on min-width breakpoints overwrite each other from small to large!

docs/assets/css/site.css

@@ -9,6 +9,7 @@
 */
 
 body {
+  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   padding: var(--spc--xl) 0 0;
 }
 
@@ -24,7 +25,7 @@ body {
 
 .c-branding h1 {
   display: inline-block;
-  font-size: var(--fs--lg);
+  font-size: var(--fs--xxl);
   margin: 0 0 var(--spc--xs);
 }
 
@@ -37,6 +38,7 @@ body {
 .c-branding__slogan {
   font-size: var(--fs--xl);
   color: rgba(var(--rgb--subtle), 1);
+  margin-top: var(--spc--xs);
 }
 
 .c-menu {
@@ -46,6 +48,7 @@ body {
 @media screen and (min-width: 740px) {
   .c-menu {
     position: fixed;
+    z-index: 99;
     top: var(--spc--xl);;
     right: var(--spc--xl);;
   }
@@ -75,7 +78,7 @@ section.o-container h2 {
 }
 
 .o-container--padded {
-  padding: var(--spc--lg) 0;
+  padding: var(--spc--xxl) 0;
 }
 
 .c-grid-sample-box {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bica",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0",
   "description": "CSS starter-kit built on top of PostCSS",
   "repository": {
     "type": "git",

src/base/_copy.css

@@ -135,7 +135,7 @@ var {
 }
 
 kbd {
-  padding: 0.1em 0.2em;
+  padding: .15em .2em .1em;
   background: rgba(var(--rgb--subtlest), 1);
   border: 1px solid rgba(var(--rgb--subtle), var(--alpha--subtlest));
   border-radius: var(--br);

src/base/base.css

@@ -10,8 +10,8 @@
 
 @import '_box-sizing';
 @import '_copy';
+@import '_details';
 @import '_forms';
 @import '_lists';
-@import '_tables';
 @import '_media';
-@import '_details';
+@import '_tables';

src/settings.css

@@ -1,7 +1,7 @@
 :root {
   --ff--pri:              -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --ff--sec:              Athelas, Georgia, times, serif;
-  --ff--code:             Consolas, Monaco, monospace;
+  --ff--code:             Courier, monospace;
 
   --fs--xs:               .75rem;
   --fs--sm:               .875rem;

src/utilities/_clr.css

@@ -1 +1,11 @@
 /* COLORS */
+
+.u-clr-main { color: rgba(var(--rgb--main), 1); }
+.u-clr-accent { color: rgba(var(--rgb--accent), 1); }
+.u-clr-subtle { color: rgba(var(--rgb--subtle), 1); }
+.u-clr-subtler { color: rgba(var(--rgb--subtler), 1); }
+.u-clr-subtlest { color: rgba(var(--rgb--subtlest), 1); }
+.u-clr-light { color: rgba(var(--rgb--light), 1); }
+.u-clr-success { color: rgba(var(--rgb--success), 1); }
+.u-clr-warning { color: rgba(var(--rgb--warning), 1); }
+.u-clr-error { color: rgba(var(--rgb--error), 1); }

src/utilities/utilities.css

@@ -7,7 +7,8 @@
 
 */
 
-@import '_push';
-@import '_span';
+@import '_clr';
 @import '_ds0';
 @import '_fs';
+@import '_push';
+@import '_span';