Starter HTML template

[piernik]

I'm new to semantic-ui - it looks great and I want to build html page using it.
There is good doc on elements but I can't see plain HTML template - which script to attach, which css files, how to define body and div at beginning? What metatags have to use? How to create page menu, div container and so on - where is simplest example for whole html doc?

[tmikaeld]

@piernik

To get started I'd suggest using HTML5 Boilerplate, then add semantic.css and semantic.js to the page header. There's not really much more too it than that.

You can find the HTML tags to use on http://www.semanti-ui.com

See here:

When you are ready to go more advanced and use only what you need from semantic-ui, go to:
http://learnsemantic.com/

[piernik]

Components and elements are clear for me.
General HTML template is what's missing.
Ex. There is good class for site container ui page grid - no docs:/
ui fixed menu - for menu - no docs:/ and so on.
All this I got from http://semantic-ui.com/ source code not examples or docs

[tmikaeld]

@piernik

I think that Semantic-UI should be viewed as a very large boilerplate, you still have to write your wrappers around the site structure, set the backgrounds, margins, menus etc. Knowing how to design a full website from scratch makes it a lot easier to use frameworks like Semantic.

Anyway, here is a full theme built on Semantic-UI that you can get inspiration from (Or buy).
http://demo.wpcharming.com/html/SoundPro/index.php

[jlukic]

@tmikaeld Thanks for sharing that theme, really exciting for me to see quality themes built on Semantic UI. One of my large aspirations for the project is getting theme developers interested in using it.

@piernik The docs should be thought of like opening a dictionary. You have all the words in it that you need, but organizing them on a page are a writer's business.

[tmikaeld]

@jlukic
I'm not the coder though, i found it on themeforest.
It's the only full Semantic-UI theme that i have found so far.

[jlukic]

Womp womp

[p-hennessy]

I found this a while ago, from the looks; its built using nothing but Semantic: http://graio.com/templates/band/index.html

@jlukic: are you looking for developers to make templates for Semantic similar to Bootstrap's:
http://getbootstrap.com/getting-started/#examples

or something like:
http://startbootstrap.com/template-categories/all/

I'd be interested in working on a few templates when I get more free time

[geemang2000]

👍 I agree with @piernik I had a hard time starting out. I spent a lot of time going through the site and examples. For example simple things like a centered container div, a full width screen etc. There are multiple ways to do these things. @jlukic it'd be great to have your best practice on a bunch of simple cookie cutter examples like :http://getbootstrap.com/getting-started/#template

[bitsoflogic]

+1 As a back-end developer, I've been struggling to get the grid system and everything to work as a full solution. I was quite surprised to see that semantic-ui.com doesn't use its own framework for its core layout. Help on this topic would be great.

[jlukic]

I know one issue with page grids, is that they have percentage gutters which can make for layouts that are difficult to manage because they are changing gradually for all browser sizes. For people who code text-heavy sites its generally known that characters per line matters for readability. If you don't carefully manage re-sizes with media queries, text will always flow too wide inside columns. I would want to move to fixed gutter widths for page grid but that would cause breaking layout changes for current users.

A work around I've come up to to help simplify things for users without adjusting ui grids current functionality would be to add a ui container element. This will act as the functional equivalent of ui one column page grid but with less markup. It will also have a fixed width per screen size, and handle mobile sizes without having to use stackable. If you need structure you can always nest a grid inside of a container.

More details coming soon..

[geemang2000]

👍