pauld123/ci-design

For the HTML of the CI Website Design

Update 4

InsiteFX and demyr17 are both now collaborators to this project. Have moved the files to an assets folder for images and css etc. The downloads page by demyr I am not certain I like but it is at least a start. Have updated the temp website with the files too.

Update 3

Added a horizontal line to the topnav. I think this looks much better. Thanks to demyr17 for this. Also added another suggestion from demyr17 but I think it is supposed to put a button affect around the top nav but cannot see it. Left it in the CSS for now.

Update 2

I have altered the logo to be more in line with current version. Fiddled with the home page quite a bit. Added the top nav HTML pages and started on the download page. The rest are empty pretty much at the moment. I think the homepage sells CI quite well now but can still be improved. It needs a call to action of some sort before the footer. When I have some more time I will get more done. If anyone wants to help please do!

Update 1

I have made a rough start recreating the design. On a spare domain I have hosted the HTML and CSS on http://www.bigpocketbook.co.uk/

CI-Design

For the HTML and CSS of the CI Website Design.

The idea here is that the code will be available for the design working group to play with at will. By keeping it as plain HTML does introduce problems like repeating headers etc, but that is minimal problem as this is a fairly simple site. The more important things like the LEARN section might need to wait for a while.

I will make a start on this but please feel free to chime in on anything and at anytime. All help is welcomed, this is a community project and although we will all have different ideas, we should be able to come to a consensus.

Decisions will be taken by the CI Design working group in votes which will be final (at least in what we propose to the foundation board who will of course retain final say in any published CI website).

We will be base the design on the winning design by Jorge Armando. However there will be changes to that design as we progress.

There are many ways to do any design in CSS and I am not suggesting for one second the way I do it is the best. But we have to start somewhere so please, critique, suggest, clone, branch and all that lovely stuff to your hearts content.

Here are some basic notes:

1. Bootstrap will be used.
2. Jquery will be used minimally.
3. Mobile first (even though the forum on CI fails this entirley)
4. Forum is a seperate system and issue all by itself.
5. Accessibility and cross browser display is very important
6. We want to make CI look beautiful.
7. Everything we do here is open source under the MIT licence.

I may have missed many things here but this is just the start.

Paul.

ci-design's Issues

git-ignore

Paul, we need a git-ignore file in the branch. I just updated for the new css stuff but on my branch local it is creating phpStorm idea/$Cache files for every one of the design files.

What video are we linking to?

I like the idea of the embedded video but we need a cool intro video. Any ideas from anyone?

Logo in top left corner needs correcting

The logo I knocked up quickly but it needs correcting. The Flame is right but we need to get the logo to look more like the one on the CI Forum, but to work on a light grey background. Could someone help with that please?

Styling The Top Bar and Top Menu

I think that would be good applying a border-bottom to top bar where logo and top menu located:

_hover.scss 17

.bg-light {
background-color: #f8f9fa !important;
border-bottom: 1px solid#eee;
}

I also believe you will like applying this css to active top menu item one where Bootstrap Css 4296:

.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
color: rgba(255, 255, 255, 0.9); background:#e1501f; border-radius: 3px;
}

Plus, we can use it for hover issue, as well. But first, we need to apply some margins on both sides (left and right) in order to have a better hover effect.

Icons on homepage - why choose CI

Don't know where these came from, but we need more.
Open Source + Text
Free + Text
Plus four more I think to make two more rows of reasons to choose CI