From d367827a96a5329b8a4d7727a957b1792f2e7a92 Mon Sep 17 00:00:00 2001 From: nphillips-dev Date: Thu, 22 Oct 2020 08:32:31 +0100 Subject: [PATCH 1/3] updated core to improve responive design --- unholy-core.css | 62 ++++++++++++++++++++++++++++++------------------- 1 file changed, 38 insertions(+), 24 deletions(-) diff --git a/unholy-core.css b/unholy-core.css index a798a18..88fbc3c 100644 --- a/unholy-core.css +++ b/unholy-core.css @@ -21,47 +21,61 @@ margin-right: auto; margin-left: auto; } - .row { +.container > div.row { display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-flow: row wrap; margin-right: -15px; margin-left: -15px; + justify-content: space-between; } - .column-single { +.row > div.column-single { width: 4.66666666667%; + margin: 10px; + flex: auto; } - .column-quarter { +.row > div.column-quarter { width: 22%; + margin: 5px; + flex: auto; } - .column-third { +.row > div.column-third { width: 30.6666666667%; + margin: 5px; + flex: auto; } - .column-half { +.row > div.column-half { width: 48%; + margin: 5px; + flex: auto; } - .column-threeQuarters { +.row > div.column-threeQuarters { width: 74.0%; + margin: 5px; + flex: auto; } - .column-full { +.row > div.column-full { width: 100%; margin-left: 0; -} - @media screen and (min-width : 320px) { - .container { - width: 90%; - } -} - @media screen and (min-width: 680px) { - .container { - width: 85%; - } -} - @media screen and (min-width : 1024px) { - .container { - width: 80%; - } + flex: auto; +} +@media screen and (min-width : 320px) { + .container { + width: 90%; + margin-left: 2%; + } +} +@media screen and (min-width: 680px) { + .container { + width: 85%; + margin-left: 4%; + } +} +@media screen and (min-width : 1024px) { + .container { + width: 80%; + margin-left: 8%; + } } /* unvisited link */ a:link { From 5bd897034d6b8ced967d43b7829a15514918b29f Mon Sep 17 00:00:00 2001 From: nphillips-dev Date: Thu, 22 Oct 2020 19:04:45 +0100 Subject: [PATCH 2/3] flex box added to rows and boxes to improve responsiveness --- README.md | 19 ++++------ unholy-core.css | 97 ++++++++++++++++++++++--------------------------- 2 files changed, 51 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index b43cbb8..aa52d09 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # Unholy -A random thought which got carried away into an idea which became a light weight CSS "framework" +A random thought which got carried away into an idea which became a light weight CSS "boilerplate" I had an idea of "oh I wonder what making a framework for CSS is like" but forgot im a jack of all trades and a master of none and I didn't know how to do that. Instead I went insane, combining the features of about about half a dozen different frameworks into one tiny one. Enough power to give a grid with some components. -So will I work on this more?? Maybe, it was a pointless 5 minute (okay 2 days) experiment but it was educational. +For v2.0.0 I did some research into flexbox, altered some of the core to simplify it but (hopefully) improve the responsiveness. Feel free to pull down, mangle and use to your hearts content but please, please give visit and use the work of the people who know what they are doing and actually worked hard on beautiful things for you all and not this unholy abomination! @@ -32,11 +32,11 @@ Pull down a copy of the project, or see the latest release files, you will see t ## Core -The following structure will provide a contain, with a row and a full width column, which contains a single card. +The following structure will provide a contain, with a row and a full width box, which contains a single card.
-
+
Card Header @@ -52,14 +52,11 @@ The following structure will provide a contain, with a row and a full width colu
-Available columns are: +Inside a row there are 3 types of basic boxes: -* .column-single -* .column-quarter -* .column-third -* .column-half -* .column-threeQuarters -* .column-full +* .box-small (22%) +* .box-medium (50%) +* .box-large (100%) Images would be structured as follows: diff --git a/unholy-core.css b/unholy-core.css index 88fbc3c..47bd577 100644 --- a/unholy-core.css +++ b/unholy-core.css @@ -14,68 +14,57 @@ background-color: var(--unholy-background); color: var(--unholy-font); } - .container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; } .container > div.row { - display: -ms-flexbox; - display: flex; - flex-flow: row wrap; - margin-right: -15px; - margin-left: -15px; - justify-content: space-between; -} -.row > div.column-single { - width: 4.66666666667%; - margin: 10px; - flex: auto; -} -.row > div.column-quarter { - width: 22%; - margin: 5px; - flex: auto; -} -.row > div.column-third { - width: 30.6666666667%; - margin: 5px; - flex: auto; -} -.row > div.column-half { - width: 48%; - margin: 5px; - flex: auto; -} -.row > div.column-threeQuarters { - width: 74.0%; - margin: 5px; - flex: auto; -} -.row > div.column-full { - width: 100%; - margin-left: 0; - flex: auto; + display: -ms-flexbox; + display: flex; + flex-flow: row wrap; + margin-right: -15px; + margin-left: -15px; + justify-content: space-between; +} + +.row > div.box-small{ + width: 22%; + margin: 5px; + flex: auto; } + +.row > div.box-medium{ + width: 48%; + margin: 5px; + flex: auto; +} + +.row > div.box-large{ + width: 100%; + margin-left: 0; + flex: auto; +} + @media screen and (min-width : 320px) { - .container { - width: 90%; - margin-left: 2%; - } + .container { + width: 90%; + margin-left: 2%; + } } @media screen and (min-width: 680px) { - .container { - width: 85%; - margin-left: 4%; - } + .container { + width: 85%; + margin-left: 4%; + } } @media screen and (min-width : 1024px) { - .container { - width: 80%; - margin-left: 8%; - } + .container { + width: 80%; + margin-left: 8%; + } } /* unvisited link */ a:link { From 694990c1393d89266cdeb116735ea993a12d3bbe Mon Sep 17 00:00:00 2001 From: nphillips-dev Date: Mon, 26 Oct 2020 08:13:49 +0000 Subject: [PATCH 3/3] readme update --- README.md | 46 +++++++++++++++++++++++++++++++--------------- 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index aa52d09..8793824 100644 --- a/README.md +++ b/README.md @@ -3,23 +3,26 @@ A random thought which got carried away into an idea which became a light weight I had an idea of "oh I wonder what making a framework for CSS is like" but forgot im a jack of all trades and a master of none and I didn't know how to do that. -Instead I went insane, combining the features of about about half a dozen different frameworks into one tiny one. Enough power to give a grid with some components. +Instead I went insane, combining the features of about about half a dozen different frameworks into one tiny one. Enough power to give a grid with some common components (see References at the end of Readme). -For v2.0.0 I did some research into flexbox, altered some of the core to simplify it but (hopefully) improve the responsiveness. +## Why?? -Feel free to pull down, mangle and use to your hearts content but please, please give visit and use the work of the people who know what they are doing and actually worked hard on beautiful things for you all and not this unholy abomination! +My experience of front end frameworks is that, out of the box they are great, customising them can be a faff. -* Buttons: https://fdossena.com/index.php?p=html5cool/buttons/i.frag -* Colours: https://design-system.service.gov.uk/styles/colour/ -* Form / navbar: https://www.w3schools.com/howto/howto_css_responsive_form.asp -* Ham nav: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/ -* Cards based on: https://materializecss.com/ -* List items: https://getbootstrap.com/ -* Ideas and inspiration from: -* https://milligram.io/ -* http://getskeleton.com/ +The idea here is you can build a quick and dirty site. It works on the concept that your theme colours are going to be used in multiple places and for different jobs, for example: + +Active nav item and a submit button - both need seperate CSS written but in Unholy both use the same colour variable, change that variable and both elements restyle. See section on variables. -N.B. People of the links, if I angered you by involving your code in this nightmare then ping me and I'll cut it out! +I appriciate this might be restrictive to some really flashy front end humans, I've tried to make this easy to overrude (no !important) but for those with the style sense of a fish i.e. me, this is a nice quick way to style a site. + +## Version 2 and Rules + +For v2.0.0 I did some research into flexbox, altered some of the core to simplify it but (hopefully) improve the responsiveness. + +Unholy development has 3 'rules': +1. Any element, component, utility or navigation must impliment the core variables +2. Optional styling e.g. borders, should be provided by utility classes where possible +3. Unholy core cannot be longer than 300 lines long ## Installation @@ -150,6 +153,19 @@ The top of each unholy file imports the variables file: The default theme is all black and red but all the unholy files use var() placeholders. Why? Because now you've only got to change those variable colours and the whole of your site restyles. -## Pros / Cons -The idea here is you can build a quick and dirty site. It works on the idea that your main theme colour is going to be used in multiple places and for different jobs, which might be restrictive to some really flashy front end humans but for those with the style sense of a fish i.e. me, this is a nice quick way to style a site. \ No newline at end of file +## References / Thanks / Inspiration + +Feel free to pull down, mangle and use to your hearts content but please, please visit and use the work of the people who know what they are doing and worked hard on beautiful things for you all. + +* Buttons: https://fdossena.com/index.php?p=html5cool/buttons/i.frag +* Colours: https://design-system.service.gov.uk/styles/colour/ +* Form / navbar: https://www.w3schools.com/howto/howto_css_responsive_form.asp +* Ham nav: https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/ +* Cards based on: https://materializecss.com/ +* List items: https://getbootstrap.com/ +* Ideas and inspiration from: +* https://milligram.io/ +* http://getskeleton.com/ + +N.B. People of the links, if I angered you by involving your code in this nightmare then ping me and I'll cut it out! \ No newline at end of file