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
Related
I am getting ready to build out a shopify storefront, but I have never done so before and have some questions. I like how easy it is to build a mobile and desktop view utilizing Material UI, I have found some articles online that seems to indicate people have done so in the past but I also seem to recall reading in their docs CSS frameworks like Bootstrap or Tailwind are what is supported on Shopify. In an ideal world I would like to be able to use Next.js / React with SASS and Material UI for styling, essentially just using shopify for their ecommerce solution and as a CMS. Alternatively if sticking with Hydrogen is the preferred solution would I be able to remove tailwind and still use MUI?
You have to remember that Shopify is 100% HTML, JS and CSS. How you choose to approach your storefront is just a combination of that, in ways you are comfortable with. You get to choose everything in there, knowing you manage your data with Shopify.
It also depends on your skill. You can leverage the Hydrogen and get away with almost anything your skills can provide, or you can let Shopify do most of the work, leaving you to just tinker with CSS.
In all cases, you are free as a bird to pick your CSS. Shopify chains you to nothing.
I was always using frameworks or ready-to-use boilerplates for apps development (ReactJS mostly). Right now I'm building a simple static website (using Hugo generator). I don't want to use any kind of big-ish CSS frameworks. However, I wouldn't like to reinvent a wheel by building it completely from scratch. Is there any kind of conventional solutions for this? May be some kind of tiny css-framework or a normalizer etc?
I am not asking for a specific library - I'm asking what should I look for IN the first place: framework, compiler, normalizer etc.
Well, I don't know if I understood completely what you want, but, I think this can help you.
This is a list of the top UI frameworks of 2016/2017.
My favorites are:
Semantic-UI
Material-UI
There are more simple solutions like Pure.
Recently I used Material-UI to build this React Application.
Someone asked me to cut a design layout using bootstrap/less/html5 and i am not really sure what they mean. I found something related to bootstrap from twitter, but nothing related to less.
Thank you.
Bootstrap is a css framework from twitter . Excellent for frontend prototyping and building robust crossbrowser and mobile friendly websites.
HTML5 Its an improved version of html and is in continuous development for more robustness and usability.
Less is a css preprocessor . It allows you to write css more dynamically providing re-usability and cutting short the time to write and manage large css files .
Links To read more about them :
Bootstrap : http://twitter.github.com/bootstrap/
HTML5 : http://www.w3schools.com/html/html5_intro.asp
Less : http://lesscss.org
Less is a dynamic stylesheet language. You can find it here, Less.
Bootstrap is a framework to define web pages. It is very common for the designers because they can produce an HTML/Javascript that is cross-browser, very simple and also ready for the mobile. Bootstrap.
HTML5 is the most recent standard to define web pages. It is more powerfull than previous versions. If you want to know more, try to search HTML5.
This tools have a lot of features that are impossible to describe here. Check the links, you will learn with no troubles.
I am pretty bad with CSS and HTML5 designing/templates. So, I google around and found two frameworks to start with nice looking layouts, necessary js and html5 support. But I don't know which on to use.
I would appreciate your answers on
What is the main different between two except google analytics ?
Which one is more rails friendly ?
Which one fits best to e-commerce sites, i.e. create rich content, integrate with user management frameworks etc?
Combine them and use them both - http://www.initializr.com/
The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit.
boilerplate provides you with a best practice HTML5 document, some reset CSS and a lot of javascript goodness like modernizer.js; this Twitter toolkit provides you with stylesheets that define a lot more than just a reset.
The Twitter toolkit is better compared to CSS frameworks like blueprintcss and 960 grid system and positions itself somewhere in between those two. Twitter bootstrap comes with its own fixed look and feel so you can concentrate on your content and logic.
checkout this Quora Thread
Based on your question, I gather you misunderstand what these two projects are. "Google analytics" is not the difference.
Expanding on what #thomas has already stated, Boilerplate contains starter HTML templates with best practices built-in and Bootstrap is a library of CSS and JS UI elements. They are not mutually exclusive.
You may want to look at initializer as #Zlatan has already recommended, or Kickstrap, which is an extension framework for Twitter Bootstrap.
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...