I've been using Dreamweaver to create my wireframes (tables).
Before I create my own css/html/icon framework I would like know if such a library already exists.
The ideal toolbox would include basic styles for all form elements, icons, css grid layout, sample standard ad sizes, and empty templates.
As far as I know, these all exist only separately. There are a few notable CSS frameworks, some with grid layouts, and CSS form styling is almost a separate discipline. As for web icons, take your pick!
The only place you're likely to find these all together (including plug-ins/add-ons) is in a full-blown web framework or CMS.
If you put such a package together for yourself, bear in mind that it will be useful to many others, make sure the HTML ad CSS validates, and choose css-based templates rather than table-based ones...
Related
In one of the projects i'm working on, the team decided to use angular/flex-layout.
I was wondering, what are the reasons to use it at all ?
I could only find reasons against.
For example this code:
<div fxLayout="row" fxLayoutAlign="space-between">
</div>
The first "best practice"/"separation of concerns" regarding html & CSS we are all familiar with, is the separation of content and style; with flex-layout we totally lose it.
it looks like an inline style, which is a really bad practice.
the only good thing I can think about is using variables directly to flex-layout directives, but we can achieve that using ngStyle directive as well.
I'm really interested in your opinions, What do you think about it ?
As the name suggests [Angular Flex-Layout] is a library for laying out your components on your web page. The library does not provide a means for styling, fonts, or colours, as those tasks are delegated to traditional styling in your application. Angular Flex-Layout deals with component positioning and works well with or without Angular Material. It is also built by the Angular team and supported by the community.
Some of the main advantages for using Angular Flex-Layout are:
The library is a pure Typescript Layout engine.
Uses HTML markup to specify layout configurations.
Independent of Angular Material.
A responsive API can specify different layouts, sizing, visibilities, viewport sizes, and display devices.
Includes CSS Grid.
Requires no external stylesheets.
I am in the process of learning and building my first website using HTML/CSS.
I have come across several nifty tricks that rely solely on CSS or sometimes on CSS+HTML to create a variety of UI features (or should I call them widgets or components?). I want to learn more about these, but I can't find proper name(s) for such features.
From what little I have been able to learn, some of them are commonly known as: Accordions, Tabs, Carousel (slider), Flip-boxes, etc.
Is there any authentic/reliable source where I can learn proper names of these CSS features or widgets, and then learn more about using them in my work.
Thanks,
These are the most common HTML/CSS/Javascript frameworks to build websites.
Go through with their Documentation.
ZurbFoundation
Bootstrap
Refer to some CSS frameworks like Bootstrap, Semantic-ui. They will have a bunch of css components/elements under them.
Use Semantic-ui page to get started
When it comes to styling a forms based web app (or pages, components, etc.), how do I build it using the least amount of CSS, style tags, style classes, and style attributes possible?
My understanding was that the paper-* elements implement an opinionated material design style that can be used to build components with similar material design out-of-the-box.
I'm trying to build an internal app for employees at my company (thus, as long as it's not bad, styling is not that important). It's basically a bunch of forms pages that look like many of the protoypical menu-driven web sites (like the polymer docs pages):
Nav menu on the left
Menu selected content on the right - text reports and forms mostly
header/logo on top
However, when I tried to copy some things (like item list boxes) out of the elements catalog like the paper-item demos I couldn't match the look in my components simply by copying the HTML. The demo HTML referenced classes for which I had to copy a bunch of <style> tags in order to get them to work.
It felt like a lot of re-inventing the wheel to copy an often repeated look.
I'm not sure if I understand your problem. The paper-* elements aren't meant to build components, they ARE components. If you want to use them you have to go the full way. If you use them as intended, they look like in the demos out of the box. You can't just copy the HTML. A more traditional way to get the material-design-look is Materialize or Googles own MaterialDesignLite.
I want to know if there is a way to create a form that will keep all styles of a webpage, while changing the content of the content of the page. Ex: When you submit a question to Stackoverflow, it keeps the all stylistic parts of the page, i.e. Header and sidebars, while changing the title and majority of page's content. Also if you can would a server-side languange, such as php, be best or would a web-side languange, such as Javascript, be best
You can do this by css also you can devide the page into many files
such as putting the header in another page (header.html) and include it in the main page using php (include_once('header.html'))
Style sheets (CSS) exist for exactly this task. Ideally, the HTML for a page contains only its content, while style sheets contain all presentation (the "look"/"format" of the page). Reusing the same style sheet(s) on most or all pages results in a consistent look across an entire website.
See http://www.w3schools.com/css/ for more general information and tutorials.
Edit If you're referring more to reusing "structural" markup across pages, that is accomplished using a template engine. Using templates things like primary navigation, sidebars, etc. can be defined in one file and used on any page that extends the base template. Many web frameworks have a template engine built-in (Django, for example has one I personally use and like).
This is handled using CSS. Basically, websites are built using HTML, CSS, and JavaScript.
HTML builds the structure of the website. It creates the basic building blocks of the site.
CSS takes care of how the website looks. It stylizes the building blocks.
JavaScript takes care of the functionality of the website. It can manipulate the building blocks in order to make something happen.
In order to maintain the same look of certain elements on a website, it is best to create a so called pattern library. A pattern library is a document consisting of pieces of code—these pieces can be reused throughout the website in order to maintain consistence. In this document, you specify the formatting of the essential elements (headings, body text, blockquotes, buttons, form elements etc. (Pattern libraries are sometimes also referred to as "style guides", however, style guides are usually visual documents, while pattern libraries are consisting of pieces of code.)
Of course you can specify the look of your website without using a pattern library, however, it might get a bit harder to maintain the same style throughout the whole website or keep the styling the same when handing the project over to another developer.
You can read more about pattern libraries in this post if you feel like it.
Do you know a source for pure CSS Templates? After setting up a simple Web Project I always wish to have a CSS file to:
Set reasonable font settings for paragraphs and headers
Polish my anchor tags
Style my forms (if I have to touch the HTML for this one - no problem)
Style my tables (I use headers and footers etc) using even & odd
Maybe give me some handy classes for error boxes, etc.
So if I Google for a such CSS file I find CSS Homepage Templates with HTML Structure and massive CSS which I can't use without changing much. I find CSS examples for perfect tables, other examples for perfect forms but what I don't find is a single CSS File which when loaded in a properly formatted HTML website will make it look "okay" instead of the pure HTML look.
Do you get me?
Does anybody have a hint for me?
Twitter Bootstrap might interested you but I believe it has a bit of javascript in it as well.
Edit: As mentioned in comment you can use many of the Bootstrap features without using any javascript.
I've personally used bootstrap and I love it. I've also bookmarked few others to play with when bandwidth permits.
Bootstrap
Blueprint
960 Grid
Update: On related matter, I would also checkout CSS Preprocessors such as Sass and LESS that could help in writing better CSS and build up a custom library to use across projects.
Perhaps try the CSS off of Twitter Bootstrap. Provides all sorts of consistent styling that's simple but elegant, in addition to some fancier element behaviors.
Update:
Adding to Yonix's related list, the following are alternative CSS preprocessors, which makes working with CSS a little more digestible:
Compass
Stylus
There's a bit of a learning curve when teaching yourself CSS, but some basic CSS is easier than you think.
For quick prototyping/wireframing and pre-made HTML templates, I use Zurb Foundation, as compared to Twitter Bootstrap. My advice is to familiarize yourself with their online documentation and delve into the main CSS file (foundation.css). You can build on top of that CSS file with the provided app.css file.
It comes with a lot of pre-made styles (buttons, forms, etc) and everything is responsive (fits on any size screen). You can choose to include all the plugins, or just the HTML and CSS. It also has an option to download the HTML templates, which come with a variety a layouts, such as a blog or a basic structure. I absolutely love it!