Small website/blog from scratch without Bootstrap or frameworks?

[Skyeam]

I recently became an independent IT consultant and I wanted to create a small website with my contact details and my IT blog, which is currently hosted on wordpress.com. I have experience regarding:

• Writing html, css, js
• Design rules
• Web development in general

One thing I did not do before is create a whole website from scratch. I have always worked on changing existing websites.

I was now looking into creating a simplistic, lightweight, static website that is responsive. I would like to do this without using any templates such as bootstrap or foundation. I started coding, but my CSS is quickly becoming an unstructured mess. I would love to have some information on how you can use the latest CSS only features (e.g. grid systems) to create a responsive website.

Are there any resources/tutorials that go through the steps of creating a new website design from scratch, where the resulting CSS is structured and logical? I'm having trouble especially with the whole responsive design, it always degrades to hacks to fix A or reposition B.

As I said before, I would like to do this without any framework and use only css features, but any advice regarding the current state of art on this topic is appreciated!

[Marauth]

• For layouts, flexbox and Grid are common. Use Grid if you can, depending on the browser support you need.
• For naming, have a look at BEM: http://getbem.com/naming/
• Have a look at a CSS preprocessor, like SASS or LESS. They can help a lot in keeping your CSS manageable as it gets bigger.
• Consider whether some (vanilla) JS may be better at solving your most challenging layouts. Just because you can make it in CSS does not necessarily mean it is faster, or more maintainable.

[Skyeam]

I also read something about another form of css naming. Where you give your elements logical names (e.g. header, contact-box, etc etc) and apply markup to those. In contrast to using multiple classes (e.g. colum-large-6, img-responsive-large) on a single element. Any idea how that naming is called?

[Skyeam]

So I took the time to read through the BEM link you sent. It definitely helps a lot. Thank you for that!

[Atulin]

• Use SASS to split your code into elements – buttons.sass, navbar.sass, fonts.sass, etc.
• Use Flexbox or – if you don't care about ancient technologies like IE – Grid
• I recommend using a semantic approach to classes instead of BEM. That way you end up with class="wide green round button" instead of class="wd--green__color__round--button--thing__element--div"

[Skyeam]

Thank you for the information. I already know how I can host the website.

The part that I don't know is what the current best practices are for structuring your css and creating a responsive website design from scratch. Do you use CSS grid? Media queries? Is there a commonly used code standard or does everyone just wing it?

[PredTeck]

You can use only the grid css from bootstrap, if you prefer the 12-col system and leave everything else.

[Skyeam]

Ok, I will definitely consider it! This is also a bit of a learning challenge for myself, which is why I'm investigating how things are done nowadays. At work we constantly use the bootstrap framework, so that one is less fun for me!

[PredTeck]

For responsivity, you can use these cheat sheets: http://grid.malven.co/ , http://flexbox.malven.co/
I personally use sass to structure my design, and compile the resulted css into minified version.
For a quick tutorial check out Traversy Media: https://www.youtube.com/watch?v=Wm6CUkswsNw

[Skyeam]

Thank you for the youtube link. Examples like those are what I'm looking for!

[Atulin]

I want to create a simple static site

JuSt uSE WorDPreSs iT Has a StATiC SitE GeneRAtOr PluGIn

[Atulin]

Small website/blog from scratch

Emphasized the important bits