Skip to content

Commit

Permalink
Merge pull request #15 from nphillips-dev/release/2.0.0
Browse files Browse the repository at this point in the history 
Release/2.0.0
  • Loading branch information
@nphillips-dev
nphillips-dev authored Oct 26, 2020
2 parents 5c3ee28 + 102cffd commit de6b565
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 67 deletions.
63 changes: 38 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
# 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.
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).

So will I work on this more?? Maybe, it was a pointless 5 minute (okay 2 days) experiment but it was educational.
## 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.

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.

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!
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

Expand All @@ -32,11 +35,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.

<div class="container">
<div class="row">
<div class="column-full">
<div class="box-large">
<div class="card">
<div class="card-header">
Card Header
Expand All @@ -52,14 +55,11 @@ The following structure will provide a contain, with a row and a full width colu
</div>
</div>

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:

Expand Down Expand Up @@ -153,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.
## 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!
87 changes: 45 additions & 42 deletions unholy-core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +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;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.column-single {
width: 4.66666666667%;
}
.column-quarter {
width: 22%;
}
.column-third {
width: 30.6666666667%;
.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;
}
.column-half {
width: 48%;

.row > div.box-small{
width: 22%;
margin: 5px;
flex: auto;
}
.column-threeQuarters {
width: 74.0%;

.row > div.box-medium{
width: 48%;
margin: 5px;
flex: auto;
}
.column-full {
width: 100%;
margin-left: 0;

.row > div.box-large{
width: 100%;
margin-left: 0;
flex: auto;
}
@media screen and (min-width : 320px) {
.container {
width: 90%;
}

@media screen and (min-width : 320px) {
.container {
width: 90%;
margin-left: 2%;
}
}
@media screen and (min-width: 680px) {
.container {
width: 85%;
}
@media screen and (min-width: 680px) {
.container {
width: 85%;
margin-left: 4%;
}
}
@media screen and (min-width : 1024px) {
.container {
width: 80%;
}
@media screen and (min-width : 1024px) {
.container {
width: 80%;
margin-left: 8%;
}
}
/* unvisited link */
a:link {
Expand Down

0 comments on commit de6b565

Please sign in to comment.